如何在 jqgrid 的第一页中显示所有组？答案

【问题标题】：how to show all groups in first page in jqgrid?如何在 jqgrid 的第一页中显示所有组？
【发布时间】：2014-12-01 16:21:53
【问题描述】：

我在我的 asp.net mvc 项目中使用了 jqgrid。我有 25000 个不同部门的数据，我按部门分组，每个部门有 500 多个数据。我已经完成了每页 100 个数据的分页，现在的问题是当数据加载时，前 100 个记录属于同一部门，所以我只能看到一个组部门。当我完成接下来的 5 步然后可以看到其他部门时，现在我的要求是我必须在数据加载时在同一页面中显示所有部门组，然后在扩展组时我必须为该数据进行分页，这可能与 jqGrid 吗？如果是，那怎么办？我当前的代码是

jQuery("#ItemSoldReport").jqGrid({
                      data: ParsedJson,
                      datatype: "local",
                      height: 'auto',
                      width: 'auto',

                      rowNum: 100,
                      rowList: [10, 20, 30, 50, 100],
                      colNames: ['Date', 'Time', 'UPC', 'Name', 'Department', 'Qty', 'Cost', 'Price', 'Margin'],
                      colModel: [
                          { name: 'InvoiceDate', index: 'InvoiceDate', width: 90, sorttype: "date", summaryType: 'count', summaryTpl: '({0}) total', resizable: false, datefmt: "m/d/Y h:i A" },
                          { name: 'InvoiceTime', index: 'InvoiceTime', width: 90, resizable: false },
                          { name: 'Barcode', index: 'Barcode', width: 130, resizable: false, },
                          { name: 'ItemName', index: 'ItemName', width: 150, resizable: false, },
                          { name: 'DeptName', index: 'DeptName', width: 120, resizable: false },
                          { name: 'ItemQuantity', index: 'ItemQuantity', width: 50, align: "right", sorttype: "int", resizable: false, },
                          { name: 'CostPrice', index: 'CostPrice', width: 80, align: "right", sorttype: 'number', formatter: 'number', summaryType: 'sum', resizable: false, },
                          { name: 'SalesPrice', index: 'SalesPrice', width: 80, align: "right", sorttype: "number", summaryType: 'sum', formatter: "number", resizable: false, },
                          { name: 'ExtendedPriceMargin', index: 'ExtendedPriceMargin', width: 50, align: "right", resizable: false, },
                      ],
                      pager: "#ItemSoldPager",

                      viewrecords: true,
                      sortorder: "desc",
                      // caption: "Item Sold Report",
                      //sortname: 'DeptName',
                      grouping: true,
                      hidegrid: false,
                      groupingView: {
                          groupField: ['DeptName'],
                          groupDataSorted: false,
                          groupText: ['<b>{0} - {1} department(s)</b>'],
                          groupCollapse: true,
                          groupOrder: ['asc'],
                          groupSummary: [true],

                          //groupSorted: false,
                      },
                      footerrow: true,
                      userDataOnFooter: true,

                      onClickGroup: function (hid, collapsed) {
                          //saveCollapsedStateToLocalStorage(hid, collapsed)

                          var i;
                          i = $.inArray(hid, expandedGroups) > -1;

                          if (!collapsed && i == false) {
                              expandedGroups.push(hid);
                          }
                          else if (collapsed && i == true) {
                              //Grouphid.splice(i, 1);
                              expandedGroups.splice($.inArray(hid, expandedGroups), 1);
                          }

                      },

                      loadComplete: function () {
                          var $this = $(this),
                              //sum = $this.jqGrid("getCol", "SalesPrice", false, "sum"),
                              $footerRow = $(this.grid.sDiv).find("tr.footrow"),
                              localData = $this.jqGrid("getGridParam", "data"),
                              totalRows = localData.length,
                              totalSum = 0,
                              totalCostSum = 0,
                              $newFooterRow,
                              i;


                          for (i = 0; i < totalRows; i++) {
                              totalSum += parseFloat(localData[i].SalesPrice, 10);
                              totalCostSum += parseFloat(localData[i].CostPrice, 10);

                          }
                          $footerRow.find(">td[aria-describedby=" + this.id + "_InvoiceDate]")
                              .text("Grand Total:");
                          $footerRow.find(">td[aria-describedby=" + this.id + "_SalesPrice]")
                              .text($.fmatter.util.NumberFormat(totalSum, $.jgrid.formatter.number));

                          $footerRow.find(">td[aria-describedby=" + this.id + "_CostPrice]")
                             .text($.fmatter.util.NumberFormat(totalCostSum, $.jgrid.formatter.number));



                          if (expandedGroups.length > 0) {
                              for (var i = 0; i <= expandedGroups.length; i++) {
                                  if (typeof (expandedGroups[i]) != "undefined") {
                                      $this.jqGrid("groupingToggle", expandedGroups[i]);
                                  }
                              }
                          }

                      }

                  });
                  jQuery("#ItemSoldReport").jqGrid('navGrid', '#ItemSoldPager', { add: false, edit: false, del: false });
                  jQuery("#ItemSoldReport").setGridWidth("100");

              });

【问题讨论】：

将 rowNum 的值更改为 -1 后尝试。例如rowNum：-1，更改后所有记录将显示在第一页
谢谢，但是在展开时我需要用 100 条记录进行分页，在展开时我不必显示所有记录，
在这种情况下，我认为你应该使用 subgrid 选项。 JQGrid 中不提供组分页。
是的，谢谢，我也在考虑这个

标签： jquery asp.net-mvc jqgrid jqgrid-asp.net jqgrid-formatter

【解决方案1】：

我知道它很旧，但如果有人需要它：

待办事项：

 rowNum: -1, //show all row

 groupingView: {
 groupField: ["yourGroup"],
 groupSummary: [false],
 groupCollapse: true, //collapse at start
 groupColumnShow: [false],
 },

并且在排序时保持行打开：

onClickGroup: function (hid, collapsed) 
{
    var i;
     i = $.inArray(hid, expandedEmpGroups) > -1;
     if (!collapsed && i == false) 
     {
         expandedEmpGroups.push(hid);
     }
     else if (collapsed && i == true) 
     {
          //Grouphid.splice(i, 1);
          expandedEmpGroups.splice($.inArray(hid, expandedEmpGroups), 1);
     }
},
loadComplete: function () 
{
     var $this = $(this)
      if (expandedEmpGroups.length > 0) 
      {
            for (var i = 0; i <= expandedEmpGroups.length; i++) 
            {
               if (typeof (expandedEmpGroups[i]) != "undefined") 
               {
                   $this.jqGrid("groupingToggle", expandedEmpGroups[i]);
               }
            }
      }
}

【讨论】：