使用jQuery EasyUI的 detailview创建分组表格

r囧r小猫 2022-06-18 07:20 210阅读 0赞

# 使用jQuery EasyUI的 detailview创建分组表格 #

## > 第一次使用markdown编辑，不太会编辑，布局有点乱。 ##

## 先见效果图 ##

![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

## 下面说下使用方法 ##

--------------------

### 依赖的js以及css文件 ###

![这里写图片描述][SouthEast 2]

### **引入了bootstrap，跟折叠表格功能无关的，只是因为项目中其他位置需要，该折叠表格是easyui的一个组件，跟bootstrap无关的** ###

--------------------

### html文件内容 ###

> html中仅需一个table标签即可。

![这里写图片描述][SouthEast 3]

## js如何使用 ##

> 注意url地址的table1.json和table2.json，渲染表格必须使用规定格式的json，下面我会给出detailview能接受的json的格式。本文例子使用js读取的本地的json文件，如果你使用ajax来加载的话，请在url地址那里改为请求地址即可，一定要保证返回的json格式与规定格式相同。

**table.js文件内容**

$(function () { $('#dg').datagrid({ view: detailview, width:'auto', url:'table1.json',//使用ajax加载的话修改这个url地址 height:'auto', fitColumns:true,//会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动 rownumbers: true,//行号 columns: [[ {field: 'id1', checkbox: 'true'}, {field: 'id', title: '入库单号', styler: cellStyler}, {field: 'zhuangtai', title: '当前状态', styler: cellStyler}, {field: 'name', title: '供货单位', styler: cellStyler}, {field: 'time', title: '入库时间', styler: cellStyler}, {field: 'type', title: '入库方式', styler: cellStyler}, {field: 'zdlb', title: '账单类别', styler: cellStyler}, {field: 'num', title: '发票数量（张）', styler: cellStyler}, {field: 'leibie', title: '药品种类（种）', styler: cellStyler}, {field: 'shizhi', title: '实支金额合计', styler: cellStyler}, {field: 'pifa', title: '批发金额合计', styler: cellStyler}, {field: 'lingshou', title: '零售金额合计', styler: cellStyler} ]], onBeforeLoad: function (index, row) { /* console.log('loading');*/ }, detailFormatter: function (index, row) { // console.log('detailFormatter--index:'+index+'--'+'row:'+row); return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>'; }, onExpandRow: function (index, row) { //当展开一行时触发。 //console.log('onExpandRow---index:'+index+'--'+'row:'+row) $('#ddv-' + index).datagrid({ fitColumns:true,//会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动 rownumbers: true, url:'table2.json',//使用ajax加载的话修改这个url地址 loadMsg: '加载中...', height: 'auto', columns: [[ {field: 'id', checkbox: 'true'}, {field: 'code', title: '发票号'}, {field: 'name', title: '名称'}, {field: 'size', title: '规格'}, {field: 'num1', title: '实物数量'}, {field: 'num2', title: '发票数量'}, {field: 'koulv', title: '扣率'}, {field: 'leixing', title: '类型'}, {field: 'zhuangtai', title: '状态'}, {field: 'shizhi', title: '实支金额'}, {field: 'pifa', title: '批发金额'}, {field: 'lingshou', title: '零售金额'}, ]], onResize: function () { $('#dg').datagrid('fixDetailRowHeight', index); $('#dg').datagrid('fixRowHeight', index); }, onLoadSuccess: function () { setTimeout(function () { $('#dg').datagrid('fixDetailRowHeight', index); $('#dg').datagrid('fixRowHeight', index); }, 0); } }); $('#dg').datagrid('fixDetailRowHeight', index); $('#dg').datagrid('fixRowHeight', index); } }); }); /*修改单元格背景色*/ function cellStyler(value, row, index) { return 'color:blue;'; }

**table1.json文件内容**

{"total":28,"rows":[ { "id1": "00001", "id": "00001", "zhuangtai": "已验收", "name": "上海华仁医药有限公司", "time": "2017-01-12", "type": "方式1", "zdlb": "类别1", "num": "1", "leibie": "1", "shizhi": "-170", "pifa": "-170", "lingshou": "-187" }, { "id1": "00002", "id": "00002", "zhuangtai": "已验收", "name": "上海华仁医药有限公司", "time": "2017-02-12", "type": "方式1", "zdlb": "类别1", "num": "1", "leibie": "1", "shizhi": "120", "pifa": "130", "lingshou": "187" }, { "id1": "00003", "id": "00003", "zhuangtai": "已验收", "name": "国药控股股份有限公司", "time": "2017-03-12", "type": "方式1", "zdlb": "类别2", "num": "2", "leibie": "2", "shizhi": "2807", "pifa": "2857", "lingshou": "3142.7" }, { "id1": "00004", "id": "00004", "zhuangtai": "未验收", "name": "葵花医药有限公司", "time": "2017-04-12", "type": "方式1", "zdlb": "类别3", "num": "1", "leibie": "2", "shizhi": "160", "pifa": "130", "lingshou": "179" }, { "id1": "00005", "id": "00005", "zhuangtai": "未验收", "name": "湖南医药有限公司", "time": "2017-05-12", "type": "方式2", "zdlb": "类别4", "num": "1", "leibie": "3", "shizhi": "140", "pifa": "140", "lingshou": "180" }, { "id1": "00006", "id": "00006", "zhuangtai": "未验收", "name": "国药控股股份有限公司", "time": "2017-06-12", "type": "方式3", "zdlb": "类别4", "num": "2", "leibie": "3", "shizhi": "287", "pifa": "287", "lingshou": "312.7" }, { "id1": "00007", "id": "00007", "zhuangtai": "已验收", "name": "国药控股股份有限公司", "time": "2017-07-12", "type": "方式4", "zdlb": "类别3", "num": "2", "leibie": "3", "shizhi": "587", "pifa": "387", "lingshou": "812.7" }, { "id1": "00008", "id": "00008", "zhuangtai": "未验收", "name": "湖南医药有限公司", "time": "2017-08-12", "type": "方式5", "zdlb": "类别4", "num": "1", "leibie": "2", "shizhi": "27", "pifa": "87", "lingshou": "32.7" }, { "id1": "00009", "id": "00009", "zhuangtai": "已验收", "name": "湖南医药有限公司", "time": "2017-09-12", "type": "方式5", "zdlb": "类别5", "num": "2", "leibie": "1", "shizhi": "17", "pifa": "17", "lingshou": "12.7" }, { "id1": "00010", "id": "000010", "zhuangtai": "已验收", "name": "湖南医药有限公司", "time": "2017-10-12", "type": "方式1", "zdlb": "类别2", "num": "2", "leibie": "1", "shizhi": "147", "pifa": "127", "lingshou": "172.7" } , { "id1": "00011", "id": "000011", "zhuangtai": "已验收", "name": "湖南医药有限公司", "time": "2017-11-12", "type": "方式1", "zdlb": "类别3", "num": "1", "leibie": "2", "shizhi": "167", "pifa": "427", "lingshou": "272.7" } ]}

**table2.json文件内容**

{
      "total": 28,
      "rows": [ { "id": "00001", "code": "123125", "name": "复方氯己定含漱液", "size": "300ml*1瓶/瓶", "num1": "-10", "num2": "-10", "koulv": "100", "leixing": "退药", "zhuangtai": "保存", "shizhi": "-170", "pifa": "-170", "lingshou": "-178" }, { "id": "00002", "code": "123126", "name": "氨碘肽滴眼液", "size": "5ml*2支/盒", "num1": "10", "num2": "-10", "koulv": "100", "leixing": "退药", "zhuangtai": "保存", "shizhi": "-170", "pifa": "-170", "lingshou": "-178" }, { "id": "00003", "code": "123127", "name": "阿昔洛韦滴眼液", "size": "8ml*2支/支", "num1": "-10", "num2": "-10", "koulv": "100", "leixing": "退药", "zhuangtai": "保存", "shizhi": "-170", "pifa": "-170", "lingshou": "-178" }, { "id": "00004", "code": "123128", "name": "布林佐胺滴眼液", "size": "300ml*1瓶/瓶", "num1": "-10", "num2": "-10", "koulv": "100", "leixing": "退药", "zhuangtai": "保存", "shizhi": "-170", "pifa": "-170", "lingshou": "-178" } ] }

**datagrid-detailview.js**  
该js是easyui的一个扩展插件，网上可以找到，这里也给出文件内容

$.extend($.fn.datagrid.defaults, {
        autoUpdateDetail: true  // Define if update the row detail content when update a row
    });
    
    var detailview = $.extend({}, $.fn.datagrid.defaults.view, {
        render: function(target, container, frozen){ 
            var state = $.data(target, 'datagrid');
            var opts = state.options;
            if (frozen){
                if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))){
                    return;
                }
            }
    
            var rows = state.data.rows;
            var fields = $(target).datagrid('getColumnFields', frozen);
            var table = [];
            table.push('<table class="datagrid-btable" cellspacing="0" cellpadding="0" border="0"><tbody>');
            for(var i=0; i<rows.length; i++) {
                // get the class and style attributes for this row
                var css = opts.rowStyler ? opts.rowStyler.call(target, i, rows[i]) : '';
                var classValue = '';
                var styleValue = '';
                if (typeof css == 'string'){
                    styleValue = css;
                } else if (css){
                    classValue = css['class'] || '';
                    styleValue = css['style'] || '';
                }
    
                var cls = 'class="datagrid-row ' + (i % 2 && opts.striped ? 'datagrid-row-alt ' : ' ') + classValue + '"';
                var style = styleValue ? 'style="' + styleValue + '"' : '';
                var rowId = state.rowIdPrefix + '-' + (frozen?1:2) + '-' + i;
                table.push('<tr id="' + rowId + '" datagrid-row-index="' + i + '" ' + cls + ' ' + style + '>');
                table.push(this.renderRow.call(this, target, fields, frozen, i, rows[i]));
                table.push('</tr>');
    
                table.push('<tr style="display:none;">');
                if (frozen){
                    table.push('<td colspan=' + (fields.length+(opts.rownumbers?1:0)) + ' style="border-right:0">');
                } else {
                    table.push('<td colspan=' + (fields.length) + '>');
                }
    
                table.push('<div class="datagrid-row-detail">');
                if (frozen){
                    table.push(' ');
                } else {
                    table.push(opts.detailFormatter.call(target, i, rows[i]));
                }
                table.push('</div>');
    
                table.push('</td>');
                table.push('</tr>');
    
            }
            table.push('</tbody></table>');
    
            $(container).html(table.join(''));
        },
    
        renderRow: function(target, fields, frozen, rowIndex, rowData){ 
            var opts = $.data(target, 'datagrid').options;
    
            var cc = [];
            if (frozen && opts.rownumbers){
                var rownumber = rowIndex + 1;
                if (opts.pagination){
                    rownumber += (opts.pageNumber-1)*opts.pageSize;
                }
                cc.push('<td class="datagrid-td-rownumber"><div class="datagrid-cell-rownumber">'+rownumber+'</div></td>');
            }
            for(var i=0; i<fields.length; i++){
                var field = fields[i];
                var col = $(target).datagrid('getColumnOption', field);
                if (col){
                    var value = rowData[field]; // the field value
                    var css = col.styler ? (col.styler(value, rowData, rowIndex)||'') : '';
                    var classValue = '';
                    var styleValue = '';
                    if (typeof css == 'string'){
                        styleValue = css;
                    } else if (cc){
                        classValue = css['class'] || '';
                        styleValue = css['style'] || '';
                    }
                    var cls = classValue ? 'class="' + classValue + '"' : '';
                    var style = col.hidden ? 'style="display:none;' + styleValue + '"' : (styleValue ? 'style="' + styleValue + '"' : '');
    
                    cc.push('<td field="' + field + '" ' + cls + ' ' + style + '>');
    
                    if (col.checkbox){
                        style = '';
                    } else if (col.expander){
                        style = "text-align:center;height:16px;";
                    } else {
                        style = styleValue;
                        if (col.align){style += ';text-align:' + col.align + ';'}
                        if (!opts.nowrap){
                            style += ';white-space:normal;height:auto;';
                        } else if (opts.autoRowHeight){
                            style += ';height:auto;';
                        }
                    }
    
                    cc.push('<div style="' + style + '" ');
                    if (col.checkbox){
                        cc.push('class="datagrid-cell-check ');
                    } else {
                        cc.push('class="datagrid-cell ' + col.cellClass);
                    }
                    cc.push('">');
    
                    if (col.checkbox){
                        cc.push('<input type="checkbox" name="' + field + '" value="' + (value!=undefined ? value : '') + '">');
                    } else if (col.expander) {
                        //cc.push('<div style="text-align:center;width:16px;height:16px;">');
                        cc.push('<span class="datagrid-row-expander datagrid-row-expand" style="display:inline-block;width:16px;height:16px;cursor:pointer;" />');
                        //cc.push('</div>');
                    } else if (col.formatter){
                        cc.push(col.formatter(value, rowData, rowIndex));
                    } else {
                        cc.push(value);
                    }
    
                    cc.push('</div>');
                    cc.push('</td>');
                }
            }
            return cc.join('');
        },
    
        insertRow: function(target, index, row){ 
            var opts = $.data(target, 'datagrid').options;
            var dc = $.data(target, 'datagrid').dc;
            var panel = $(target).datagrid('getPanel');
            var view1 = dc.view1;
            var view2 = dc.view2;
    
            var isAppend = false;
            var rowLength = $(target).datagrid('getRows').length;
            if (rowLength == 0){
                $(target).datagrid('loadData',{total:1,rows:[row]});
                return;
            }
    
            if (index == undefined || index == null || index >= rowLength) {
                index = rowLength;
                isAppend = true;
                this.canUpdateDetail = false;
            }
    
            $.fn.datagrid.defaults.view.insertRow.call(this, target, index, row);
    
            _insert(true);
            _insert(false);
    
            this.canUpdateDetail = true;
    
            function _insert(frozen){ 
                var tr = opts.finder.getTr(target, index, 'body', frozen?1:2);
                if (isAppend){
                    var detail = tr.next();
                    var newDetail = tr.next().clone();
                    tr.insertAfter(detail);
                } else {
                    var newDetail = tr.next().next().clone();
                }
                newDetail.insertAfter(tr);
                newDetail.hide();
                if (!frozen){
                    newDetail.find('div.datagrid-row-detail').html(opts.detailFormatter.call(target, index, row));
                }
            }
        },
    
        deleteRow: function(target, index){ 
            var opts = $.data(target, 'datagrid').options;
            var dc = $.data(target, 'datagrid').dc;
            var tr = opts.finder.getTr(target, index);
            tr.next().remove();
            $.fn.datagrid.defaults.view.deleteRow.call(this, target, index);
            dc.body2.triggerHandler('scroll');
        },
    
        updateRow: function(target, rowIndex, row){ 
            var dc = $.data(target, 'datagrid').dc;
            var opts = $.data(target, 'datagrid').options;
            var cls = $(target).datagrid('getExpander', rowIndex).attr('class');
            $.fn.datagrid.defaults.view.updateRow.call(this, target, rowIndex, row);
            $(target).datagrid('getExpander', rowIndex).attr('class',cls);
    
            // update the detail content
            if (opts.autoUpdateDetail && this.canUpdateDetail){
                var row = $(target).datagrid('getRows')[rowIndex];
                var detail = $(target).datagrid('getRowDetail', rowIndex);
                detail.html(opts.detailFormatter.call(target, rowIndex, row));
            }
        },
    
        bindEvents: function(target){ 
            var state = $.data(target, 'datagrid');
    
            if (state.ss.bindDetailEvents){
       return;}
            state.ss.bindDetailEvents = true;
    
            var dc = state.dc;
            var opts = state.options;
            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');
                if (!tr.length){
       return}
                if (tt.hasClass('datagrid-row-expander')){
                    var rowIndex = parseInt(tr.attr('datagrid-row-index'));
                    if (tt.hasClass('datagrid-row-expand')){
                        $(target).datagrid('expandRow', rowIndex);
                    } else {
                        $(target).datagrid('collapseRow', rowIndex);
                    }
                    $(target).datagrid('fixRowHeight');
    
                } else {
                    clickHandler(e);
                }
                e.stopPropagation();
            });
        },
    
        onBeforeRender: function(target){ 
            var state = $.data(target, 'datagrid');
            var opts = state.options;
            var dc = state.dc;
            var t = $(target);
            var hasExpander = false;
            var fields = t.datagrid('getColumnFields',true).concat(t.datagrid('getColumnFields'));
            for(var i=0; i<fields.length; i++){
                var col = t.datagrid('getColumnOption', fields[i]);
                if (col.expander){
                    hasExpander = true;
                    break;
                }
            }
            if (!hasExpander){
                if (opts.frozenColumns && opts.frozenColumns.length){
                    opts.frozenColumns[0].splice(0,0,{field:'_expander',expander:true,width:24,resizable:false,fixed:true});
                } else {
                    opts.frozenColumns = [[{field:'_expander',expander:true,width:24,resizable:false,fixed:true}]];
                }
    
                var t = dc.view1.children('div.datagrid-header').find('table');
                var td = $('<td rowspan="'+opts.frozenColumns.length+'"><div class="datagrid-header-expander" style="width:24px;"></div></td>');
                if ($('tr',t).length == 0){
                    td.wrap('<tr></tr>').parent().appendTo($('tbody',t));
                } else if (opts.rownumbers){
                    td.insertAfter(t.find('td:has(div.datagrid-header-rownumber)'));
                } else {
                    td.prependTo(t.find('tr:first'));
                }
            }
    
            // if (!state.bindDetailEvents){ 
            // state.bindDetailEvents = true;
            // var that = this;
            // setTimeout(function(){ 
            // that.bindEvents(target);
            // },0);
            // }
        },
    
        onAfterRender: function(target){ 
            var that = this;
            var state = $.data(target, 'datagrid');
            var dc = state.dc;
            var opts = state.options;
            var panel = $(target).datagrid('getPanel');
    
            $.fn.datagrid.defaults.view.onAfterRender.call(this, target);
    
            if (!state.onResizeColumn){
                state.onResizeColumn = opts.onResizeColumn;
                opts.onResizeColumn = function(field, width){ 
                    if (!opts.fitColumns){
                        resizeDetails();                
                    }
                    var rowCount = $(target).datagrid('getRows').length;
                    for(var i=0; i<rowCount; i++){
                        $(target).datagrid('fixDetailRowHeight', i);
                    }
    
                    // call the old event code
                    state.onResizeColumn.call(target, field, width);
                };
            }
            if (!state.onResize){
                state.onResize = opts.onResize;
                opts.onResize = function(width, height){ 
                    if (opts.fitColumns){
                        resizeDetails();
                    }
                    state.onResize.call(panel, width, height);
                };
            }
    
            // function resizeDetails(){ 
            // var ht = dc.header2.find('table');
            // var fr = ht.find('tr.datagrid-filter-row');
            // fr.hide();
            // var ww = ht.width()-1;
            // var details = dc.body2.find('>table.datagrid-btable>tbody>tr>td>div.datagrid-row-detail:visible')._outerWidth(ww);
            // details.find('.easyui-fluid').trigger('_resize');
            // fr.show();
            // }
            function resizeDetails(){ 
                var details = dc.body2.find('>table.datagrid-btable>tbody>tr>td>div.datagrid-row-detail:visible');
                if (details.length){
                    var ww = 0;
                    dc.header2.find('.datagrid-header-check:visible,.datagrid-cell:visible').each(function(){ 
                        ww += $(this).outerWidth(true) + 1;
                    });
                    if (ww != details.outerWidth(true)){
                        details._outerWidth(ww);
                        details.find('.easyui-fluid').trigger('_resize');
                    }
                }
            }
    
    
            this.canUpdateDetail = true;    // define if to update the detail content when 'updateRow' method is called;
    
            var footer = dc.footer1.add(dc.footer2);
            footer.find('span.datagrid-row-expander').css('visibility', 'hidden');
            $(target).datagrid('resize');
    
            this.bindEvents(target);
            var detail = dc.body1.add(dc.body2).find('div.datagrid-row-detail');
            detail.unbind().bind('mouseover mouseout click dblclick contextmenu scroll', function(e){ 
                e.stopPropagation();
            });
        }
    });
    
    $.extend($.fn.datagrid.methods, {
        fixDetailRowHeight: function(jq, index){ 
            return jq.each(function(){ 
                var opts = $.data(this, 'datagrid').options;
                if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))){
                    return;
                }
                var dc = $.data(this, 'datagrid').dc;
                var tr1 = opts.finder.getTr(this, index, 'body', 1).next();
                var tr2 = opts.finder.getTr(this, index, 'body', 2).next();
                // fix the detail row height
                if (tr2.is(':visible')){
                    tr1.css('height', '');
                    tr2.css('height', '');
                    var height = Math.max(tr1.height(), tr2.height());
                    tr1.css('height', height);
                    tr2.css('height', height);
                }
                dc.body2.triggerHandler('scroll');
            });
        },
        getExpander: function(jq, index){    // get row expander object
            var opts = $.data(jq[0], 'datagrid').options;
            return opts.finder.getTr(jq[0], index).find('span.datagrid-row-expander');
        },
        // get row detail container
        getRowDetail: function(jq, index){ 
            var opts = $.data(jq[0], 'datagrid').options;
            var tr = opts.finder.getTr(jq[0], index, 'body', 2);
            // return tr.next().find('div.datagrid-row-detail');
            return tr.next().find('>td>div.datagrid-row-detail');
        },
        expandRow: function(jq, index){ 
            return jq.each(function(){ 
                var opts = $(this).datagrid('options');
                var dc = $.data(this, 'datagrid').dc;
                var expander = $(this).datagrid('getExpander', index);
                if (expander.hasClass('datagrid-row-expand')){
                    expander.removeClass('datagrid-row-expand').addClass('datagrid-row-collapse');
                    var tr1 = opts.finder.getTr(this, index, 'body', 1).next();
                    var tr2 = opts.finder.getTr(this, index, 'body', 2).next();
                    tr1.show();
                    tr2.show();
                    $(this).datagrid('fixDetailRowHeight', index);
                    if (opts.onExpandRow){
                        var row = $(this).datagrid('getRows')[index];
                        opts.onExpandRow.call(this, index, row);
                    }
                }
            });
        },
        collapseRow: function(jq, index){ 
            return jq.each(function(){ 
                var opts = $(this).datagrid('options');
                var dc = $.data(this, 'datagrid').dc;
                var expander = $(this).datagrid('getExpander', index);
                if (expander.hasClass('datagrid-row-collapse')){
                    expander.removeClass('datagrid-row-collapse').addClass('datagrid-row-expand');
                    var tr1 = opts.finder.getTr(this, index, 'body', 1).next();
                    var tr2 = opts.finder.getTr(this, index, 'body', 2).next();
                    tr1.hide();
                    tr2.hide();
                    dc.body2.triggerHandler('scroll');
                    if (opts.onCollapseRow){
                        var row = $(this).datagrid('getRows')[index];
                        opts.onCollapseRow.call(this, index, row);
                    }
                }
            });
        }
    });
    
    $.extend($.fn.datagrid.methods, {
        subgrid: function(jq, conf){ 
            return jq.each(function(){ 
                createGrid(this, conf);
    
                function createGrid(target, conf, prow){ 
                    var queryParams = $.extend({}, conf.options.queryParams||{});
                    // queryParams[conf.options.foreignField] = prow ? prow[conf.options.foreignField] : undefined;
                    if (prow){
                        var fk = conf.options.foreignField;
                        if ($.isFunction(fk)){
                            $.extend(queryParams, fk.call(conf, prow));
                        } else {
                            queryParams[fk] = prow[fk];
                        }
                    }
    
                    var plugin = conf.options.edatagrid ? 'edatagrid' : 'datagrid';
    
                    $(target)[plugin]($.extend({}, conf.options, {
                        subgrid: conf.subgrid,
                        view: (conf.subgrid ? detailview : undefined),
                        queryParams: queryParams,
                        detailFormatter: function(index, row){ 
                            return '<div><table class="datagrid-subgrid"></table></div>';
                        },
                        onExpandRow: function(index, row){ 
                            var opts = $(this).datagrid('options');
                            var rd = $(this).datagrid('getRowDetail', index);
                            var dg = getSubGrid(rd);
                            if (!dg.data('datagrid')){
                                createGrid(dg[0], opts.subgrid, row);
                            }
                            rd.find('.easyui-fluid').trigger('_resize');
                            setHeight(this, index);
                            if (conf.options.onExpandRow){
                                conf.options.onExpandRow.call(this, index, row);
                            }
                        },
                        onCollapseRow: function(index, row){ 
                            setHeight(this, index);
                            if (conf.options.onCollapseRow){
                                conf.options.onCollapseRow.call(this, index, row);
                            }
                        },
                        onResize: function(){ 
                            var dg = $(this).children('div.datagrid-view').children('table')
                            setParentHeight(this);
                        },
                        onResizeColumn: function(field, width){ 
                            setParentHeight(this);
                            if (conf.options.onResizeColumn){
                                conf.options.onResizeColumn.call(this, field, width);
                            }
                        },
                        onLoadSuccess: function(data){ 
                            setParentHeight(this);
                            if (conf.options.onLoadSuccess){
                                conf.options.onLoadSuccess.call(this, data);
                            }
                        }
                    }));
                }
                function getSubGrid(rowDetail){ 
                    var div = $(rowDetail).children('div');
                    if (div.children('div.datagrid').length){
                        return div.find('>div.datagrid>div.panel-body>div.datagrid-view>table.datagrid-subgrid');
                    } else {
                        return div.find('>table.datagrid-subgrid');
                    }
                }
                function setParentHeight(target){ 
                    var tr = $(target).closest('div.datagrid-row-detail').closest('tr').prev();
                    if (tr.length){
                        var index = parseInt(tr.attr('datagrid-row-index'));
                        var dg = tr.closest('div.datagrid-view').children('table');
                        setHeight(dg[0], index);
                    }
                }
                function setHeight(target, index){ 
                    $(target).datagrid('fixDetailRowHeight', index);
                    $(target).datagrid('fixRowHeight', index);
                    var tr = $(target).closest('div.datagrid-row-detail').closest('tr').prev();
                    if (tr.length){
                        var index = parseInt(tr.attr('datagrid-row-index'));
                        var dg = tr.closest('div.datagrid-view').children('table');
                        setHeight(dg[0], index);
                    }
                }
            });
        },
        getSelfGrid: function(jq){ 
            var grid = jq.closest('.datagrid');
            if (grid.length){
                return grid.find('>.datagrid-wrap>.datagrid-view>.datagrid-f');
            } else {
                return null;
            }
        },
        getParentGrid: function(jq){ 
            var detail = jq.closest('div.datagrid-row-detail');
            if (detail.length){
                return detail.closest('.datagrid-view').children('.datagrid-f');
            } else {
                return null;
            }
        },
        getParentRowIndex: function(jq){ 
            var detail = jq.closest('div.datagrid-row-detail');
            if (detail.length){
                var tr = detail.closest('tr').prev();
                return parseInt(tr.attr('datagrid-row-index'));
            } else {
                return -1;
            }
        }
    });

**css/image文件夹的两个图片，可以在easyui的包中找到，去官网下载easyui解压后可以找到**

**datagrid\_icons.png**  
![这里写图片描述][SouthEast 4]  
**loading.gif**  
![这里写图片描述][SouthEast 5]

> Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— [ \[ 维基百科 \]][_ _]

[SouthEast]: /images/20220618/d1a232d99d6545909449536b84e64d49.png
[SouthEast 1]: /images/20220618/563a0dbb31204d74978f148a4f3a1886.png
[SouthEast 2]: /images/20220618/7d6eb78bf133410abb56487d522cdd7e.png
[SouthEast 3]: /images/20220618/da49609f07e54d2bb70346457651fd8a.png
[SouthEast 4]: /images/20220618/8267a8fe2d844902aa23dea02cdffe5e.png
[SouthEast 5]: /images/20220618/6f57b6c7a04f4c7fb9f075e6fd4d760f.png
[_ _]: https://zh.wikipedia.org/wiki/Markdown