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

川长思鸟来 2022-06-06 00:50 587阅读 0赞

**"自去自来堂前燕,相亲相近水中鸥"**  
使用easyUI时,难免会遇到各种刁难的问题.比如在数据表格中生成子表格.像这种效果.  
![效果图][SouthEast]

那么这里是如何实现的呢.看代码:

$('#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/xxx/getlist.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:'xxx.jsp?currentDate=' + rowData.auditTime,
    						menucode:'icon-menu'
    					},
    					iconCls:'icon-menu'
    			};
    			parent.addTab(node);
    		},
    		pagination:true,
    		loadMsg:'正在加载...'
    	});

就这段代码就可以达到以下的效果 :  
![结果图][SouthEast 1]

最后附上[官方示例][Link 1]

[SouthEast]: /images/20220606/343269e0abb8493f8dd297e0bfe677b8.png
[SouthEast 1]: /images/20220606/f742104ded284e8682efb5c1b0608364.png
[Link 1]: http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material&dir=ltr&pitem=&sort=