Jquery EasyUI DataGrid SubGrid 子表怎么再嵌套子表
Jquery EasyUI DataGrid SubGrid 子表如何再嵌套子表
表格嵌套子表已经成功,但是在子表中再嵌套子表:孙子表显示不正常

就是不能嵌套到父表中,行号:650应该在孙子表下面,而且此时,孙子数据不应该被隐藏
EasyUI 官方例子示意图:

------解决思路----------------------
我来贴一段代码吧
$('#gridContract').datagrid({
title: '合同信息列表(所有合同)',
iconCls: 'icon-tb',
nowrap: true, //内容不换行
autoRowHeight: true,
loadMsg: '请稍等...',
view: detailview, //是否是有“+”的列
detailFormatter: function (indexRelease, rowRelease) { //对“+”的详细设置
return '<div style="padding:2px"><table id="ddv-' + indexRelease + '"></table></div>';
},
onExpandRow: function (indexRelease, rowRelease) { //当“+”点击后展开发生的事件
$('#ddv-' + indexRelease).datagrid({
url: '../Ashx/Mf/ReleaseHandler.ashx?type=GetReleaseByContractId&contractId=' + rowRelease.Id,
fitColumns: true,
singleSelect: true,
rownumbers: true,
loadMsg: '请稍等...',
autoRowHeight: true,
height: 'auto',
sortName: 'CheckDate', //排序列名
sortOrder: 'desc',
columns: [[
{ field: 'Id', title: '编号', width: 40, resizable: true, hidden: true },
{ field: 'CertificateNo', title: '提款序号', width: 40, resizable: true },
{ field: 'ReleaseAmount', title: '放款金额', width: 80, resizable: true,
formatter: function (value, rowData, rowIndex) {
return toThousand(value);
}
},
{ field: 'ReleaseDate', title: '放款日期', width: 80, resizable: true, formatter: function (value, rowData, rowIndex) {
if (value == undefined)
return "";
if (value.toString().indexOf('Date') > 0)
return '';
return FormatDate(value, 'Y-m-d');
}
},
{ field: 'EndDate', title: '截止日期', width: 80, resizable: true, formatter: function (value, rowData, rowIndex) {
if (value == undefined)
return "";
if (value.toString().indexOf('Date') > 0)
return '';
return FormatDate(value, 'Y-m-d');
}
}
]],
onResize: function () {
$('#gridContract').datagrid('fixDetailRowHeight', indexRelease);
},
onLoadSuccess: function () {
setTimeout(function () {
$('#gridContract').datagrid('fixDetailRowHeight', indexRelease);
}, 0);
},
view: detailview,
detailFormatter: function (indexInterest, rowInterest) { //对“+”的详细设置
return '<div style="padding:2px"><table id="ddvInterest-' + indexRelease + indexInterest + '"></table></div>';
},
onCollapseRow: function (indexInterest, rowInterest) {
setTimeout(function () {
$("#ddv-" + indexRelease).datagrid("fixRowHeight", indexInterest);
$('#gridContract').datagrid('fixRowHeight', indexRelease);
$("#ddv-" + indexRelease).datagrid("fixDetailRowHeight", indexInterest);
$('#gridContract').datagrid('fixDetailRowHeight', indexRelease);
}, 0);
},
onExpandRow: function (indexInterest, rowInterest) {
$('#ddvInterest-' + indexRelease + indexInterest).datagrid({
url: '../Ashx/Mf/RepaymentAutoHandler.ashx?type=QueryInterest&releaseId=' + rowInterest.Id,
fitColumns: true,
singleSelect: true,
rownumbers: true,
loadMsg: '请稍等...',
height: 'auto',
sortName: 'CheckDate',
sortOrder: 'desc',
columns: [[
{ field: 'Id', title: '编号', width: 45 },
{ field: 'CheckDate', title: '收款日期', width: 85, formatter: function (value, rowData, rowIndex) {
if (value == undefined)
return "";
if (value.toString().indexOf('Date') > 0)
return '';
return FormatDate(value, 'Y-m-d');
}
},
{ field: 'AmountType', title: '明细类型', width: 40,
formatter: function (val, rec) {
if (val == '0') {
return "利息";
} else if (val == '1') {
return "本金";
} else if (val == '2') {
return "咨询费";
} else if (val == '3') {
return "利息罚息";
} else if (val == '4') {
return "本金罚息";
} else if (val == '5') {
return "放款";
}
}
},
{ field: 'Repayment', title: '实收金额', width: 100, align: 'right',
formatter: function (val, rec) {
return toThousand(val.toFixed(2));
}
},
{ field: 'Surplus', title: '剩余金额', width: 100, align: 'right',
formatter: function (val, rec) {
return toThousand(val.toFixed(2));
}
},
{ field: 'Remark', title: '备注', width: 100 }
]],
onResize: function () {
$("#ddv-" + indexRelease).datagrid("fixDetailRowHeight", indexInterest);
$('#gridContract').datagrid('fixDetailRowHeight', indexRelease);
},
onLoadSuccess: function () {
setTimeout(function () {
$("#ddv-" + indexRelease).datagrid("fixRowHeight", indexInterest);
$('#gridContract').datagrid('fixRowHeight', indexRelease);
$("#ddv-" + indexRelease).datagrid("fixDetailRowHeight", indexInterest);
$('#gridContract').datagrid('fixDetailRowHeight', indexRelease);
}, 0);
}
});
$("#ddv-" + indexRelease).datagrid("fixDetailRowHeight", indexInterest);
$('#gridContract').datagrid('fixDetailRowHeight', indexRelease);
}
});
$('#gridContract').datagrid('fixDetailRowHeight', indexRelease);
},
已经测试通过,关键点在于命名,希望能够帮助大家!!!
表格嵌套子表已经成功,但是在子表中再嵌套子表:孙子表显示不正常
就是不能嵌套到父表中,行号:650应该在孙子表下面,而且此时,孙子数据不应该被隐藏
EasyUI 官方例子示意图:
------解决思路----------------------
我来贴一段代码吧
$('#gridContract').datagrid({
title: '合同信息列表(所有合同)',
iconCls: 'icon-tb',
nowrap: true, //内容不换行
autoRowHeight: true,
loadMsg: '请稍等...',
view: detailview, //是否是有“+”的列
detailFormatter: function (indexRelease, rowRelease) { //对“+”的详细设置
return '<div style="padding:2px"><table id="ddv-' + indexRelease + '"></table></div>';
},
onExpandRow: function (indexRelease, rowRelease) { //当“+”点击后展开发生的事件
$('#ddv-' + indexRelease).datagrid({
url: '../Ashx/Mf/ReleaseHandler.ashx?type=GetReleaseByContractId&contractId=' + rowRelease.Id,
fitColumns: true,
singleSelect: true,
rownumbers: true,
loadMsg: '请稍等...',
autoRowHeight: true,
height: 'auto',
sortName: 'CheckDate', //排序列名
sortOrder: 'desc',
columns: [[
{ field: 'Id', title: '编号', width: 40, resizable: true, hidden: true },
{ field: 'CertificateNo', title: '提款序号', width: 40, resizable: true },
{ field: 'ReleaseAmount', title: '放款金额', width: 80, resizable: true,
formatter: function (value, rowData, rowIndex) {
return toThousand(value);
}
},
{ field: 'ReleaseDate', title: '放款日期', width: 80, resizable: true, formatter: function (value, rowData, rowIndex) {
if (value == undefined)
return "";
if (value.toString().indexOf('Date') > 0)
return '';
return FormatDate(value, 'Y-m-d');
}
},
{ field: 'EndDate', title: '截止日期', width: 80, resizable: true, formatter: function (value, rowData, rowIndex) {
if (value == undefined)
return "";
if (value.toString().indexOf('Date') > 0)
return '';
return FormatDate(value, 'Y-m-d');
}
}
]],
onResize: function () {
$('#gridContract').datagrid('fixDetailRowHeight', indexRelease);
},
onLoadSuccess: function () {
setTimeout(function () {
$('#gridContract').datagrid('fixDetailRowHeight', indexRelease);
}, 0);
},
view: detailview,
detailFormatter: function (indexInterest, rowInterest) { //对“+”的详细设置
return '<div style="padding:2px"><table id="ddvInterest-' + indexRelease + indexInterest + '"></table></div>';
},
onCollapseRow: function (indexInterest, rowInterest) {
setTimeout(function () {
$("#ddv-" + indexRelease).datagrid("fixRowHeight", indexInterest);
$('#gridContract').datagrid('fixRowHeight', indexRelease);
$("#ddv-" + indexRelease).datagrid("fixDetailRowHeight", indexInterest);
$('#gridContract').datagrid('fixDetailRowHeight', indexRelease);
}, 0);
},
onExpandRow: function (indexInterest, rowInterest) {
$('#ddvInterest-' + indexRelease + indexInterest).datagrid({
url: '../Ashx/Mf/RepaymentAutoHandler.ashx?type=QueryInterest&releaseId=' + rowInterest.Id,
fitColumns: true,
singleSelect: true,
rownumbers: true,
loadMsg: '请稍等...',
height: 'auto',
sortName: 'CheckDate',
sortOrder: 'desc',
columns: [[
{ field: 'Id', title: '编号', width: 45 },
{ field: 'CheckDate', title: '收款日期', width: 85, formatter: function (value, rowData, rowIndex) {
if (value == undefined)
return "";
if (value.toString().indexOf('Date') > 0)
return '';
return FormatDate(value, 'Y-m-d');
}
},
{ field: 'AmountType', title: '明细类型', width: 40,
formatter: function (val, rec) {
if (val == '0') {
return "利息";
} else if (val == '1') {
return "本金";
} else if (val == '2') {
return "咨询费";
} else if (val == '3') {
return "利息罚息";
} else if (val == '4') {
return "本金罚息";
} else if (val == '5') {
return "放款";
}
}
},
{ field: 'Repayment', title: '实收金额', width: 100, align: 'right',
formatter: function (val, rec) {
return toThousand(val.toFixed(2));
}
},
{ field: 'Surplus', title: '剩余金额', width: 100, align: 'right',
formatter: function (val, rec) {
return toThousand(val.toFixed(2));
}
},
{ field: 'Remark', title: '备注', width: 100 }
]],
onResize: function () {
$("#ddv-" + indexRelease).datagrid("fixDetailRowHeight", indexInterest);
$('#gridContract').datagrid('fixDetailRowHeight', indexRelease);
},
onLoadSuccess: function () {
setTimeout(function () {
$("#ddv-" + indexRelease).datagrid("fixRowHeight", indexInterest);
$('#gridContract').datagrid('fixRowHeight', indexRelease);
$("#ddv-" + indexRelease).datagrid("fixDetailRowHeight", indexInterest);
$('#gridContract').datagrid('fixDetailRowHeight', indexRelease);
}, 0);
}
});
$("#ddv-" + indexRelease).datagrid("fixDetailRowHeight", indexInterest);
$('#gridContract').datagrid('fixDetailRowHeight', indexRelease);
}
});
$('#gridContract').datagrid('fixDetailRowHeight', indexRelease);
},
已经测试通过,关键点在于命名,希望能够帮助大家!!!