首页 > 其他 > 详细

easyui datagrid单击单元格选择此列

时间:2015-10-31 14:20:47      阅读:285      评论:0      收藏:0      [点我收藏+]

示例代码实现单击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>

 

easyui datagrid单击单元格选择此列

原文:http://www.cnblogs.com/longshiyVip/p/4925413.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!