如何在jqgrid的第一頁顯示所有組？

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