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
请求的json文件内容为：
{"total":28,"rows":[
{"inv":"FI-SW-01","date":10.00,"name":"P","amount":16.50,"note":"Large","itemid":"EST-1"},
{"inv":"K9-DL-01","date":12.00,"name":"P","amount":18.50,"note":"Spotted Adult Female","itemid":"EST-2"},
{"inv":"RP-SN-01","date":12.00,"name":"P","amount":18.50,"note":"Venomless","itemid":"EST-3"},
{"inv":"RP-LI-02","date":12.00,"name":"P","amount":18.50,"note":"Green Adult","itemid":"EST-5"},
{"inv":"FL-DSH-01","date":12.00,"name":"P","amount":58.50,"note":"Tailless","itemid":"EST-6"},
{"inv":"FL-DSH-01","date":12.00,"name":"P","amount":23.50,"note":"With tail","itemid":"EST-7"},
{"inv":"FL-DLH-02","date":12.00,"name":"P","amount":93.50,"note":"Adult Female","itemid":"EST-8"},
{"inv":"FL-DLH-02","date":12.00,"name":"P","amount":93.50,"note":"Adult Male","itemid":"EST-9"},
{"inv":"RP-SN-01","date":12.00,"name":"P","amount":18.50,"note":"Rattleless","itemid":"EST-4"},
{"inv":"AV-CB-01","date":92.00,"name":"P","amount":193.50,"note":"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 <table id="dg" 21 url="csdn1.json" 22 title="收款管理" 23 singleSelect="false" fitColumns="true"> 24 <thead> 25 <tr> 26 <th field="inv" width="80">部门</th> 27 <th field="date" width="100">日期</th> 28 <th field="name" align="right" width="80">名字</th> 29 <th field="amount" align="right" width="80">数量</th> 30 <th field="note" width="220">小计</th> 31 </tr> 32 </thead> 33 </table> 34 35 <script type="text/javascript"> 36 $(function(){ 37 $('#dg').datagrid({ 38 view: detailview, 39 detailFormatter:function(index,row){//严重注意喔 40 return '<div"><table id="ddv-' + index + '" ></table></div>'; 41 }, 42 onExpandRow: function(index,row){//嵌套第一层，严重注意喔 43 var ddv = $(this).datagrid('getRowDetail',index).find('#ddv-'+index);//严重注意喔 44 ddv.datagrid({ 45 view: detailview, 46 url:'csdn1.json', 47 autoRowHeight:true, 48 fitColumns:true,//改变横向滚动条 49 singleSelect:false,//去掉选中效果 50 rownumbers:true, 51 loadMsg:'', 52 // height:'auto', 53 columns:[[ 54 {field:'inv',title:'年份',width:100}, 55 {field:'date',title:'应收',width:100}, 56 {field:'name',title:'合同款',width:100}, 57 {field:'amount',title:'已收',width:100}, 58 {field:'note',title:'比例',width:100} 59 ]], 60 detailFormatter:function(index,row2){//严重注意喔 61 return '<div"><table id="ddv2-' + index + '" style=""></table></div>'; 62 }, 63 onExpandRow: function(index2,row2){//嵌套第二层，严重注意喔 64 var ddv2 = $(this).datagrid('getRowDetail',index2).find('#ddv2-'+index2);//严重注意喔 65 ddv2.datagrid({ 66 view: detailview, 67 url:'csdn1.json', 68 autoRowHeight:true, 69 fitColumns:true, 70 singleSelect:false, 71 rownumbers:true, 72 loadMsg:'', 73 // height:'auto', 74 columns:[[ 75 {field:'inv',title:'月份',width:100}, 76 {field:'date',title:'应收',width:100,align:'right'}, 77 {field:'name',title:'合同款',width:100,align:'right'}, 78 {field:'amount',title:'已收',width:100,align:'right'}, 79 {field:'note',title:'比例',width:100,align:'right'} 80 ]], 81 detailFormatter:function(index2,row3){//严重注意喔 82 return '<div"><table id="ddv3-' + index2 + '" style=""></table></div>'; 83 }, 84 onExpandRow: function(index3,row3){//嵌套第三层,严重注意喔 85 var ddv3 = $(this).datagrid('getRowDetail',index3).find('#ddv3-'+index3);//严重注意喔 86 ddv3.datagrid({//严重注意喔 这里没有detailview了哈 87 url:'csdn1.json', 88 autoRowHeight:true, 89 fitColumns:false,// 90 singleSelect:false, 91 rownumbers:true, 92 loadMsg:'', 93 // height:'auto', 94 columns:[[ 95 {field:'inv',title:'月份',width:230}, 96 {field:'date',title:'应收',width:230,align:'right'}, 97 {field:'name',title:'合同款',width:240,align:'right'}, 98 {field:'amount',title:'已收',width:240,align:'right'}, 99 {field:'note',title:'比例',width:240,align:'right'} 100 ]], 101 detailFormatter:function(index3,row){//严重注意喔 102 return '<div style="padding:2px"><table id="ddv3-' + index3 + '"></table></div>';//严重注意喔 103 }, 104 onResize:function(){//严重注意喔 105 ddv2.datagrid('fixDetailRowHeight',index3); 106 ddv.datagrid('fixDetailRowHeight',index2); 107 $('#dg').datagrid('fixDetailRowHeight',index); 108 }, 109 onLoadSuccess:function(){ 110 setTimeout(function(){//严重注意喔 111 ddv2.datagrid('fixDetailRowHeight',index3); 112 ddv2.datagrid('fixRowHeight',index3); 113 ddv.datagrid('fixDetailRowHeight',index2); 114 ddv.datagrid('fixRowHeight',index2); 115 $('#dg').datagrid('fixDetailRowHeight',index); 116 $('#dg').datagrid('fixRowHeight',index); 117 },0); 118 } 119 });//严重注意喔 120 ddv2.datagrid('fixDetailRowHeight',index); 121 ddv.datagrid('fixDetailRowHeight',index); 122 $('#dg').datagrid('fixDetailRowHeight',index); 123 }, 124 onCollapseRow: function(index3,row3){//严重注意喔 125 var ddv3 = $(this).datagrid('getRowDetail',index3).find('#ddv3-'+index3); 126 ddv3.datagrid({ 127 onResize:function(){ 128 ddv2.datagrid('fixDetailRowHeight',index3); 129 ddv.datagrid('fixDetailRowHeight',index2); 130 $('#dg').datagrid('fixDetailRowHeight',index); 131 } 132 });//严重注意喔 133 ddv2.datagrid('fixDetailRowHeight',index); 134 ddv.datagrid('fixDetailRowHeight',index); 135 $('#dg').datagrid('fixDetailRowHeight',index); 136 }, 137 onResize:function(){//严重注意喔 138 ddv.datagrid('fixDetailRowHeight',index2); 139 $('#dg').datagrid('fixDetailRowHeight',index); 140 }, 141 onLoadSuccess:function(){//严重注意喔 142 setTimeout(function(){ 143 ddv.datagrid('fixDetailRowHeight',index2); 144 ddv.datagrid('fixRowHeight',index2); 145 $('#dg').datagrid('fixDetailRowHeight',index); 146 $('#dg').datagrid('fixRowHeight',index); 147 },0); 148 } 149 });//严重注意喔 150 ddv.datagrid('fixDetailRowHeight',index2); 151 $('#dg').datagrid('fixDetailRowHeight',index); 152 }, 153 onCollapseRow: function(index2,row2){//严重注意喔 154 var ddv2 = $(this).datagrid('getRowDetail',index2).find('#ddv2-'+index2); 155 ddv2.datagrid({ 156 onResize:function(){ 157 ddv.datagrid('fixDetailRowHeight',index2); 158 $('#dg').datagrid('fixDetailRowHeight',index); 159 } 160 });//严重注意喔 161 ddv.datagrid('fixDetailRowHeight',index2); 162 $('#dg').datagrid('fixDetailRowHeight',index); 163 }, 164 onResize:function(){ 165 $('#dg').datagrid('fixDetailRowHeight',index); 166 }, 167 onLoadSuccess:function(){ 168 setTimeout(function(){ 169 $('#dg').datagrid('fixDetailRowHeight',index); 170 $('#dg').datagrid('fixRowHeight',index); 171 },0); 172 } 173 }); 174 $('#dg').datagrid('fixDetailRowHeight',index); 175 } 176 }); 177 }); 178 </script> 179 180 181 </body> 182 </html>
效果图如下：
