ピボットで列をグループ化する方法は？

Question

私は車に関する販売情報を表示するためにpivot gridを作成するために次のコードを書いています。これは、このための完全なコードは、このFiddle codeに見出すことができる

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

画像上のグリッドに類似している格子構造を生成しなければなりません。しかし、次のコード行で列ヘッダーをグループ化するコードを適用した場合：

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"]オプションを追加することをお勧めします。ツールバーのidは、接頭辞"t_"とグリッドの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/