爱威尔-easyui datagrid 的子表格datagrid-detailview

<p> <img src="20/20150115171223_712.png" alt=""> </p> 
<p> <br> </p> 
<p> </p>
<pre class="prettyprint lang-html"><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 : 'finterId',
		pagePosition : 'both',
		//checkOnSelect:true,
		//selectOnCheck:true,
		singleSelect:true,
		view: detailview,
		columns : [ [ {
			field : 'finterId',
			title : '编号',
			width : 100,
			hidden : true
		}, {
			field : 'dateStr',
			title : '计划到料日期',
			width : 50
		}, {
			field : 'fnumber',
			title : '物料编号',
			width : 70
		}, {
			field : 'username',
			title : '用户',
			width : 40
		}, {
			field : 'fbillNo',
			title : '单据编号',
			width : 50
		},{
			field : 'fdate',
			title : '单据日期',
			width : 50
		}, {
			field : 'fname',
			title : '物料名称',
			width : 50
		}, {
			field : 'fqty',
			title : '采购数量',
			width : 50
		}, {
			field : 'fmodel',
			title : '物料规格',
			width : 100
		}, {
			field : 'supplierName',
			title : '供应商名称',
			width : 100
		}] ],
		detailFormatter:function(index,row){
            return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';
        },
        onExpandRow:function(index,row){
            $('#ddv-'+index).datagrid({  
                url:'${pageContext.request.contextPath}/poOrder/getStockBill?fnumber='+row.fnumber+'&dateStr='+row.dateStr,  
                fitColumns:true,  
                singleSelect:true,  
                height:'auto',  
                columns:[[  
                    {field:'id.fitemId',title:'ID',hidden:true},  
                    {field:'id.fnumber',title:'物料编号',width:50,
            			formatter: function(value,row,index){
            				return row.id.fnumber;
            			}},
                    {field:'id.fname',title:'名称',width:50,
                			formatter: function(value,row,index){
                				return row.id.fname;
                			}},  
                    {field:'id.fmodel',title:'规格',width:100,
                    			formatter: function(value,row,index){
                    				return row.id.fmodel;
                    			}},  
                    {field:'id.fdate',title:'来料日期',width:50,
            			formatter: function(value,row,index){
            				return getSmpFormatDateByLong(row.id.fdate,false);
            			}},
                    {field:'id.fqty',title:'数量',width:50,
                			formatter: function(value,row,index){
                				return row.id.fqty;
                			}}
                ]],  
                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>
<div class="easyui-layout" data-options="fit:true,border:false">
	<div data-options="region:'center',border:false,title:'用户列表'" style="overflow: hidden;">
		<table id="poConn_datagrid"></table>
	</div>
</div></pre> 注意几点：1.datagrid-detailview.js  在这里下载：http://www.jeasyui.com/extension/datagridview.php 
<p></p> 
<p> 2.view: detailview, </p> 
<p> 3.detailFormatter： </p> 
<p> 4.onExpandRow： </p> 
<p> 解释： </p> 
<p> </p>
<pre class="prettyprint lang-js">columns:[[  
                    {field:'id.fitemId',title:'ID',hidden:true},  
                    {field:'id.fnumber',title:'物料编号',width:50,
            			formatter: function(value,row,index){
            				return row.id.fnumber;
            			}},
                    {field:'id.fname',title:'名称',width:50,
                			formatter: function(value,row,index){
                				return row.id.fname;
                			}},  
                    {field:'id.fmodel',title:'规格',width:100,
                    			formatter: function(value,row,index){
                    				return row.id.fmodel;
                    			}},  
                    {field:'id.fdate',title:'来料日期',width:50,
            			formatter: function(value,row,index){
            				return getSmpFormatDateByLong(row.id.fdate,false);
            			}},
                    {field:'id.fqty',title:'数量',width:50,
                			formatter: function(value,row,index){
                				return row.id.fqty;
                			}}
                ]]</pre> 这部分 我用的是复合主键：http://www.loveweir.com/html/16.html   可以看我这篇。 
<p></p> 
<p> 后台那数据我就不说。 </p>