Easyui-datagrid groupview 点击行展开

这里写图片描述

默认groupview是点击前面的加号才展开里面的行,现在我们要做成点击行也能展开。

打开 datagrid-groupview.js

找到bindEvents这个方法,接下来进行改造:

bindEvents: function (target) {
        var state = $.data(target, 'datagrid');
        var dc = state.dc;
        var body = dc.body1.add(dc.body2);
        var clickHandler = ($.data(body[0], 'events') || $._data(body[0], 'events')).click[0].handler;
        body.unbind('click').bind('click', function (e) {
            debugger
            var tt = $(e.target);
            var expander = tt.closest('span.datagrid-row-expander');
            var dgroup = tt.closest('div.datagrid-group');
            if (expander.length) {
                var gindex = expander.closest('div.datagrid-group').attr('group-index');
                if (expander.hasClass('datagrid-row-collapse')) {
                    $(target).datagrid('collapseGroup', gindex);
                } else {
                    $(target).datagrid('expandGroup', gindex);
                }
            } else if (dgroup.length) {
                //group层点击事件  
                var gcheckbox = tt.context.type != "checkbox" ? tt.find('input[type=checkbox]') : tt;
                var gindex = dgroup.attr('group-index');
                if (tt.context.type == "checkbox" || gcheckbox.length) {
                    if (tt.context.type != "checkbox") {
                        gcheckbox._propAttr('checked', !gcheckbox.is(":checked"));
                    }
                    var trs = state.dc.view2.find(gindex != undefined ? 'table.datagrid-btable:eq(' + gindex + ') tbody >tr' : 'table.datagrid-btable tbody >tr');
                    for (var i = 0; i < trs.length; i++) {
                        var tr = trs[i];
                        var rowIndex = $(tr).attr("datagrid-row-index");
                        var gchecked = $(gcheckbox).is(':checked');
                        if (gchecked) {
                            $(target).datagrid('checkRow', rowIndex);
                        } else {
                            $(target).datagrid('uncheckRow', rowIndex);
                        }
                    };
                } else {
                    expander = state.dc.view1.find('div.datagrid-group:eq(' + gindex + ') span.datagrid-row-expander');
                    var gindex = dgroup.attr('group-index');
                    if (expander.hasClass('datagrid-row-collapse')) {
                        $(target).datagrid('collapseGroup', gindex);
                    } else {
                        $(target).datagrid('expandGroup', gindex);
                    }
                }

            } else {
                //先执行easyui本身事件  
                clickHandler(e);
                //判断是否是点击行  
                var checkedTr = tt.closest('tr.datagrid-row');
                if (tt.context.type == "checkbox" || checkedTr.length) {
                    var rindex = checkedTr.attr('datagrid-row-index');
                    if (rindex != undefined) {
                        //比较是否全选  
                        var checks = checkedTr.parents('tbody').find('tr.datagrid-row-selected');
                        var checkRows = checkedTr.parents('tbody').find('tr.datagrid-row');
                        var gi = tt.parents('table').prevAll('div.datagrid-group').first().attr('group-index');
                        var ca = checkRows.length == checks.length;
                        state.dc.view1.find('div[group-index=' + gi + '] input[type=checkbox]')._propAttr('checked', ca);
                    }
                }
            }
            e.stopPropagation();
        });
    },

亲测有效哦~~

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值