jqPivot- 我如何只显示数据行而不显示摘要 headers？

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，其中包含 non-existing 个值："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，因为它不使用顶层 headers 列中的文本。

demo上可以看到分组结果：https://jsfiddle.net/OlegKi/tcxv2o22/4/

jqPivot- 我如何只显示数据行而不显示摘要 headers？

jqPivot- how do I just show the data rows and not summary headers?

jquery

jqgrid

jqpivot