使用 sap.ui.table.Table 就像 PowerPivot table

Question

我有一个 table 具有这些值：

var aTableData = [
                  {Product: "A", Sales:120, Group:"001"},
                  {Product: "A", Sales:82, Group:"002"},
                  {Product: "B", Sales:10, Group:"002"},
                  {Product: "C", Sales:14, Group:"001"},
                  {Product: "A", Sales:8, Group:"001"},
                  {Product: "A", Sales:39, Group:"001"},
                  {Product: "B", Sales:3, Group:"002"},
                  {Product: "C", Sales:2, Group:"001"},
                  {Product: "D", Sales:1002, Group:"003"},
];

并且我希望用户 select 通过 facetFilter 分组选项，就像在 PowerPivot table 中一样。例如，如果用户选择产品，则返回的 table 应如下所示：

var aTableData = [
                  {Product: "A", Sales:249},
                  {Product: "B", Sales:13},
                  {Product: "C", Sales:16},
                  {Product: "D", Sales:1002},
];

但如果用户选择产品和组，table 应该如下所示：

var aTableData = [
                      {Product: "A", Sales:167, group: "001"},
                      {Product: "A", Sales:82, group: "001"},
                      {Product: "B", Sales:13, group: "002"},
                      {Product: "C", Sales:16, group: "001"},
                      {Product: "D", Sales:1002, group: "003"},
    ];

目前我只能过滤一个方面，而且过滤器只能工作一次（因为我正在覆盖 table 数据）。那么这个 "PowerPivot" 背后的逻辑应该如何过滤一个或两个以上的值，是否可以使用过滤器和分组来做到这一点（所以我不需要覆盖 table 数据）？

我已将代码复制到 jsbin。

JSBIN

Answer 1

聚合绑定的分组不支持任何聚合函数，如求和。所以我想你必须自己做。

我建议使用 $.ajax 调用（或使用专用模型）加载未聚合数据，并将其保存在控制器或组件的成员中。然后将您的数据与 JavaScript 的一些行聚合到一个 copy 中，并将其分配给您绑定 table 的 JSONModel。

使用这样的算法，您可以重用 groupBy 函数：

var fnAggregate = function(aItems){
  var result = aItems[0];
  result.Sales = aItems.reduce(function(prev, curr){ return prev+curr.Sales;},0);
  return result;
};
var groupBy = function(aData, fnKey, fnAggregate){
  var map = {};
  aData.forEach(function(item){
    var key = fnKey(item);
    if (!(key in map)){
      map[key] = [];
    }
    map[key].push(item);
  });
  var result = [];
  for(key in map){
    result.push(fnAggregate(map[key]));
  }
  return result;
};

并且在您的 handleSelect 函数中您可以使用它们

var fnKey = function(item){ 
  return selectedKeysArray.map(function(key){ return item[key]; }).join(";");
};                               
var groupedTableData = groupBy(aTableData, fnKey, fnAggregate);
var oTable = sap.ui.getCore().byId("Table_ID");
var oTableModel = oTable.getModel().setProperty("/modelData", groupedTableData);

Here's 你修改的jsbin .

使用 sap.ui.table.Table 就像 PowerPivot table

Use sap.ui.table.Table like PowerPivot table

javascript

powerpivot

sapui5