如何在父 jqGrid 页脚中显示子网格页脚数据的总数

Question

我需要带有子网格的 jqGrid，我将从单个存储过程中加载所有 jqGrid 数据（父网格和子网格）。其中我的 SP 正在向我返回包含以下列的表格。

Login | ReadingID | Role | Update Time | Comments

我想在父 jqGrid 中显示登录名。这将是父网格中的唯一列。 & 对于每条记录，我需要有子网格显示与该登录相对应的阅读 ID 记录。对于任何登录，阅读 ID 可能有重复的条目。 Login 和 ReadingID 之间存在一对多的基数。现在我想在 subGrid 页脚中为每个登录显示不同的阅读 ID 计数和更新时间计数。 & 此外，我希望在父网格的页脚中包含所有这些子网格页脚总数。

我希望要求足够明确。有没有人实现过这样的 jqGrid 或创建了演示。

更新以描述需求和选择的解决方案

我使用网格定义如下

mygrid = $("#RptDocRelease");

    // create the grid without filling it (datatype: "local")
    mygrid.jqGrid({
        datatype: 'local',// to revent initial loading of the grid
        postData: {
            FromDate: function () { return $("#FromDate").val(); },
            ToDate: function () { return $("#ToDate").val(); }
        },
        url: '@Url.Action("DocReleaseProductivityList", "Reports")',
        jsonReader: { repeatitems: false, root: "DocRows" },
        colNames: ['@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_Login'],
        colModel: [{ name: 'Login', index: 'Login', }],
        idPrefix: mainGridPrefix,
        subGrid: true,
        gridview: true,
        viewrecords: true,
        pgbuttons: false, pginput: false,
        recordtext: 'Total Rows:{2}',
        emptyrecords: 'Total Rows:0',
        pager: '#LogPager',
        caption: '@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_Title',
        height: 'auto',
        width: 770,
        userDataOnFooter: true,
        hidegrid: false,
        headertitles: true,
        loadError: function (xhr, status, error) {
            alert(status + " " + error);
        },
        beforeProcessing: function (data) {
            var rows = data.DocRows, l = rows.length, i, item, subgrids = {};
            for (i = 0; i < l; i++) {
                item = rows[i];
                if (item.id) {
                    subgrids[item.id] = item.ReadingList;
                }
            }
            data.userdata = subgrids;
        },
        subGridRowExpanded: function (subgridDivId, rowId) {
            var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
                pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
                subgrids = $(this).jqGrid("getGridParam", "userData");

            $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
            $subgrid.jqGrid({
                datatype: "local",
                data: subgrids[pureRowId],
                jsonReader: { repeatitems: false },
                colNames: ['@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_ReadingID',
                            '@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_Role',
                            '@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_UpdateTime',
                            '@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_Comments'
                ],
                colModel: [
                    { name: 'ReadingID', index: 'ReadingID', width: 80, fixed: true, sorttype: "integer" },
                    { name: 'Role', index: 'Role', width: 100, fixed: true },
                    {
                        name: 'UpdateTime', index: 'UpdateTime', width: 80, fixed: true, sorttype: "date", formatter: "date",
                        formatoptions: { srcformat: "m/d/Y h:i:s", newformat: "m/d/Y h:i:s A" }
                    },
                    { name: 'Comments', index: 'Comments' }
                ],
                cmTemplate: { align: 'center', sorttable: false, cellattr: function () { return 'style="white-space: normal!important;' } },
                height: 'auto',
                width: '100%',
                hidegrid: false,
                viewrecords: true,
                pgbuttons: false, pginput: false,
                recordtext: 'Total Rows:{2}',
                emptyrecords: 'Total Rows:0',
                pager: rowId + '_Pager',
                userDataOnFooter: true,
                headertitles: true,
                gridview: true,
                loadError: function (xhr, status, error) {
                    alert(status + " " + error);
                },
                gridview: true,
                idPrefix: rowId + "_"
            });
            $("#" + rowId + "_Pager").navGrid('#LogPager', { edit: false, add: false, del: false, search: false, refresh: false })
        }
    });
    mygrid.navGrid('#LogPager', { edit: false, add: false, del: false, search: false, refresh: false })
    .closest(".ui-jqgrid").hide();

&服务器数据将按以下结构返回

 public struct JQGridResult
    {
        public int page;
        public int total;
        public int records;
        public List<ReportData> DataRows;
        public List<DocRelease> DocRows;
        public object userdata;
    }


 public struct DocRelease
    {
        public string Login { set; get; }
        public List<Readings> ReadingList { set; get; }
        public object userdata;
    }

public struct Readings
    {
        public int ReadingID { set; get; }
        public string Role { set; get; }
        public DateTime UpdateTime { set; get; }
        public string Comments { set; get; }
    }

Answer 1

似乎我最容易使用userdata 以及主网格和子网格的userDataOnFooter: true 选项（请参阅the old answer）。在这种情况下，您可以在服务器端对汇总行值进行所有必需的计算，并将计算结果包含在userdata 部分中。 The answer、this one、this one 和许多其他提供了同时加载整个网格和子网格的示例。您可以使用loadonce: true 来简化加载。我认为您将能够根据参考的答案实现您的要求。不要忘记在子网格中使用idPrefix 选项。

更新：在您发布带有数据的图片后，我认为您应该使用分组而不是子网格。您仍然可以使用footerrow: true 和userDataOnFooter: true 选项来设置总页脚行。我刚刚为the answer 创建了the demo，并添加了选项footerrow、userDataOnFooter 和userData。结果我们得到the demo，它显示了与您需要的结构相同的数据：