EasyUI折叠表格层次显示detailview详解及实例

本文目的：

使用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详解及实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# easyui  # detailview  # easyui折叠  # easyUI使用分页过滤器对数据进行分页操作实例分析  # jQuery EasyUI API 中文文档 - Pagination分页  # jQuery EasyUI datagrid实现本地分页的方法  # jQuery EasyUI Pagination实现分页的常用方法  # EasyUi datagrid 实现表格分页  # EasyUI Pagination 分页的两种做法小结  # SSh结合Easyui实现Datagrid的分页显示  # EasyUi+Spring Data 实现按条件分页查询的实例代码  # EasyUI加载完Html内容样式渲染完成后显示  # jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容  # easyUI 实现的后台分页与前台显示功能示例  # 自适应  # 小计  # 小编  # 自己的  # 滚动条  # 太多  # 包含了  # 在此  # 下载地址  # 会在  # 你想  # 给大家  # 所要  # 所述  # 给我留言  # 源代码  # 感谢大家  # 第二层  # 第一层  # 第三层 

相关文章： 如何用免费手机建站系统零基础打造专业网站？  交易网站制作流程,我想开通一个网站，注册一个交易网址，需要那些手续？  ,购物网站怎么盈利呢？  如何打造高效商业网站？建站目的决定转化率  网站好制作吗知乎,网站开发好学吗？有什么技巧？  如何选择适合PHP云建站的开源框架？  如何用搬瓦工VPS快速搭建个人网站？  建站主机默认首页配置指南：核心功能与访问路径优化  c++如何打印函数堆栈信息_c++ backtrace函数与符号名解析【方法】  股票网站制作软件,网上股票怎么开户？  如何高效完成独享虚拟主机建站？  建站之星北京办公室：智能建站系统与小程序生成方案解析  网站制作价目表怎么做,珍爱网婚介费用多少？  建站之星安装后如何自定义网站颜色与字体？  广东企业建站网站优化与SEO营销核心策略指南  网站专业制作公司有哪些,做一个公司网站要多少钱？  如何选择可靠的免备案建站服务器？  建站之星展会模版如何一键下载生成？  教学网站制作软件,学习*后期制作的网站有哪些？  网站图片在线制作软件,怎么在图片上做链接？  ,在苏州找工作，上哪个网站比较好？  TestNG的testng.xml配置文件怎么写  已有域名和空间如何搭建网站？  Android使用GridView实现日历的简单功能  高防服务器租用首荐平台，企业级优惠套餐快速部署  实例解析Array和String方法  制作网站的网址是什么,请问后缀为.com和.com.cn还有.cn的这三种网站是分别是什么类型的网站？  广州建站公司哪家好？十大优质服务商推荐  制作网站的基本流程,设计网站的软件是什么？  贸易公司网站制作流程,出口贸易网站设计怎么做？  制作网站的公司有哪些,做一个公司网站要多少钱？  建站之星如何开启自定义404页面避免用户流失？  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  广州营销型建站服务商推荐：技术优势与SEO优化解析  安云自助建站系统如何快速提升SEO排名？  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  建站之星导航配置指南：自助建站与SEO优化全解析  如何快速生成专业多端适配建站电话？  建站主机是否属于云主机类型？  如何快速选择适合个人网站的云服务器配置？  如何在宝塔面板中修改默认建站目录？  零服务器AI建站解决方案：快速部署与云端平台低成本实践  如何快速搭建高效香港服务器网站？  装修招标网站设计制作流程,装修招标流程？  为什么Go需要go mod文件_Go go mod文件作用说明  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  海南网站制作公司有哪些,海口网是哪家的？  网站制作公司哪里好做,成都网站制作公司哪家做得比较好，更正规？  建站与域名管理如何高效结合？