如何在 Tabulator.js 表中添加总计

Question

我已经创建了一个这样的制表符表（参考这个小提琴）

var nestedCalc = function(values, data, calcParams){
    var calc = 0;

    data.forEach(function(row) {
        row._children.forEach(function (child) {
        calc += child[calcParams.field];
      })
    });

    return calc;
}

var table = new Tabulator("#example-table", {
    data:tableDataNested,
    dataTree:true,
    dataTreeStartExpanded:true,
    groupBy: "name",
    columns:[
      {title:"Name", field:"name", responsive:0},
      {title:"Applied", field:"applied", bottomCalc: nestedCalc, align:"center", bottomCalcParams: {field: "applied"}},
      {title:"Screened", field:"screened", bottomCalc: nestedCalc,align:"center", bottomCalcParams: {field: "screened"}},
      {title:"Interviewed", field:"interviewed", bottomCalc: nestedCalc,align:"center", bottomCalcParams: {field: "interviewed"}},
    ],
});

有一些像这样的虚拟数据

var tableDataNested = [
    {name:"Backend Engineer A", _children:[
        {name:"Sourced", applied:300, screened:40, interviewed:5},
        {name:"Referred", applied:3, screened:1, interviewed:0},
        {name:"University", applied:4, screened:2, interviewed:1},
        {name:"Total", applied:307, screened:43, interviewed:6},
    ]},
    {name:"Backend Engineer B", _children:[
        {name:"Sourced", applied:1000, screened:140, interviewed:55},
        {name:"Referred", applied:30, screened:11, interviewed:2},
        {name:"University", applied:40, screened:22, interviewed:10},
    ]},
    {name:"Backend Engineer B", _children:[
        {name:"Sourced", applied:1000, screened:140, interviewed:55},
        {name:"Referred", applied:30, screened:11, interviewed:2},
        {name:"University", applied:40, screened:22, interviewed:10},
    ]},
];

我想添加如下图突出显示的总计

我发现这非常困难，因为我在文档中找不到任何有用的东西。 帮助和提示表示赞赏。

Answer 1

您可以通过设置columnCalcs要做到这一点both在你的表的构造

var table = new Tabulator("#example-table", {
    columnCalcs:"both", //show column calculations at top and bottom of table and in groups
});

Answer 2

在 Tabulator 中，您可以这样做：

    var table = new Tabulator("#example-table", {
    columnCalcs:"table", //show column calculations at top and bottom of table and in groups
});

columnCalcs 选项可让您决定应在何处显示计算，它可以采用以下四个值之一：

• true - 在表格的顶部和底部显示计算，
• both - 在表格的顶部和底部显示计算并按组显示
• table - 仅在表格的顶部和底部显示计算
• group - 仅按组显示计算

参考： http : //tabulator.info/docs/4.5/column-calcs