本文为博主原创,转载请注明:
在easyUI中使用datagrid-detailview.js可快速实现二级折叠列表,示例如下:
注意事项:
原本在谷歌浏览器进行示例测试的,url请求对应的json文件,效果一直显示不出来,换到谷歌和IE是可以正常显示的,
解决方法可参考:
其中的请求url对应的json文件封装的数据格式如下:
相关属性可参考该博客:
附官网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样式在浏览器没显示,效果如下图所示):