Easyui 1.5.1 datagrid groupview 点击行展开

最新推荐文章于 2019-09-30 00:22:57 发布

⑧o年崋

最新推荐文章于 2019-09-30 00:22:57 发布

阅读量939

点赞数 1

分类专栏： easyui 文章标签： easyui datagrid groupview

本文链接：https://blog.csdn.net/xnlzg/article/details/82967774

版权

easyui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

打开 datagrid-groupview.js

找到bindEvents这个方法，接下来进行改造：

    bindEvents: function (target) {
        var state = $.data(target, 'datagrid'); 
        if (state.ss.bindDetailEvents) { return; }
        state.ss.bindDetailEvents = true; 
        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) {
            var tt = $(e.target);
            var tr = tt.closest('tr.datagrid-row');
            var rowIndex = parseInt(tr.attr('datagrid-row-index'));
            if (!tr.length) { return }
            if (!tt.hasClass('datagrid-row-expander')) {
                clickHandler(e);
                var html = $(target).datagrid("getPanel"); //Html
                var view = html.find("div[class=\"datagrid-view1\"]"); //Table
                var body = view.find("div[class=\"datagrid-body\"]"); //body
                var tr = $(body[0]).find("tr[datagrid-row-index=\"" + rowIndex + "\"]"); //Tr
                var td = tr.find("td[field=\"_expander\"]");
                tt = td.find("span");
            } 
            if (tt.hasClass('datagrid-row-expand')) {
                $(target).datagrid('expandRow', rowIndex);
            } else {
                $(target).datagrid('collapseRow', rowIndex);
            }
            $(target).datagrid('fixRowHeight');
            e.stopPropagation();
        }); 
       
    },