用easyui设计datagrid嵌套，需要注意的地方
第二个datagrid的数据源：testData[index].arr
好了，上代码，相信大家都会看的明白的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css"/>
<script src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<!-- 这个是在线js文件-->
<!--<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"></script>-->
<script type="text/javascript" src="js/detailview.js"></script>
<script type="text/javascript">
var testData=[
{'itemid':11,'productid':'sss','arr':[{subname:'sds1d',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]},
{'itemid':15,'productid':'sdds','arr':[{subname:'sds2d',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]},
{'itemid':14,'productid':'sffss','arr':[{subname:'sds3d',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]},
{'itemid':13,'productid':'ssggs','arr':[{subname:'sd4sd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]},
{'itemid':12,'productid':'sshhs','arr':[{subname:'sd5sd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]}
];
$(function(){
$("#dg").datagrid({
title:'sdfsfs',
/* checkbox:true,*/
data:testData ,
view:detailview,
detailFormatter:function(index,row){
return '<div style="padding: 2px;"><table class="ddv"></table></div>; '
},
onExpandRow:function(index,row){
var ddv=$(this).datagrid('getRowDetail',index).find('table.ddv');
ddv.datagrid({
data:testData[index].arr,
fitColumns:true,
checkbox:true,
singleSelect:true,
loadMsg:'',
height:'auto',
columns:[[
{field:'opt',checkbox:true,15},
{field:'subname','title':'Order ID',100},
{field:'subsex','title':'Quantity',100}
]],
onResize:function(){
$("#dg").datagrid('fixDetailRowHeight',index);
},
onLoadSuccess:function(){
setTimeout(function(){
$("#dg").datagrid('fixDetailRowHeight',index);
},0);
}
});
$("#dg").datagrid('fixDetailRowHeight',index);
}
});
});
</script>
</head>
<body>
<table id="dg" style=" 700px;height: 450px; border: 1px solid red;">
<thead>
<tr>
<th field="opt" checkbox="true" width="15px"></th>
<th field="itemid" width="300">Item ID</th>
<th field="productid" width="380">Product ID</th>
<!-- <th field="listprice" width="80">List Price</th>
<th field="unitcost" width="80">Unit Cost</th>
<th field="attr1" width="80">Attribute</th>
<th field="status" width="80">Status</th>-->
</tr>
</thead>
</table>
</body>
</html>