easyui datagrid单击单元格选择此列

  本示例代码实现单击jquery easyui datagrid的单元格时,取消datagrid默认选中高亮此行的样式,改为选中单击的单元格所在的列,高亮此列上的所有单元格。可以配置全局single变量,只允许同时选中一列,如果不配置则默认可以选中多列。单击选中的列会取消选中高亮样式。

easyui datagrid单击单元格选择此列

  源代码如下,示例测试的easyui版本为1.3.5,如果没有效果,自己用firebug或者chrome开发工具找到数据容器的样式,修改代码对应的选择器。

	<table class="easyui-datagrid" title="jquery easyui datagrid单击单元格选择此列" style="width:700px;height:250px"
			data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'" id="dg">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:250">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr>
		</thead>
	</table>
    <style>
    .td-select{background:#FBEC88}/*td高亮样式*/
    </style>
    <script>
        //var single = true;//配置是否只能同时选择一行
        $(function () {
            $('#dg').datagrid({
                onClickCell: function (rowIndex, field, value) {
                    var me = this;
                    setTimeout(function () { $(me).datagrid('unselectRow', rowIndex) }, 1); //取消easyui的默认行选择样式,注意要延时执行,要不无法取消默认样式
                },
                onLoadSuccess: function () { //给内容table增加单元格click事件,获取单元格所在列下标进行相关DOM处理操作
                    $(this).closest('div.datagrid-view').find('div.datagrid-body td').click(function () {
                        var cellIndex = this.cellIndex, add = this.className.indexOf('td-select') == -1;
                        if (window.single === true || typeof window.single == 'number') {//是否为单选
                            if (window.single === true) single = cellIndex;
                            else if (single != cellIndex) {
                                $(this).closest('div.datagrid-body').find('td.td-select').removeClass('td-select');
                                single = cellIndex;
                            }
                        }
                        $(this).closest('div.datagrid-body').find('tr').each(function () {//遍历数据行找到对应的列进行高亮操作
                            $(this).find('td').eq(cellIndex)[add ? 'addClass' : 'removeClass']('td-select');
                        });
                    });
                }
            });
        });
    </script>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:easyui datagrid单击单元格选择此列

评论(0)Web开发网
阅读(2726)喜欢(1)easyui开发技巧