Objeto de este artículo:
Estoy trabajando en un proyecto recientemente, usando los ejemplos comunes especiales de easyUi, la visualización de nivel de tabla, capa por capa, visualización de datos detallados, anidando 3 capas debería poder satisfacer las necesidades de todos. Si desea anidar 4 niveles, hay un caso de anidar 3 niveles, 4 niveles, 5 niveles ¡no es un problema! ! !
Características de este ejemplo:
1. Cuando hay muchos datos, la altura no se puede adaptar automáticamente y aparecerá una barra de desplazamiento en el lado derecho de la tabla. Pensando en las consecuencias de anidar 3 niveles de esta manera, no puedo soportar mirar directamente en él. Este ejemplo es muy adaptable.
2. Después de seleccionar una fila, el efecto seleccionado no se puede borrar. Este ejemplo es posible.
3. Después de abrir los detalles de la pantalla de datos y luego cerrar la página de detalles, no puede ser altamente adaptable En este ejemplo, la tabla todavía es adaptable cuando está cerrada.
4. Cuando hay demasiados datos, es necesario que se produzca un desplazamiento horizontal. Este ejemplo proporciona un caso detallado.
Primero, una imagen para mostrar si el efecto es consistente con sus expectativas.
Luego hay tres niveles de plegado. El segundo nivel es en realidad una agrupación: dado que los datos anteriores se desarrollan realmente en un entorno real, el procesamiento se realiza de la siguiente manera:
<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>Debe tenerse en cuenta aquí que: cada capa de procesamiento de desplazamiento de columna, la configuración de fixDetailRowHeight, debe establecerse para cada capa