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>