【发布时间】：2022-01-07 07:41:27
【问题描述】：
在制表符中，我试图让一些东西很好地结合在一起。我已经接近一个可行的解决方案，但新问题不断出现。一些帮助肯定会很感激！
我有一些数据，当我试图显示一个数据树时，我已经为它定义了一些子节点。
我想要实现的是在父行中显示一些聚合数据。数据包含在子项中。在我的示例中更具体地说：我希望父行显示总视图，而子行显示某个特定日期的视图。
问题不大。当我尝试在这个特定挑战的方程式中添加一个 topCalc 和过滤器时，麻烦就开始了。
代码如下所示：
let tabledata = [
{id:1, isParent: true, title:"Making sense", date:"01/02/2016", _children:[
{date:"01/02/2016", title:"Making sense 1", views: 204},
{date:"07/02/2017", title:"Making sense 2", views: 21},
]},
{id:1, isParent: true, title:"Restoring sanity", date:"22/05/2017", _children:[
{date:"22/05/2017", title:"Restoring sanity 1", views: 12},
{date:"11/02/2018", title:"Restoring sanity 2", views: 51},
{date:"04/04/2018", title:"Restoring sanity 3", views: 103},
]},
]
const topCalcViews = function (values, data, calcParams ) {
let total = 0;
values.forEach(function (value) {
if (value > 0) {
total += value;
}
});
return total;
}
const table = new Tabulator("#table", {
height:400,
data:tabledata,
layout:"fitColumns",
dataTree: true,
debugInvalidOptions: true,
columns:[
{title:"Title", field:"title" },
{title:"Publish date", field:"date", hozAlign:"left", headerFilter:true},
{title:"views", field:"views", topCalc: topCalcViews, formatter: function (cell, formatterParams, onRendered) {
let data = cell.getData();
let totalViews = 0;
if (data.isParent) {
data._children.forEach(child => {
totalViews += child.views;
});
return totalViews;
}
else return cell.getValue();
}
}
],
});
正如您在小提琴中看到的那样，除了 topCalc 之外，这是可行的。对我来说这是有道理的，因为我正在使用格式化程序并且数据实际上并不存在？我想这就是为什么我也不能使用内置 sum 的原因。
我想要发生的事情：当我过滤时，我希望父级重新计算总视图，以便视图数与落在过滤器范围内的所有行相同。现在，总观看次数保持不变。
我已经尝试了很多方法来让它发挥作用；
- 我尝试了修改器而不是格式化器，但我也遇到了一些问题。
- 我尝试将 dataTreeChildColumnCalcs 用于 topCalc，但显然父级的总视图也没有更新。
- 我尝试为父行调用重新格式化无济于事
顺便说一下，我的目的是只显示数据。目前，我没有编辑计划，我将使用另一个表进行导出。我想我可能可以同时使用 mutators 和 formatters。
我已经被困了很长时间了。非常感谢任何推动有希望的方向！
已回答！ 感谢您的出色回答，@Double H！对于那些感兴趣的人，请注意，如果您希望它工作，您不需要覆盖原型。 topCalc 及其格式化就足够了！
【问题讨论】：
标签： javascript tabulator