分组级别的 SlickGrid 显示聚合答案

【问题标题】：SlickGrid Display Aggregation at grouping level分组级别的 SlickGrid 显示聚合
【发布时间】：2014-06-10 02:44:03
【问题描述】：

我正在按照这个示例进行聚合分组： http://mleibman.github.io/SlickGrid/examples/example-grouping.html

这在一行中完成了分组，在单独的行中完成了聚合。我希望两者都显示在同一行中，而不是有两个单独的行

例如，在上面的示例中，我想要单行喜欢 + 持续时间：3（4 项） 平均：20 % 费用：60 然后我们点击展开按钮，我们可以看到里面的所有细节。

有什么建议吗？

【问题讨论】：

标签： javascript jquery slickgrid

【解决方案1】：

您需要更改formatter 和lazyTotalsCalculation。

lazyTotalsCalculation = false

formatter: function (g) {
  var total = sumTotalsFormatter(g.totals, columns[6]),
      avg = avgTotalsFormatter(g.totals, columns[3]);
  return "Duration:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span><span>avg: " + avg + "</span><span> cost: " +  (total.length>0?total.split(":")[1] : total) + "</span>" ;
},

那是快速而肮脏的路线。为了使代码更健壮而不是“硬编码”列索引，您需要按照以下行查找列：

grid.getColumns()[grid.getColumnIndex("cost")]
grid.getColumns()[grid.getColumnIndex("%")]

【讨论】：

非常感谢，这行得通。如果有一个选项可以直接将其插入顶部，那就太好了，因为我们不需要使用空格来对齐东西
我必须仔细看看title 行如何为spanning 目的操作列。
试过这种方法，但这在 IE 中不起作用：'
' +"" + '
' + // '' +sum0 + '
' + // '
' + sum1 + '
' ;

【解决方案2】：

我分享我的解决方案。

要显示总数，您可以添加聚合器

aggregators: [
  new Slick.Data.Aggregators.Sum('your_column_name1');
  new Slick.Data.Aggregators.Sum('your_column_name2');
  new Slick.Data.Aggregators.Sum('your_column_name3');
]

然后，在格式化程序功能上，您可以访问总计。

因此，使用总计并使用单元格使用的相同 css 类格式化分组行，如下所示：

setGrouping({
            getter: "your_getter",
            formatter: function (g) {
                let html = `<span class='l0 r0'>${g.value}</span>`
                            +`<span class='slick-cell l1 r1'>${g.totals.sum['your_column_name1']}</span>`
                            +`<span class='slick-cell l2 r2'>${g.totals.sum['your_column_name2']}</span>`
                            +`<span class='slick-cell l3 r3'>${g.totals.sum['your_column_name3']}</span>`;
                return html;
            },
            collapsed: false,
           aggregators: [
               new Slick.Data.Aggregators.Sum('your_column_name1');
               new Slick.Data.Aggregators.Sum('your_column_name2');
               new Slick.Data.Aggregators.Sum('your_column_name3');
           ]
        }

请注意，第一个 span 必须没有 slick-cell 类，以允许展开和折叠图标正确显示。

另外，您必须注意每个跨度都有两个递增的类。

l0 r0
l1 r1
l2 r2
l3 r3

其中 l0 和 r0 用于第一列，l1 和 r1 用于第二列，依此类推。

使用这种方法，我已经能够创建这样的东西：

Example Image

【讨论】：