easyui的DataGrid DetailView详细表格查看

使用easyui实现在主表格的基础上实现每个主表格对应细表信息，效果如下：

首先除了jquery，easyui需要再引入datagrid-detailview.js，然后我们自己js写法如下：

$("#dg0").datagrid({
				url : '',
				border:false,
				pagination:true,
				pageSize:30,
				singleSelect:true,
				rownumbers:true,
				fit:true,
				nowrap:false,
				columns : [[{...}]],
				view: detailview,
			    detailFormatter:function(index,row){
				 	return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>'; 
			    }, 
			    onExpandRow:function(index,row){   
			        	var parentid = row.id;
			        	$('#ddv-'+index).datagrid({ 
			        	   url:'loadDate.do?parentid=' + parentid, 
			               singleSelect:true, 
			               rownumbers:true,
			               pagination:true,
			               pageSize:15,
			               nowrap:false,
			               columns:[[{...}]], 
			               onResize:function(){ 
			                   $('#dg0').datagrid('fixDetailRowHeight',index); 
			               }, 
			               onLoadSuccess:function(){ 
			                   setTimeout(function(){ 
			                       $('#dg0').datagrid('fixDetailRowHeight',index); 
			                   },0); 
			               } 
			           }); 
			           $('#dg0').datagrid('fixDetailRowHeight',index); 
			       }
			});

view: detailview这行开始往下都是为子表格做准备的，仔细观察不难发现detailFormatter就是在主表格每一行下面新建一个table，onExpandRow就是来定义每一行主表格对应的子表格，注意子表格table的id对应起来就行。