Slickgrid 总计答案

【问题标题】：Slickgrid grand totalsSlickgrid 总计
【发布时间】：2014-04-29 07:12:47
【问题描述】：

有没有办法通过分组在 Slickgrid 中显示总计？

我发现了以下内容：

1) 在文档Implementing a totals row via a data provider 中。但是我不能使用 DataView 和分组功能。

2) 有一个名为Slickgrid totals plugin 的 SlickGrid 插件。但它不允许使用分组功能。

【问题讨论】：

您发现的第二个似乎很有希望，您应该首先尝试使用分组构建代码，然后附加/注册 TotalGrouping，因为附加它似乎很容易。
感谢您的回答！我不确定我是否完全理解您，请您提供一些代码示例吗？

标签： jquery slickgrid

【解决方案1】：

添加 TotalsDataProvider 函数

function TotalsDataProvider(dataView, columns) {
  var totals = {};
  var totalsMetadata = {
  // Style the totals row differently.
    cssClasses: "totals",
    columns: {}
  };
  // Make the totals not editable.
  for (var i = 0; i < columns.length; i++) {
    totalsMetadata.columns[i] = { editor: null };
  }
  this.getLength = function() {
    return dataView.getLength() + 1;
  }
  this.getItem = function(index) {
    return (index < dataView.getLength()) ? dataView.getItem(index) : totals;
  };

  // Some group-functions from DataView
  this.setRefreshHints = function(hints) {
    return dataView.setRefreshHints(hints);
  };
  this.collapseGroup = function(varArgs) {
    return dataView.collapseGroup(varArgs);
  };
  this.expandGroup = function(varArgs) {
    return dataView.expandGroup(varArgs);
  };

  this.updateTotals = function() {
    var columnIdx = columns.length;
    while (columnIdx--) {
      var column = columns[columnIdx];
      if (!column.hasTotal) { // Just add in your column "hasTotal: true" 
        continue;
      }
      var total = 0;
      var i = dataView.getLength();
      while (i--) {
        total += (dataView.getItem(i)[column.field] || 0);
      }
      totals[column.field] = total;
    }
  };
  this.getItemMetadata = function(index) {
    return (index != dataView.getLength()) ? dataView.getItemMetadata(index) : totalsMetadata;
  };
  this.updateTotals();
}

在您的列中添加选项“hasTotal: true”。例如：

var columns = [
        {id: "id", name: "Index", field: "id", hasTotal: true},
        {id: "title", name: "Title", field: "title"},
        {id: "duration", name: "Duration", field: "duration", hasTotal: true},
        {id: "%", name: "% Complete", field: "percentComplete", hasTotal: true},
        {id: "start", name: "Start", field: "start"},
        {id: "finish", name: "Finish", field: "finish"},
        {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
      ];

更改网格变量并在上方添加 dataProvider 变量：

//grid = new Slick.Grid("#myGrid", dataView, columns, options);
var dataProvider = new TotalsDataProvider(dataView, columns);
grid = new Slick.Grid("#myGrid", dataProvider, columns, options);

每次更改数据（通过过滤或通过 grid.onCellCange）时，您都需要更新总数据：

// The data has changed - recalculate the totals.
dataProvider.updateTotals(); 
// Rerender the totals row (last row).     
grid.invalidateRow(dataProvider.getLength() - 1);
grid.render();

【讨论】：

感谢您的回答！它似乎比我的更优雅的解决方案。我稍后会测试它。

【解决方案2】：

我找到了一些解决方法。算法如下：

收集 JSON 数据
计算所需列的总计
将额外的行（数组元素）推入 JSON 数据数组的底部，带有额外的参数，例如，noGrouping:true
使用dataView.setItems(JSONDataArray)将数据推送到DataView
在slick.dataview.js 函数addTotals 中，行后：

g.collapsed = groupCollapsed ^ toggledGroups[g.groupingKey];添加：
```
if(g.rows[0].noGrouping) {
  g.collapsed = true;
}
```
所以总计组总是折叠
如果需要，在 slick.groupitemmetadataprovider.js 中为函数 defaultGroupCellFormatter 添加一些格式

【讨论】：