如何在數據透視中對列進行分組？

Question

我寫了下面的代碼來創建一個pivot grid來顯示有關汽車的銷售信息。它應該產生網格結構類似於電網的圖像此

var data = [{ 
     "id": 1, 
     "make": "toyota", 
     "model": "corolla", 
     "fuelusagecity": "17", 
     "fuelusagehwy": "12", 
     "fuelmeasure":'Litre', 
     "salesaboveavg": false, 
     "totalnumberofsales": 120000.0000, 
     "highsalestext": null, 
     "salesdate": "2010-12-01" 
    }, { 
     "id": 2, 
     "make": "toyota", 
     "model": "corolla", 
     "fuelusagecity": "10", 
     "fuelusagehwy": "14", 
     "salesaboveavg": false, 
     "fuelmeasure":'Litre', 
     "totalnumberofsales": 100000.0000, 
     "highsalestext": "HIGH", 
     "salesdate": "2010-12-15" 
    }, { 
     "id": 3, 
     "make": "toyota", 
     "model": "belta", 
     "fuelusagecity": "15", 
     "fuelusagehwy": "10", 
     "salesaboveavg": true, 
     "fuelmeasure":'Litre', 
     "totalnumberofsales": 200000.0000, 
     "highsalestext": null, 
     "salesdate": "2011-01-10" 
    }, { 
     "id": 4, 
     "make": "toyota", 
     "model": "camry", 
     "fuelusagecity": "13", 
     "fuelusagehwy": "10", 
     "fuelmeasure":'Litre', 
     "salesaboveavg": false, 
     "totalnumberofsales": 300000.0000, 
     "highsalestext": "HIGH", 
     "salesdate": "2011-04-23" 
    }, { 
     "id": 5, 
     "make": "nissan", 
     "model": "skyline", 
     "fuelusagecity": "14", 
     "fuelusagehwy": "9", 
     "fuelmeasure":'Litre', 
     "salesaboveavg": true, 
     "totalnumberofsales": 500000.0000, 
     "highsalestext": "HIGH", 
     "salesdate": "2010-09-10" 
    }, { 
     "id": 6, 
     "make": "nissan", 
     "model": "zx300", 
     "fuelusagecity": "10", 
     "fuelusagehwy": "8", 
     "fuelmeasure":'Litre', 
     "salesaboveavg": false, 
     "totalnumberofsales": 400000.0000, 
     "highsalestext": null, 
     "salesdate": "2012-01-06" 
    }]; 

    /* convert the salesdate in */ 
    var i, item, dateParts; 
    for (i = 0; i < data.length; i++) { 
     item = data[i]; 
     if (typeof item.salesdate === "string") { 
      dateParts = item.salesdate.split("-"); 
      item.salesYear = dateParts[0]; 
      item.salesMonth = dateParts[1]; 
      item.salesDay = dateParts[2]; 
      item.salesDateFormatted = dateParts[0]; 
     } 
    } 

    var myIntTemplate = { 
     formatter: "currency", 
     align: "right", sorttype: "number", 
     searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }, 
     formatoptions: { defaultValue: ""}}; 

    $("#list483").jqGrid("jqPivot", 
      data, 
      { 
       frozenStaticCols: true, 
       skipSortByX: true, 
       useColSpanStyle: true, 
       //defaultFormatting: false, 
       xDimension: [ 
        { dataName: "make", width: 100, label: "Make" }, 
        { dataName: "model", width: 100, label: "Model", align: "center", skipGrouping:true }, 
        { dataName: "fuelmeasure", width: 103, label: "Units" }, 
        ], 
       yDimension: [ 
        { dataName: "salesdate", sortorder: "desc"}//, 
        //{ dataName: "salesYear", sorttype: "integer" }, 
        //{ dataName: "salesMonth", sorttype: "integer" } 
       ], 
       aggregates: [{ 
        member: "totalnumberofsales", 
        template: myIntTemplate, 
        formatter:function(cellvalue, options, rowObject){ 
         if(cellvalue=== undefined){ 
          return ''; 
         } 
         else{ 

          var x = options.rowData.pivotInfos[options.colModel.name].rows[0].highsalestext; 

          if(x==="HIGH") 
          { 
           return x; 
          } 
          else 
          { 
           return cellvalue; 
          } 


         } 
        }, 
        cellattr: function (rowId, cellValue, rawObject, cm, rdata) { 
         if (rawObject != null) { 
          var items = rawObject.pivotInfos[cm.name]; 
          if (items != null && items.rows != null && items.rows.length > 0) { 
           var isHigh = true, i; 
           for (i = 0; i < items.rows.length; i++) { 
            if (items.rows[i].highsalestext !== "HIGH") { 
             isHigh = false; 
             break; 
            } 
           } 
           if (isHigh) { 
            return "class='high-marker'"; 
           } 
          } 
         } 
        }, 
        aggregator: "max" 
       }/*, 
       { 
       member: "totalnumberofsales", 
       aggregator: "count", 
       //template: "integer", 
       label: "{0}" 
       }*/] 
      }, 
      // grid options 
      { 
       iconSet: "fontAwesome", 
       cmTemplate: { autoResizable: true, width: 75 }, 
       shrinkToFit: false, 
       useUnformattedDataForCellAttr: false, 
       autoResizing: { compact: true }, 
       groupingView: { 
        groupField: ["x0"], 
        groupColumnShow: [false], 
        groupText: ["<span class='group-text'>{0}</span>"] 
       }, 
       //width: 450, 
       pager: true, 
       rowNum: 20, 
       //caption: "<b>Car sales statistics</b>", 
       rowList: [5, 10, 20, 100, "10000:All"] 
      } 
    ); 

    jQuery("#list483").jqGrid('setGroupHeaders', { 
    useColSpanStyle: true, 
    groupHeaders:[ 
    {startColumnName: 'make', numberOfColumns: 3, titleText: '<div style="display:inline-block">Min: <input type="text" id="minDate" /> Max: <input type="text" id="miaxDate" /></div>'} 
    //{startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'} 
    ] 
}); 

完整代碼可以在此Fiddle code被發現。但是，當我用下面的代碼行的代碼應用到組列標題：

jQuery("#list483").jqGrid('setGroupHeaders', { 
    useColSpanStyle: true, 
    groupHeaders:[ 
    {startColumnName: 'make', numberOfColumns: 3, titleText: '<div style="display:inline-block">Min: <input type="text" id="minDate" /> Max: <input type="text" id="miaxDate" /></div>'} 
    //{startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'} 
    ] 
}); 

它並不如預期組列。爲什麼是這樣，我如何解決這個問題？

祝大家新年快樂！

Answer 1

在我看來，列分組是不正確的方式在你的情況。我建議您將toolbar: [true, "top"]選項添加到網格選項，以在網格頂部創建一個空的工具欄。該工具欄將從"t_"前綴和網格的ID生成id。 ）具有良好的新的一年裏：因此，你可以在任何自定義內容通過使用代碼類似下面

$('<div style="display:inline-block">Min: <input type="text" id="minDate" /> Max: <input type="text" id="miaxDate" /></div>').appendTo("#t_list483"); 

看到修改後的演示https://jsfiddle.net/ocztddsd/4/