快捷導(dǎo)航

EasyUI折疊表格層次顯示detailview詳解及實(shí)例

更新時(shí)間：2016年12月28日 16:45:13 作者：Lynn_Meng

這篇文章主要介紹了EasyUI折疊表格層次顯示detailview詳解及實(shí)例,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧

本文目的：

使用easyUi的特殊常用實(shí)例，表格層次顯示，一層套一層，顯示詳細(xì)數(shù)據(jù)，嵌套3層應(yīng)該可以滿(mǎn)足所有人的需求了吧。如果你想嵌套4層，有了嵌套3層的案例，4層，5層不是問(wèn)題吧?。?！

本實(shí)例的特點(diǎn)：

1.當(dāng)數(shù)據(jù)很多的時(shí)候，高度不能自動(dòng)適應(yīng)，會(huì)在表格右側(cè)出現(xiàn)滾動(dòng)條，想這樣嵌套3層的后果，簡(jiǎn)直不忍直視，本實(shí)例高度自適應(yīng)。

2.選中行后，不能清除選中效果，本實(shí)例是可以的。

3.當(dāng)打開(kāi)數(shù)據(jù)展示詳情后，再關(guān)閉詳情頁(yè)后，不能高度自適應(yīng)，本實(shí)例關(guān)閉表格依然自適應(yīng)。

4.當(dāng)數(shù)據(jù)太多，需要出現(xiàn)橫向滾動(dòng)，本實(shí)例已給出詳細(xì)案例。

首先一張圖片，展示效果，是否和自己的預(yù)期一致。

本實(shí)例的下載地址：http://download.csdn.net/detail/meng564764406/9723582

實(shí)例內(nèi)容，包含了源代碼，包含了所要使用js、css、圖片文件。

下面開(kāi)始引入我們需要的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標(biāo)簽中的代碼

<table id="dg" 
 url="json/datagrid_data.json" 
 title="收款管理" 
 singleSelect="false" fitColumns="true"> 
 <thead> 
 <tr> 
  <th field="inv" width="80">部門(mén)</th> 
  <th field="date" width="100">日期</th> 
  <th field="name" align="right" width="80">名字</th> 
  <th field="amount" align="right" width="80">數(shù)量</th> 
  <th field="note" width="220">小計(jì)</th> 
 </tr> 
 </thead> 
</table>

我們自己編寫(xiě)的js代碼

<script type="text/javascript"> 
 $(function(){ 
 $('#dg').datagrid({ 
  view: detailview, 
  detailFormatter:function(index,row){//嚴(yán)重注意喔 
  return '<div"><table id="ddv-' + index + '" ></table></div>'; 
  }, 
  onExpandRow: function(index,row){//嵌套第一層，嚴(yán)重注意喔 
  var ddv = $(this).datagrid('getRowDetail',index).find('#ddv-'+index);//嚴(yán)重注意喔 
  ddv.datagrid({ 
   view: detailview, 
   url:'json/datagrid_data.json', 
   autoRowHeight:true, 
   fitColumns:true,//改變橫向滾動(dòng)條 
   singleSelect:false,//去掉選中效果 
   rownumbers:true, 
   loadMsg:'', 
//   height:'auto', 
   columns:[[ 
   {field:'inv',title:'年份',width:100}, 
   {field:'date',title:'應(yīng)收',width:100}, 
   {field:'name',title:'合同款',width:100}, 
   {field:'amount',title:'已收',width:100}, 
   {field:'note',title:'比例',width:100} 
   ]], 
   detailFormatter:function(index,row2){//嚴(yán)重注意喔 
   return '<div"><table id="ddv2-' + index + '" style=""></table></div>'; 
   }, 
   onExpandRow: function(index2,row2){//嵌套第二層，嚴(yán)重注意喔 
   var ddv2 = $(this).datagrid('getRowDetail',index2).find('#ddv2-'+index2);//嚴(yán)重注意喔 
   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:'應(yīng)收',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){//嚴(yán)重注意喔 
    return '<div"><table id="ddv3-' + index2 + '" style=""></table></div>'; 
    }, 
    onExpandRow: function(index3,row3){//嵌套第三層,嚴(yán)重注意喔 
    var ddv3 = $(this).datagrid('getRowDetail',index3).find('#ddv3-'+index3);//嚴(yán)重注意喔 
    ddv3.datagrid({//嚴(yán)重注意喔 這里沒(méi)有detailview了哈 
     url:'json/datagrid_data3.json', 
     autoRowHeight:true, 
     fitColumns:false,// 
     singleSelect:false, 
     rownumbers:true, 
     loadMsg:'', 
//     height:'auto', 
     columns:[[ 
     {field:'aaa',title:'項(xiàng)目名稱(chēng)',width:100}, 
     {field:'bbb',title:'合同編號(hào)',width:100,align:'right'}, 
     {field:'ccc',title:'合同名稱(chēng)',width:100,align:'right'}, 
     {field:'ddd',title:'款數(shù)',width:100,align:'right'}, 
     {field:'eee',title:'技術(shù)負(fù)責(zé)人',width:50,align:'right'}, 
     {field:'fff',title:'條件具備日期',width:100,align:'right'}, 
     {field:'ggg',title:'銷(xiāo)售',width:50,align:'right'}, 
     {field:'hhh',title:'收款計(jì)劃日期',width:100,align:'right'}, 
     {field:'iii',title:'計(jì)劃收款比例',width:100,align:'right'}, 
     {field:'jjj',title:'實(shí)際收款比例',width:100,align:'right'}, 
     {field:'kkk',title:'差距',width:80,align:'right'}, 
     {field:'lll',title:'銷(xiāo)售說(shuō)明',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){//嚴(yán)重注意喔 
     return '<div style="padding:2px"><table id="ddv3-' + index3 + '"></table></div>';//嚴(yán)重注意喔 
     }, 
     onResize:function(){//嚴(yán)重注意喔 
     ddv2.datagrid('fixDetailRowHeight',index3); 
      ddv.datagrid('fixDetailRowHeight',index2); 
     $('#dg').datagrid('fixDetailRowHeight',index); 
     }, 
     onLoadSuccess:function(){ 
     setTimeout(function(){//嚴(yán)重注意喔 
      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); 
     } 
    });//嚴(yán)重注意喔 
    ddv2.datagrid('fixDetailRowHeight',index); 
    ddv.datagrid('fixDetailRowHeight',index); 
    $('#dg').datagrid('fixDetailRowHeight',index); 
    }, 
    onCollapseRow: function(index3,row3){//嚴(yán)重注意喔 
    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); 
     } 
    });//嚴(yán)重注意喔 
    ddv2.datagrid('fixDetailRowHeight',index); 
    ddv.datagrid('fixDetailRowHeight',index); 
    $('#dg').datagrid('fixDetailRowHeight',index); 
    }, 
    onResize:function(){//嚴(yán)重注意喔 
    ddv.datagrid('fixDetailRowHeight',index2); 
    $('#dg').datagrid('fixDetailRowHeight',index); 
    }, 
    onLoadSuccess:function(){//嚴(yán)重注意喔 
    setTimeout(function(){ 
     ddv.datagrid('fixDetailRowHeight',index2); 
     ddv.datagrid('fixRowHeight',index2); 
     $('#dg').datagrid('fixDetailRowHeight',index); 
     $('#dg').datagrid('fixRowHeight',index); 
    },0); 
    } 
   });//嚴(yán)重注意喔 
   ddv.datagrid('fixDetailRowHeight',index2); 
   $('#dg').datagrid('fixDetailRowHeight',index); 
   }, 
   onCollapseRow: function(index2,row2){//嚴(yán)重注意喔 
   var ddv2 = $(this).datagrid('getRowDetail',index2).find('#ddv2-'+index2); 
   ddv2.datagrid({ 
    onResize:function(){ 
    ddv.datagrid('fixDetailRowHeight',index2); 
    $('#dg').datagrid('fixDetailRowHeight',index); 
    } 
   });//嚴(yán)重注意喔 
   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詳解及實(shí)例，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: