Question

我需要将jqGrid与subgrid一起使用，其中我将从单个存储过程加载所有jqGrid数据（父和子网格）。其中我的SP将表格返回给我以下列。

Login | ReadingID | Role | Update Time | Comments

我想在Parent jqGrid中显示登录名。这将是父Grid中唯一的列。＆安培;对于每个记录，我需要让子网格显示与该登录对应的读取ID记录。任何登录都可能重复读取ID。登录和放大之间有一对多基数。 ReadingID。现在我想显示不同的阅读ID计数和＆amp; subGrid页脚中每个登录的UpdateTime计数。＆安培;此外，我想在父网格的页脚中总计所有这些子网格页脚总数。

我希望这个要求足够清楚。有没有人实现了这样的jqGrid或创建了演示。

更新以描述要求＆amp;选择的解决方案 enter image description here

我使用网格定义如下

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 demo创建了the answer，并添加了选项footerrow，userDataOnFooter和userData。结果我们得到the demo，它显示了您需要的具有相同结构的数据：

enter image description here

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

1 个答案: