本文目的：
使用easyUi的特殊常用實例，表格層次顯示，一層套一層，顯示詳細數據，嵌套3層應該可以滿足所有人的需求了吧。如果你想嵌套4層，有了嵌套3層的案例，4層，5層不是問題吧！！！
本實例的特點：
1.當數據很多的時候，高度不能自動適應，會在表格右側出現滾動條，想這樣嵌套3層的后果，簡直不忍直視，本實例高度自適應。
2.選中行后，不能清除選中效果，本實例是可以的。
3.當打開數據展示詳情后，再關閉詳情頁后，不能高度自適應，本實例關閉表格依然自適應。
4.當數據太多，需要出現橫向滾動，本實例已給出詳細案例。
首先一張圖片，展示效果，是否和自己的預期一致。
本實例的下載地址：http://download.csdn.net/detail/meng564764406/9723582
實例內容，包含了源代碼，包含了所要使用js、css、圖片文件。
下面開始引入我們需要的css文件
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/icon.css" /> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/gray/easyui.css" />
下面引入我們需要的js文件
<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.3.5/jquery-1.3.5.easyui.min.js"></script> <script type="text/javascript" src="js/jquery/datagrid-detailview.js" charset="utf-8"></script>
查看我們的body標簽中的代碼
<table id="dg" url="json/datagrid_data.json" title="收款管理" singleSelect="false" fitColumns="true"> <thead> <tr> <th field="inv" width="80">部門</th> <th field="date" width="100">日期</th> <th field="name" align="right" width="80">名字</th> <th field="amount" align="right" width="80">數量</th> <th field="note" width="220">小計</th> </tr> </thead> </table>
我們自己編寫的js代碼
<script type="text/javascript"> $(function(){ $('#dg').datagrid({ view: detailview, detailFormatter:function(index,row){//嚴重注意喔 return '<div"><table id="ddv-' + index + '" ></table></div>'; }, onExpandRow: function(index,row){//嵌套第一層，嚴重注意喔 var ddv = $(this).datagrid('getRowDetail',index).find('#ddv-'+index);//嚴重注意喔 ddv.datagrid({ view: detailview, url:'json/datagrid_data.json', autoRowHeight:true, fitColumns:true,//改變橫向滾動條 singleSelect:false,//去掉選中效果 rownumbers:true, loadMsg:'', // height:'auto', columns:[[ {field:'inv',title:'年份',width:100}, {field:'date',title:'應收',width:100}, {field:'name',title:'合同款',width:100}, {field:'amount',title:'已收',width:100}, {field:'note',title:'比例',width:100} ]], detailFormatter:function(index,row2){//嚴重注意喔 return '<div"><table id="ddv2-' + index + '" style=""></table></div>'; }, onExpandRow: function(index2,row2){//嵌套第二層，嚴重注意喔 var ddv2 = $(this).datagrid('getRowDetail',index2).find('#ddv2-'+index2);//嚴重注意喔 ddv2.datagrid({ view: detailview, url:'json/datagrid_data.json', autoRowHeight:true, fitColumns:true, singleSelect:false, rownumbers:true, loadMsg:'', // height:'auto', columns:[[ {field:'inv',title:'月份',width:100}, {field:'date',title:'應收',width:100,align:'right'}, {field:'name',title:'合同款',width:100,align:'right'}, {field:'amount',title:'已收',width:100,align:'right'}, {field:'note',title:'比例',width:100,align:'right'} ]], detailFormatter:function(index2,row3){//嚴重注意喔 return '<div"><table id="ddv3-' + index2 + '" style=""></table></div>'; }, onExpandRow: function(index3,row3){//嵌套第三層,嚴重注意喔 var ddv3 = $(this).datagrid('getRowDetail',index3).find('#ddv3-'+index3);//嚴重注意喔 ddv3.datagrid({//嚴重注意喔 這里沒有detailview了哈 url:'json/datagrid_data3.json', autoRowHeight:true, fitColumns:false,// singleSelect:false, rownumbers:true, loadMsg:'', // height:'auto', columns:[[ {field:'aaa',title:'項目名稱',width:100}, {field:'bbb',title:'合同編號',width:100,align:'right'}, {field:'ccc',title:'合同名稱',width:100,align:'right'}, {field:'ddd',title:'款數',width:100,align:'right'}, {field:'eee',title:'技術負責人',width:50,align:'right'}, {field:'fff',title:'條件具備日期',width:100,align:'right'}, {field:'ggg',title:'銷售',width:50,align:'right'}, {field:'hhh',title:'收款計劃日期',width:100,align:'right'}, {field:'iii',title:'計劃收款比例',width:100,align:'right'}, {field:'jjj',title:'實際收款比例',width:100,align:'right'}, {field:'kkk',title:'差距',width:80,align:'right'}, {field:'lll',title:'銷售說明',width:100,align:'right'}, <span style="white-space:pre"> </span> {field:'mmm',title:'收款金額',width:100,align:'right'}, {field:'nnn',title:'詳情',width:100,align:'right'} ]], detailFormatter:function(index3,row){//嚴重注意喔 return '<div style="padding:2px"><table id="ddv3-' + index3 + '"></table></div>';//嚴重注意喔 }, onResize:function(){//嚴重注意喔 ddv2.datagrid('fixDetailRowHeight',index3); ddv.datagrid('fixDetailRowHeight',index2); $('#dg').datagrid('fixDetailRowHeight',index); }, onLoadSuccess:function(){ setTimeout(function(){//嚴重注意喔 ddv2.datagrid('fixDetailRowHeight',index3); ddv2.datagrid('fixRowHeight',index3); ddv.datagrid('fixDetailRowHeight',index2); ddv.datagrid('fixRowHeight',index2); $('#dg').datagrid('fixDetailRowHeight',index); $('#dg').datagrid('fixRowHeight',index); },0); } });//嚴重注意喔 ddv2.datagrid('fixDetailRowHeight',index); ddv.datagrid('fixDetailRowHeight',index); $('#dg').datagrid('fixDetailRowHeight',index); }, onCollapseRow: function(index3,row3){//嚴重注意喔 var ddv3 = $(this).datagrid('getRowDetail',index3).find('#ddv3-'+index3); ddv3.datagrid({ onResize:function(){ ddv2.datagrid('fixDetailRowHeight',index3); <span style="white-space:pre"> </span> ddv.datagrid('fixDetailRowHeight',index2); $('#dg').datagrid('fixDetailRowHeight',index); } });//嚴重注意喔 ddv2.datagrid('fixDetailRowHeight',index); ddv.datagrid('fixDetailRowHeight',index); $('#dg').datagrid('fixDetailRowHeight',index); }, onResize:function(){//嚴重注意喔 ddv.datagrid('fixDetailRowHeight',index2); $('#dg').datagrid('fixDetailRowHeight',index); }, onLoadSuccess:function(){//嚴重注意喔 setTimeout(function(){ ddv.datagrid('fixDetailRowHeight',index2); ddv.datagrid('fixRowHeight',index2); $('#dg').datagrid('fixDetailRowHeight',index); $('#dg').datagrid('fixRowHeight',index); },0); } });//嚴重注意喔 ddv.datagrid('fixDetailRowHeight',index2); $('#dg').datagrid('fixDetailRowHeight',index); }, onCollapseRow: function(index2,row2){//嚴重注意喔 var ddv2 = $(this).datagrid('getRowDetail',index2).find('#ddv2-'+index2); ddv2.datagrid({ onResize:function(){ ddv.datagrid('fixDetailRowHeight',index2); $('#dg').datagrid('fixDetailRowHeight',index); } });//嚴重注意喔 ddv.datagrid('fixDetailRowHeight',index2); $('#dg').datagrid('fixDetailRowHeight',index); }, onResize:function(){ $('#dg').datagrid('fixDetailRowHeight',index); }, onLoadSuccess:function(){ setTimeout(function(){ $('#dg').datagrid('fixDetailRowHeight',index); $('#dg').datagrid('fixRowHeight',index); },0); } }); $('#dg').datagrid('fixDetailRowHeight',index); } }); }); </script> 以上所述是小編給大家介紹的EasyUI折疊表格層次顯示detailview詳解及實例，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
