Purpose of this article:
I am working on a project recently, using the special common examples of easyUi, the table level display, layer by layer, display detailed data, nesting 3 layers should be able to meet the needs of everyone. If you want to nest 4 levels, there is a case of nesting 3 levels, 4 levels, 5 levels is not a problem! ! !
Features of this example:
1. When there is a lot of data, the height cannot be automatically adapted, and a scroll bar will appear on the right side of the table. Thinking about the consequences of nesting 3 levels in this way, I can't bear to look directly at it. This example is highly adaptive.
2. After selecting a row, the selected effect cannot be cleared. This example is possible.
3. After opening the data display details, and then closing the details page, it cannot be highly adaptive. In this example, the table is still adaptive when it is closed.
4. When there is too much data, horizontal scrolling needs to occur. This example has given a detailed case.
First, a picture to show whether the effect is consistent with your expectations.
Then there are three levels of folding. The second level is actually a grouping: Since the above data is actually developed in a real environment, the processing is done as follows:
<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:'',
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>It should be noted here that: each layer of column scroll processing, fixDetailRowHeight settings, need to be set for each layer