成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

導航首頁 ? 技術教程 ? EasyUI折疊表格層次顯示detailview詳解及實例
全站頭部文字 我要出現在這里
EasyUI折疊表格層次顯示detailview詳解及實例 749 2024-02-07   

本文目的：

使用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"  /> 
<link rel="stylesheet" type="text/css"  />

下面引入我們需要的js文件

<script type="text/javascript" src="http://www.gimoo.net/t/1810/js/jquery/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="http://www.gimoo.net/t/1810/jquery-easyui-1.3.5/jquery-1.3.5.easyui.min.js"></script> 
<script type="text/javascript" src="http://www.gimoo.net/t/1810/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詳解及實例，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對綠夏網網站的支持！


UI
主站蜘蛛池模板： 高粱红了 电视剧| 1998年槟榔西施| 小镇姑娘高清播放| 够级比赛活动方案| jagger| 头像图片2024最新款女| 命运的逆转| 大秦帝国第一部免费看| 亚洲理伦| 屁屁视频| 李彦萱| 凤凰卫视资讯台直播| 《父亲的爱》阅读理解答案| 刑讯女烈| 小霸王解说呐| 飞龙猛将演员表| 我不再什么作文500字| 姜洋| 娄际成| 不要抛弃我| dj视频mv| 卓别林走路视频| 都市频道节目表今天| 基础综合英语邱东林电子版答案| 黄视频免费在线播放| 蝴蝶视频在线观看| 广场舞100首视频| 美国禁事| 王韧| 我的爷爷 电影| 糟老头视频| 一夜风流| 阿尔法变频器说明书| 《致青春》电影| 假男假女| 刘一秒攻心销售| 韩国三级大全中文字幕999| 尹雪喜最好看的三部电影| ab变频器中文说明书| 二次元头像少女| 林峰电影|

?。?！站長長期在線接！！！

網站、小程序：定制開發/二次開發/仿制開發等

各種疑難雜癥解決/定制接口/定制采集等

站長微信：lxwl520520

站長QQ：1737366103