Question

我的数据包含的字段多于我的网页列数。我需要将字段加到列中。

我有JSON：

{
  'foo1' : 10,
  'foo2' : 11,
  'foo3' : 5,
  'bar1' : 23,
  'bar2' : 2,
  'baz1' : 53,
  'baz2' : 43
},{
  'foo1' : 11,
  'foo2' : 41,
  'foo3' : 31,
  etc.
}

我想要的网格：

Foos Bars Baz's
---- ---- -----
 26   23   96
 83  etc.

所以我希望能够在渲染字段之前添加多个项目，如下所示：

columnDefs: [{
  field: 'foo1 + foo2 + foo3',
  displayName: 'Foos' 
},{
  field: 'bar1 + bar2',
  displayName: 'Bars' 
},{
  field: 'baz1 + baz2',
  displayName: 'Baz's' 
}]

或者类似

之类的东西

field : 'sumFields([foo1,foo2,foo3])'
...
$scope.sumFields = function(fieldlist){
  return fieldlist.reduce(function(pv, cv) { return pv + cv; }, 0));
};

当然，这些伪代码都不起作用。

我想避免为每一列编写自定义CellTemplate。

我想，最糟糕的情况是，我可以在渲染之前按摩数据......所以，

{
  'foo1' : 10,
  'foo2' : 11,
  'foo3' : 5,
  'bar1' : 23,
  'bar2' : 2,
  'baz1' : 53,
  'baz2' : 43,

  'foos': 26,
  'bars': 23,
  'bazs': 96
},{
  'foo1' : 11,
  'foo2' : 41,
  'foo3' : 31,
  etc.
}

[编辑]我添加了一个包含我未经修改的网格的示例plunker，并描述了我想要的内容：

http://plnkr.co/edit/x5abGuyvunBDes6h60eg?p=preview

我不想看猫或狗或其他动物，我想看到某种类型的总和。这些列比我显示的更多，所以我正在寻找更通用的解决方案，比如

  numAnimalsByType([arrayOfAnimals])

所以我可以这样做：

field: numAnimalsByType([dog,cat])
field: numAnimalsByType([fish,snail])

Answer 1

接受挑战！

所以我只是对您的columnDefs字段值做了一些小改动：

  $scope.columnDefs = [{
    field: 'it.foo1 + it.foo2 + it.foo3',
    displayName: 'Foos'
  }, {
    field: 'it.bar1 + it.bar2',
    displayName: 'Bars'
  }, {
    field: 'it.baz1 + it.baz2',
    displayName: "Baz's"
  }];

aditional it.的目的是使它成为一个公式，所以我们可以评估它们：

<table>
  <tr>
    <th ng-repeat="column in columnDefs">{{column.displayName}}</th>
  </tr>
  <tr ng-repeat="it in entries">
    <td ng-repeat="column in columnDefs">{{$eval(column.field)}}</td>
  </tr>
</table>

那就是它！简单实用，看到它在这里工作：

http://plnkr.co/edit/DfRiqH18MpnFPa0jL2X6?p=preview

希望有所帮助。

ng-grid计算多列

1 个答案: