具有动态数据和 topCalc 的数据树

Question

在 tabulator 中，我试图让一些东西一起玩得很好。我已经接近可行的解决方案，但新问题不断出现。如果能提供一些帮助，我们将不胜感激！

我有一些数据，在尝试显示数据树时，我已经为它定义了一些 children。

我想要实现的是在 parent-row 中显示一些聚合数据。数据包含在 children 中。在我的示例中更具体地说：我希望 parent 行显示 total-views，而 children 显示一个特定日期的视图。

问题不大。当我尝试向这个特殊挑战的方程式中添加 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();
        }
        }
    ],
});

正如您在 fiddle 中看到的那样，除了 topCalc 之外，这有效。对我来说这是有道理的，因为我正在使用格式化程序并且数据实际上并不存在？我想这就是为什么我也不能使用 built-in 总和的原因。

我想要发生的事情：当我过滤时，我希望 parent 重新计算总观看次数，以便观看次数与过滤范围内的所有行数相同。现在，total-views 保持不变。

我已经尝试了很多方法来让它工作；

我尝试了修改器而不是格式化程序，但是我运行也遇到了一些问题。
我尝试将 dataTreeChildColumnCalcs 用于 topCalc，但显然 parent 的 total-views 也没有更新。
我尝试为 parent-row 重新格式化但无济于事

顺便说一句，我的目的是只显示数据。目前，我没有编辑计划，我将使用另一个 table 进行导出。我想我可能可以同时使用修改器和格式化程序。

我已经被困了好久了。非常感谢任何朝着有前途的方向的推动！

已回答！ 感谢@Double H 的精彩回答！对于那些感兴趣的人，请注意，如果你想让它工作，你不需要覆盖原型。 topCalc 及其格式就足够了！

Answer 1

查看我的实现。我希望你看起来像这样

Codesandbox

具有动态数据和 topCalc 的数据树

Data tree with dynamic data and topCalc

javascript

tabulator