爱威尔-easyui datagrid 的子表格datagrid-detailview 实现一主多从效果

<p> 上一篇 <a class="ke-insertfile" href="http://www.loveweir.com/posts/view/20" target="_blank">easyui datagrid 的子表格datagrid-detailview</a> 实现了一个主表格一个子表格的效果， </p> 
<p> 这次实现一个主表格 对应多个子表格的效果。先看图： </p> 
<p> <img src="22/20150204103530_795.png" alt=""> </p> 
<p> <br> </p> 
<p> 代码如下： </p> 
<p> </p>
<pre class="prettyprint lang-html"><%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>计划物料关联采购单管理</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<jsp:include page="/pub.jsp"></jsp:include>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/datagrid-detailview.js"></script>
<script type="text/javascript">
var poConnDataGrid;
$(function() {
	poConnDataGrid = $('#poConn_datagrid').datagrid({
		url : '${pageContext.request.contextPath}/poOrder/list',
		fit : true,
		fitColumns : true,
		border : false,
		pagination : true,
		idField : 'id',
		pagePosition : 'both',
		singleSelect:true,
		view: detailview,
		columns : [ [ {
			field : 'id',
			title : '编号',
			width : 100,
			hidden : true
		}, {
			field : 'dateStr',
			title : '计划到料日期',
			width : 50
		}, {
			field : 'fnumber',
			title : '物料编号',
			width : 70
		}, {
			field : 'username',
			title : '用户',
			width : 40
		}] ],
		detailFormatter:function(index,row){
            return '<div style="padding:2px"><table id="ddv-' + index + '"></table><table id="sddv-' + index + '"></table></div>';
        },
        onExpandRow:function(index,row){
            $('#ddv-'+index).datagrid({  
                url:'${pageContext.request.contextPath}/poOrder/getPoOrder?FNumber='+row.fnumber+'&id='+row.id,  
                fitColumns:true,  
                singleSelect:true,  
                height:'auto',
                showFooter: true,
                columns:[[  
                    {field:'fbillNo',title:'采购单编号',width:50},  
                    {field:'fdate',title:'采购日期',width:50,
            			formatter: function(value,row,index){
            				return getSmpFormatDateByLong(value,false);
            			}},
                    {field:'fname',title:'供应商',width:50},  
                    {field:'fqty',title:'采购数量',width:100},  
                    {field:'fclosed',title:'采购单状态',width:50}
                ]],  
                onResize:function(){  
                    $('#poConn_datagrid').datagrid('fixDetailRowHeight',index);  
                },
                onLoadSuccess:function(){  
                    setTimeout(function(){  
                        $('#poConn_datagrid').datagrid('fixDetailRowHeight',index);  
                    },0);  
                }  
            });
            
            $('#sddv-'+index).datagrid({  
                url:'${pageContext.request.contextPath}/poOrder/getStockBill?fnumber='+row.fnumber+'&dateStr='+row.dateStr,  
                fitColumns:true,  
                singleSelect:true,  
                height:'auto',
                showFooter: true,
                columns:[[  
                    {field:'fitemId',title:'ID',hidden:true},  
                    {field:'fnumber',title:'物料编号',width:50},
                    {field:'fname',title:'名称',width:50},  
                    {field:'fdate',title:'来料日期',width:50,
            			formatter: function(value,row,index){
            				if(value!=undefined){
            					return getSmpFormatDateByLong(value,false);
            				}
            			}},
            		{field:'fmodel',title:'规格',width:100},
                    {field:'fqty',title:'数量',width:50}
                ]],  
                onResize:function(){  
                    $('#poConn_datagrid').datagrid('fixDetailRowHeight',index);  
                },
                onLoadSuccess:function(){  
                    setTimeout(function(){  
                        $('#poConn_datagrid').datagrid('fixDetailRowHeight',index);  
                    },0);  
                }  
            });
            
            $('#poConn_datagrid').datagrid('fixDetailRowHeight',index);  
        }
	});
});

</script>
</head>

</body>
</html></pre> 关键点： 
<p></p> 
<p> detailFormatter:function(index,row){<br>             return '<div style="padding:2px"><span style="background-color:#E53333;"><table id="ddv-' + index + '"></table></span><span style="background-color:#009900;"><table id="sddv-' + index + '"></table></span></div>';<br>         }<br> </p> 
<p> 这里有两个table 这样看来这里不止可以有两个，而是N个。 </p> 
<p> <br> </p> 
<p> 另外就是： </p> 
<p> onExpandRow:function(index,row){<br>             $('#ddv-'+index).datagrid({  。。。。。。 </p> 
<p>             $('#sddv-'+index).datagrid({。。。。。。 </p> 
<p> <br> </p> 
<p> 这里是不是也可以由多个呀，弄了两三天突然发现的哦。 </p> 
<p> 就这么简单！！！ </p>