jqPivot-我如何只显示数据行而不是汇总标题？

Question

我正在尝试构建一个jqPivot（示例jsFiddle：http://jsfiddle.net/reckert/vqetvqoc/1/） 我需要一行代表其中的每个X维度，然后是值 - 我得到的是

如何删除上部折叠行，以便我可以获得更多类似的内容：

我已尝试过trirand jqGrid和free.jqGrid，并得到类似的结果。 这是我正在使用的代码：

var mydata = [{
  "System": "Central Product Library (CPL)",
  "RFSTitle": "CPL - service support",
  "WorkRequest": "HBCBS00896187",
  "RFS": "40000",
  "PCR": "1",
  "EstimateType": "IE",
  "PHASE": "New",
  "Estimate": 10000.0,
  "BilledTo": null,
  "Lock": false,
  "CategoryID": 2,
  "Category": "BlueList",
  "Rate": 59.1600,
  "MonthEndDate": "2016-01-22T00:00:00",
  "MonthHours": 3750.000000000000,
  "MonthDollars": 221850.000000
}, {
  "System": "Central Product Library (CPL)",
  "RFSTitle": "CPL - service support",
  "WorkRequest": "HBCBS00896187",
  "RFS": "40000",
  "PCR": "1",
  "EstimateType": "IE",
  "PHASE": "New",
  "Estimate": 10000.0,
  "BilledTo": null,
  "Lock": false,
  "CategoryID": 2,
  "Category": "BlueList",
  "Rate": 59.1600,
  "MonthEndDate": "2016-02-26T00:00:00",
  "MonthHours": 6250.000000000000,
  "MonthDollars": 369750.000000
}, {
  "System": "Central Product Library (CPL)",
  "RFSTitle": "CPL - service support",
  "WorkRequest": "HBCBS00896187",
  "RFS": "40000",
  "PCR": "2",
  "EstimateType": "IE",
  "PHASE": "1",
  "Estimate": 2222.0,
  "BilledTo": null,
  "Lock": false,
  "CategoryID": 2,
  "Category": "BlueList",
  "Rate": 59.1600,
  "MonthEndDate": "2016-01-22T00:00:00",
  "MonthHours": 740.670000000000,
  "MonthDollars": 43817.850000
}, {
  "System": "Central Product Library (CPL)",
  "RFSTitle": "CPL - service support",
  "WorkRequest": "HBCBS00896187",
  "RFS": "40000",
  "PCR": "2",
  "EstimateType": "IE",
  "PHASE": "1",
  "Estimate": 2222.0,
  "BilledTo": null,
  "Lock": false,
  "CategoryID": 2,
  "Category": "BlueList",
  "Rate": 59.1600,
  "MonthEndDate": "2016-02-26T00:00:00",
  "MonthHours": 1234.450000000000,
  "MonthDollars": 73029.750000
}, {
  "System": "Central Product Library (CPL)",
  "RFSTitle": "CPL - service support",
  "WorkRequest": "HBCBS00896187",
  "RFS": "40000",
  "PCR": "2",
  "EstimateType": "IE",
  "PHASE": "1",
  "Estimate": 2222.0,
  "BilledTo": null,
  "Lock": false,
  "CategoryID": 2,
  "Category": "BlueList",
  "Rate": 59.1600,
  "MonthEndDate": "2016-03-25T00:00:00",
  "MonthHours": 246.890000000000,
  "MonthDollars": 14605.950000
}];


var grid = $("#grid");

grid.jqGrid('jqPivot',
  mydata, {
    xDimension: [

      {
        groupfield: false,
        groupSummary: false,
        width: 160,
        dataName: 'RFS',
        label: 'RFS'
      }, {
        isGroupField: false,
        groupSummary: false,
        width: 160,
        dataName: 'WorkRequest',
        label: 'WorkRequest'
      },

      {
        groupfield: false,
        groupSummary: false,
        width: 160,
        dataName: 'RFSTitle',
        label: 'Title'
      }, {
        groupfield: false,
        groupSummary: false,
        width: 160,
        dataName: 'Category',
        label: 'Category'
      }, {
        groupfield: false,
        groupSummary: false,
        width: 160,
        dataName: 'Phase',
        label: 'Phase'
      }, {
        groupfield: false,
        groupSummary: false,
        width: 160,
        dataName: 'Rate',
        label: 'Rate'
      },
    ],
    yDimension: [{
        dataName: 'MonthEndDate'
      }
      //,            { dataName: 'PCR' }
    ],
    aggregates: [{
      aggregator: 'sum',
      width: 160,
      member: 'MonthHours',
      label: "Hours"
    }, {
      aggregator: 'sum',
      width: 160,
      member: 'MonthDollars',
      label: "Dollars"
    }],
    groupSummary: false,
    colTotals: true
  },
  // grid options
  {
    groupingView: {
      hideFirstGroupCol: false,
      groupSummary: [false, false, false, false, false, false],
      groupSummaryPos: ["trailer", "trailer", "trailer", "trailer", "trailer", "trailer"],
    },
    pager: true,
    pager: "#MonthlyBillPivotPager",
    iconSet: "fontAwesome",
    cmTemplate: {
      autoResizable: true
    },
    shrinkToFit: false,
    autoresizeOnLoad: true,
    autoResizing: {
      compact: true
    },
    caption: 'RFS Billing',
    hideFirstGroupCol: false
  }
);

Answer 1

您的代码在某些属性或选项的值名称中有小错误。您使用的示例groupSummaryPos包含不存在的值："trailer"，但唯一允许值为："header"或"footer"。我删除了所有不需要的属性。我建议你阅读the wiki article，其中我描述了免费jqGrid中使用的jqPivot的选项。

您遇到的主要问题是数据分组问题。问题的原因是使用了错误的PHASE属性名称。源数据包含属性，但您使用了dataName: 'Phase'（错误的情况!!!）：

{
    groupfield: false,
    groupSummary: false,
    width: 160,
    dataName: 'Phase',
    label: 'Phase'
}

要解决此问题，您应将xDimension的项目更改为

{
    width: 80,
    dataName: 'PHASE',
    label: 'Phase'
}

此外，我删除了autoresizeOnLoad: true，因为它不使用顶级列标题中的文字。

您可以在演示中看到分组的结果：https://jsfiddle.net/OlegKi/tcxv2o22/4/