使用easyUI数据表格生成子表格

来源：互联网发布：怎么可以增加淘宝店的编辑：程序博客网时间：2024/05/16 11:09
“自去自来堂前燕,相亲相近水中鸥”
使用easyUI时,难免会遇到各种刁难的问题.比如在数据表格中生成子表格.像这种效果.
效果图
那么这里是如何实现的呢.看代码:
$('#phoCheckList').datagrid({        rownumbers:true,        pageSize:25,        pageList: [15,25,35,45],        fit:true,        showFooter: true,        singleSelect:true,        view: detailview,   //以下三个属性(view,detailFormatter,onExpandRow)决定了子表格能不能展开        detailFormatter:function(index,row){            return '<div style="padding:2px;position:relative;"><table class="ddv"></table></div>';        },        //点击+号展开子表格        onExpandRow: function(index,row){            var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');            ddv.datagrid({                url:'controller/realName/phoCountDetailList.json',                fitColumns:true,                singleSelect:true,                // pagination:true,                // rownumbers:true,                loadMsg:'正在加载...',                queryParams:{                    startDate:row.auditTime,                    // page:1,                    rows:100                },                height:'auto',                columns:[[                    {                        title:'操作类型',                        field: 'operate_type',                        width:100                    },                    {                        title:'订单总量',                        field: 'serialNumberTotal',                        width:150                    },                    {                        title:'订单通过数量',                        field: 'orderPassNumber',                        width:150,                        formatter:function (value,row,index) {                            return row.serialNumberTotal - row.notPassSerialNumber;                        }                    },                    {                        title:'订单未通过数量',                        field: 'notPassSerialNumber',                        width:150                    },                    {                        title:'已回传图片总量',                        field: 'photoNumer',                        width:150                    },                    {                        title:'订单图片差值',                        field: 'orderPhotoDiff',                        width:150,                        formatter:function (value,row,index) {                            return row.serialNumberTotal * 2 - row.photoNumer;                        }                    }                    ,                    {                        title:'已通过已回传图片总量',                        field: 'passSerialPhotoTotal',                        width:150                    }  ,                    {                        title:'已通过未回传图片总量',                        field: 'passSerialNoPhotoTotal',                        width:150,                        formatter:function (value,row,index) {                            return (row.serialNumberTotal - row.notPassSerialNumber) * 2 - row.passSerialPhotoTotal;                        }                    }                    ,                    {                        title:'未通过已回传图片总量',                        field: 'noPassSerialPhotoTotal',                        width:150                    } ,                    {                        title:'未通过未回传图片总量',                        field: 'noPassSerialNoPhotoTotal',                        width:150,                        formatter:function (value,row,index) {                            return row.notPassSerialNumber * 2 - row.noPassSerialPhotoTotal;                        }                    }                ]],                onResize:function(){                    $('#phoCheckList').datagrid('fixDetailRowHeight',index);                },                onLoadSuccess:function(){                    setTimeout(function(){                        $('#phoCheckList').datagrid('fixDetailRowHeight',index);                    },0);                }            });            $('#phoCheckList').datagrid('fixDetailRowHeight',index);        },//      checkOnSelect: true, //      selectOnCheck: true,        columns:[[             {                title:'日期',                field: 'auditTime',                width:100             },            {                title:'订单总量',                field: 'orderNumber',                width:150            },               {                title:'订单通过数量',                field: 'orderPassNumber',                width:150            },             {                title:'订单未通过数量',                field: 'orderFailedNumber',                width:150             },            {                title:'已回传图片总量',                field: 'photoNumber',                width:150             },             {                title:'订单图片差值',                field: 'orderPhotoDiff',                width:150              }              ,             {                title:'已通过已回传图片总量',                field: 'photoPassReturnNumber',                width:150              }  ,             {                title:'已通过未回传图片总量',                field: 'photoPassNotReturnNumber',                width:150              }              ,              {                  title:'未通过已回传图片总量',                  field: 'photoFailedReturnNumber',                  width:150              } ,              {                  title:'未通过未回传图片总量',                  field: 'photoFailedNotReturnNumber',                  width:150              }        ]],        //双击事件        onDblClickRow:function(rowIndex,rowData) {            var node = {                    text:rowData.auditTime + '实名认证对账报表',                    attributes:{                        //传当天的日期过去查询对账详单                        url:'channel2/realNameAuthentication/realNamePhoList.jsp?currentDate=' + rowData.auditTime,                        menucode:'icon-menu'                    },                    iconCls:'icon-menu'            };            parent.addTab(node);        },        pagination:true,        loadMsg:'正在加载...'    });
就这段代码就可以达到以下的效果 :
结果图
最后附上官方示例
阅读全文
0 0