easyUI使用datagrid-detailview.js实现二级列表嵌套
本文为博主原创，转载请注明：
在easyUI中使用datagrid-detailview.js可快速实现二级折叠列表，示例如下：
注意事项：
原本在谷歌浏览器进行示例测试的，url请求对应的json文件，效果一直显示不出来，换到谷歌和IE是可以正常显示的，
解决方法可参考：http://www.cnblogs.com/shunzdd/p/5585990.html
其中的请求url对应的json文件封装的数据格式如下：
相关属性可参考该博客：https://www.cnblogs.com/cnjava/archive/2013/01/21/2869876.html
附官网demo连接：http://www.jeasyui.net/extension/189.html
{"total":28,"rows":[
{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-2"},
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-3"},
{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-5"},
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-6"},
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-7"},
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-8"},
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-9"},
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-4"},
{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-10"}
]}
1 <html> 2 <head> 3 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>jQuery EasyUI</title> 6 <link rel="stylesheet" type="text/css" href="easyui.css"> 7 <link rel="stylesheet" type="text/css" href="icon.css"> 8 <script type="text/javascript" src="jquery.min.js"></script> 9 <script type="text/javascript" src="jquery.easyui.min.js"></script> 10 <script type="text/javascript" src="datagrid-detailview.js"></script> 11 </head> 12 <body> 13 <h2>Expand row in DataGrid to show subgrid</h2> 14 <div class="demo-info" style="margin-bottom:10px"> 15 <div class="demo-tip icon-tip"> </div> 16 <div>Click the expand button to expand row and view subgrid.</div> 17 </div> 18 19 <div id="dg" style="width:650px;height:250px"></div> 20 <script type="text/javascript"> 21 $(function(){ 22 $('#dg').datagrid({ 23 view: detailview, 24 url:'json2.json', 25 singleSelect:"true" , 26 fitColumns:"true", 27 striped:true, 28 checkOnSelect:'true', 29 columns:[[ 30 {field:'itemid',title:'Order ID',width:200}, 31 {field:'productid',title:'Quantity',width:100,align:'right'}, 32 {field:'unitcost',title:'Unit Price',width:100,align:'right'} 33 ]], 34 detailFormatter:function(index,row){ 35 return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>'; 36 }, 37 onExpandRow: function(index,row){ 38 $('#ddv-'+index).datagrid({ 39 //url:'./javascript/jquery-easyui-1.5.1/datagrid-detaildata.json?itemid='+row.itemid', 40 url:'json2detail.json', 41 fitColumns:true, 42 singleSelect:true, 43 rownumbers:true, 44 loadMsg:'', 45 height:'auto', 46 columns:[[ 47 {field:'orderid',title:'Order ID',width:200}, 48 {field:'quantity',title:'Quantity',width:100,align:'right'}, 49 {field:'unitprice',title:'Unit Price',width:100,align:'right'}, 50 {field:'op',title:'操作',width:100,align:'right',formatter:formatOper} 51 ]], 52 detailFormatter:function(index2,row2){ 53 console.log("----------------"); 54 console.log(index2+"==========="+row2); 55 return '<div style="padding:2px"><table id="ddv2-' + index2 + '"></table></div>'; 56 }, 57 onExpandRow: function(index2,row2){ 58 console.log("+++++++++++++++++++++"); 59 console.log(index2+"==========="+row2); 60 var ddv2 = $(this).datagrid('getRowDetail',index2).find('#ddv2-'+index2);//严重注意喔 61 ddv2.datagrid({//?itemid='+row.itemid 62 //url:'./javascript/jquery-easyui-1.5.1/datagrid-detaildata.json?itemid='+row.itemid', 63 url:'json2detail.json', 64 fitColumns:true, 65 singleSelect:true, 66 rownumbers:false, 67 loadMsg:'', 68 height:'300px', 69 columns:[[ 70 {field:'orderid',title:'Order ID',width:200}, 71 {field:'quantity',title:'Quantity',width:100,align:'right'}, 72 {field:'unitprice',title:'Unit Price',width:100,align:'right'}, 73 {field:'op',title:'操作',width:100,align:'right',formatter:formatOper} 74 ]], 75 76 onResize:function(){ 77 $('#dg').datagrid('fixDetailRowHeight',index2); 78 }, 79 onLoadSuccess:function(){ 80 $('#dg').datagrid("selectRow", index2) 81 setTimeout(function(){ 82 $('#dg').datagrid('fixDetailRowHeight',index2); 83 },0); 84 } 85 }); 86 $('#dg').datagrid('fixDetailRowHeight',index2); 87 ddv2.datagrid('fixDetailRowHeight',index2); 88 $('#dg').datagrid('fixDetailRowHeight',index); 89 }, 90 91 onResize:function(){ 92 $('#dg').datagrid('fixDetailRowHeight',index); 93 }, 94 onLoadSuccess:function(){ 95 $('#dg').datagrid("selectRow", index) 96 setTimeout(function(){ 97 $('#dg').datagrid('fixDetailRowHeight',index); 98 },0); 99 } 100 }); 101 $('#dg').datagrid('fixDetailRowHeight',index); 102 } 103 }); 104 }); 105 function formatOper(val,row,index){ 106 return '<a href="#" onclick="editUser('+index+')">修改</a>'; 107 } 108 function editUser(index){ 109 alert("ddd"); 110 } 111 </script> 112 113 </body> 114 </html>
实现的效果如下（由于引用的css样式在浏览器没显示，效果如下图所示）：
