本文目的：
最近在做项目，使用easyUi的特殊常用实例，表格层次显示，一层套一层，显示详细数据，嵌套3层应该可以满足所有人的需求了吧。如果你想嵌套4层，有了嵌套3层的案例，4层，5层不是问题吧！！！
本实例的特点：
1.当数据很多的时候，高度不能自动适应，会在表格右侧出现滚动条，想这样嵌套3层的后果，简直不忍直视，本实例高度自适应。
2.选中行后，不能清除选中效果，本实例是可以的。
3.当打开数据展示详情后，再关闭详情页后，不能高度自适应，本实例关闭表格依然自适应。
4.当数据太多，需要出现横向滚动，本实例已给出详细案例。
首先一张图片，展示效果，是否和自己的预期一致。
那么一共有三级折叠，其中第二级实际上是一个分组：由于以上数据实在真实环境下开发的，所以做了处理，如下：
<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>这里面需要注意的是：每一层的列滚动处理，fixDetailRowHeight的设置，需要对每一层的进行设置