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

最新推荐文章于 2024-03-18 21:27:04 发布

原创最新推荐文章于 2024-03-18 21:27:04 发布 · 2.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #子表格 #easyui子表格

easyUI 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在EasyUI的数据表格中嵌套子表格，并提供了一段详细的代码示例。通过设置特定属性，如view、detailFormatter及onExpandRow，可以实现在主表格行内展开子表格的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

"自去自来堂前燕,相亲相近水中鸥"
使用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/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:'正在加载...'
	});

就这段代码就可以达到以下的效果 :
结果图