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


Posted in Javascript onDecember 28, 2016

本文目的:

使用easyUi的特殊常用实例,表格层次显示,一层套一层,显示详细数据,嵌套3层应该可以满足所有人的需求了吧。如果你想嵌套4层,有了嵌套3层的案例,4层,5层不是问题吧!!!

本实例的特点:

1.当数据很多的时候,高度不能自动适应,会在表格右侧出现滚动条,想这样嵌套3层的后果,简直不忍直视,本实例高度自适应。

2.选中行后,不能清除选中效果,本实例是可以的。

3.当打开数据展示详情后,再关闭详情页后,不能高度自适应,本实例关闭表格依然自适应。

4.当数据太多,需要出现横向滚动,本实例已给出详细案例。

首先一张图片,展示效果,是否和自己的预期一致。

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

本实例的下载地址: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详解及实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 #Javascript
基于bootstrap风格的弹框插件
Dec 28 #Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 #Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 #Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 #Javascript
JS简单实现移动端日历功能示例
Dec 28 #Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 #Javascript
You might like
php基础知识:控制结构
2006/12/13 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
Python文件夹与文件的操作实现代码
2014/07/13 Python
python动态网页批量爬取
2016/02/14 Python
Python数据结构之翻转链表
2017/02/25 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
Python接口测试get请求过程详解
2020/02/28 Python
Python 如何创建一个线程池
2020/07/28 Python
python RSA加密的示例
2020/12/09 Python
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
自考生毕业自我鉴定
2013/10/10 职场文书
学习演讲稿范文
2014/05/10 职场文书
自我检讨书范文
2015/01/28 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
Python实现文字pdf转换图片pdf效果
2022/04/03 Python