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();
        });
    },

亲测有效哦~~

你可能感兴趣的:(easyui框架)