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

前端之家收集整理的这篇文章主要介绍了EasyUI折叠表格层次显示detailview详解及实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文目的:

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

本实例的特点:

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

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

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

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

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

本实例的下载地址:

实例内容,包含了源代码,包含了所要使用js、css、图片文件

下面开始引入我们需要的css文件

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

查看我们的body标签中的代码

数量

我们自己编写的js代码

'; },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:'应收',{field:'name',title:'合同款',{field:'amount',title:'已收',{field:'note',title:'比例',width:100} ]],row2){//严重注意喔 return ''; },onExpandRow: function(index2,row2){//嵌套第二层,严重注意喔 var ddv2 = $(this).datagrid('getRowDetail',index2).find('#ddv2-'+index2);//严重注意喔 ddv2.datagrid({ view: detailview,singleSelect:false,rownumbers:true,// height:'auto',columns:[[ {field:'inv',title:'月份',width:100,align:'right'},align:'right'} ]],detailFormatter:function(index2,row3){//严重注意喔 return ''; },onExpandRow: function(index3,row3){//嵌套第三层,严重注意喔 var ddv3 = $(this).datagrid('getRowDetail',index3).find('#ddv3-'+index3);//严重注意喔 ddv3.datagrid({//严重注意喔 这里没有detailview了哈 url:'json/datagrid_data3.json',fitColumns:false,// singleSelect:false,// height:'auto',columns:[[ {field:'aaa',title:'项目名称',{field:'bbb',title:'合同编号',{field:'ccc',title:'合同名称',{field:'ddd',title:'款数',{field:'eee',title:'技术负责人',width:50,{field:'fff',title:'条件具备日期',{field:'ggg',title:'销售',{field:'hhh',title:'收款计划日期',{field:'iii',title:'计划收款比例',{field:'jjj',title:'实际收款比例',{field:'kkk',title:'差距',width:80,{field:'lll',title:'销售说明', {field:'mmm',title:'收款金额',{field:'nnn',title:'详情',align:'right'} ]],detailFormatter:function(index3,row){//严重注意喔 return '
';//严重注意喔 },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',index2); ddv.datagrid('fixRowHeight',index2); $('#dg').datagrid('fixDetailRowHeight',index); $('#dg').datagrid('fixRowHeight',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); ddv.datagrid('fixDetailRowHeight',index); } });//严重注意喔 ddv2.datagrid('fixDetailRowHeight',onResize:function(){//严重注意喔 ddv.datagrid('fixDetailRowHeight',index2); $('#dg').datagrid('fixDetailRowHeight',onLoadSuccess:function(){//严重注意喔 setTimeout(function(){ ddv.datagrid('fixDetailRowHeight',index2); ddv.datagrid('fixRowHeight',index); $('#dg').datagrid('fixRowHeight',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',index); } });//严重注意喔 ddv.datagrid('fixDetailRowHeight',onResize:function(){ $('#dg').datagrid('fixDetailRowHeight',onLoadSuccess:function(){ setTimeout(function(){ $('#dg').datagrid('fixDetailRowHeight',index); $('#dg').datagrid('fixRowHeight',0); } }); $('#dg').datagrid('fixDetailRowHeight',index); } }); });

以上所述是小编给大家介绍的EasyUI折叠表格层次显示detailview详解及实例。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章