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

最新推荐文章于 2024-08-17 04:09:16 发布
最新推荐文章于 2024-08-17 04:09:16 发布
阅读量6.2k 收藏 8
点赞数 3
分类专栏： java 前端 easy-ui easy-ui-datagrid 文章标签： jquery easyui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012775558/article/details/68926905
版权

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

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

先见效果图

这里写图片描述

这里写图片描述

下面说下使用方法

依赖的js以及css文件

这里写图片描述

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

html文件内容

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


<div style="padding: 5px">
    <table class="easyui-datagrid" id="dg">
    </table>
</div>

这里写图片描述

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('&nbsp;');
            } 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
这里写图片描述
loading.gif
这里写图片描述

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

Juveniless
关注
专栏目录
Easyui实现数据分组
chengmi6360的博客
04-01 1231
1.前台js实现 $('#report').datagrid({ fit: true, rownumbers: true, remoteSort: false, nowrap: false, fitColumns: true, s...
jQuery-Easyui 1.2 实现多层菜单
weixin_34319817的博客
01-08 227
早上打开邮箱，一位朋友问我之前JQuery-Easyui 怎么做可以实现多级菜单。。。 11年9月份项目刚开始时，找到了园中的疯狂秀才http://www.cnblogs.com/hxling/archive/2010/09/06/1819260.html。因为秀才上面的Demo没有多级菜单。也是第一次接触Easyui。好多不是明白。不过后来我们叁还是捣鼓出来了。但是发现我们的项目用不了。就放弃...
jquery easyui 表格ajax
最新发布
weixin_41787653的博客
08-17 11
使用 jQuery EasyUI 实现 AJAX 表格 在前端开发中，使用 AJAX 技术加载数据是一项非常常见的需求。本文将教你如何使用 jQuery EasyUI 创建一个 AJAX 表格。我们将逐步展示整个流程，并逐步解释每个步骤所需的代码。 整体流程 下面的表格展示了实现 jQuery EasyUI 表格实现 AJ...
easyui将表格进行分组合并，根据数据的值进行分组，不在一个组内不进行合并操作
weixin_38656862的博客
08-21 744
刚刚接手到公司的考勤功能，需要将考勤数据与加班数据分两行显示，但是计算加班及休假时间有需要显示在一行，大概是这样的; 网络上找了很多有关表格合并的功能，发现都是直接根据相同值进行合并； 自己动手改，将数据进行分组 var rows = tTable.datagrid("getRows"); var map = {}, dest = []; ...
easyui DataGrid表
cpf-freesky
12-04 567
介绍DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
jquery EasyUi学习--创建简单的table
wu_0916的博客
05-09 881
本代码根据jQueryEasyUi源码datagrid.html进行修改。 1.效果图： 2.源码：table.jsp<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOC
easyuigroupview
12-15
easyui groupview 可以进行grid分组，方便使用
EasyUI折叠表格层次显示detailview详解及实例
08-31
【EasyUI折叠表格层次显示detailview详解】 在Web开发中，EasyUI是一个基于jQuery的UI框架，它提供了丰富的组件和简单易用的API，帮助开发者快速构建用户界面。本文将深入探讨EasyUI中的一个特殊功能——折叠表格...
jquery-easyui-datagridview datagrid-detailview.js升级自定义展开按钮功能
04-01
jquery-easyui的扩展组件jquery-easyui-datagridview，其中的datagrid-detailview.js可方便地生成子网格，但是每行均默认生成展开按钮，实际我们希望对某些行不显示展开按钮，网上很多人提供的解决方案就是通过dom...
jquery-easyui.rar_jquery easyui _jquery对话框
09-24
1. **jQuery基础**：jQuery EasyUI是建立在jQuery库之上的，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互。理解jQuery的基本用法是使用jQuery EasyUI的前提。 2. **...
用JQuery实现table按列分组（简单常用
04-14
利用JQuery实现table按列分组，方法有通过列索引、列name值实现分组。
【EasyUI DataGrid DetailView】表格嵌套子表格
wilson_m的博客
08-23 6794
一、功能描述 在做项目的时候，要求能够对某一行的数据进行折叠显示，用来查看该行的详细信息。拟通过采用easyui的detailview创建表格分组，大致的效果图如下所示： 二、使用方法 &amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;本篇博客承接以前的一篇博客：https://blog.csdn.net/wilson_m/article/details/813
1分钟学会easyui表格嵌套子表格datagrid-detailview
乔治小兄弟
11-28 2438
第一步     导入easyUI的js插件：datagrid-detailview.js     &lt;!-- detagrid嵌套子表单，注意：一定要放到easyUI和JQuery的后面 --&gt;     &lt;script type="text/javascript" src="static/js/datagrid-detailview.js"&gt;&lt;/script&gt;...
easyUI 数据表格-datagrid
弗里曼的小伙伴
10-19 2610
easyUI 数据表格-datagrid sf2gis@163.com 2015年9月28日   1 目标：数据的表格展示，网页版excel（具有所有功能）。 2 原理：table的扩展封装。 3 流程：创建table，设置为easyui-datagrid。设置属性和数据。       href="easyui/jquery-easyui-1.4.3/th
EasyUI DataGrid DetailView（数据表格详细展示带子表格）
qssn的博客
03-31 9551
Mark一下EASY UI 的数据表格详细展示使用记录。 第一步：创建页面布局 这一步主要是引用Easy UI的JS，除了easyui.min.js还有datagrid-detailview.js
datagrid进阶——subGrid讲解
懒人的博客
10-05 7667
datagrid进阶——subGrid讲解
easyui datagrid表格嵌套子表
ywb289617258的博客
05-15 1027
1.源码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="jquery,ui,easy,easyui,web"> <meta name="description" content="easyui help you build your web page ...
easyUI折叠表格层次显示detailview详解及实例（本实例3层嵌套）
Lynn_Blog
12-28 8884
本文目的： 使用easyUi的特殊常用实例，表格层次显示，一层套一层，显示详细数据，嵌套3层应该可以满足所有人的需求了吧。如果你想嵌套4层，有了嵌套3层的案例，4层，5层不是问题吧！！！ 下面开始引入我们需要的css文件 下面引入我们需要的js文件 查看我们的body标签中的代码 我们自己编写的js代码
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值