easyui datagrid单击单元格选择此列

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

源代码如下，示例测试的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>

 

转载于:https://www.cnblogs.com/longshiyVip/p/4925413.html