eayui子表套子表的设置

最新推荐文章于 2024-05-27 12:07:42 发布

置顶 1-木2-林3-森

最新推荐文章于 2024-05-27 12:07:42 发布

阅读量457

点赞数

本文介绍了一个使用 EasyUI 实现的数据表格嵌套示例，展示了如何配置多级可展开的数据表格，并通过不同级别的 AJAX 调用加载数据。代码中详细解释了表格配置选项、数据请求方式及格式化显示的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我来贴一段代码吧
$('#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);
            },
已经测试通过，关键点在于命名，希望能够帮助大家！！！