Question

我在我的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");

              });

Answer 1

我知道它已经过时了，但如果有人需要它：

TODO：

 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]);
               }
            }
      }
}

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

1 个答案: