制表符格式化程序计算另一列的百分比

Question

希望这对我来说足够简单，不会丢掉 Codepen 等。

我正在尝试在制表符中创建自定义 formatter/mutator，但我很难获取另一列的总数。 bottomCalc 不可访问，我不明白如何从另一列访问所有数据以运行循环遍历它们。

ID	百分比	数量
1	25	10
2	12.5	5
3	12.5	5
4	50	20
总计	100	40

{title:"%", field:"calc-pct", sorter:"number", formatter:function(cell){
    let amt = cell.getRow().getCell("amount");
    let amtCol = cell.getRow().getColumn("amount");
    // loop through amount to get total here
        amtTotal += amt
    pct = amt / amtTotal
    return pct;
}},

Tabulator 文档内容广泛且非常有用，但是没有大量关于在 formatters/mutators 中使用 getData()、getRow() 内容的信息 - 其中很多似乎更适用于外部函数在构建 table 之后。有用的东西，但不适合我。

编辑：

不幸的是没有包括这个，但除了让它工作之外，我需要能够编辑 Amount 列并实时更新百分比。我已经在下面发布了解决方案，希望其他正在寻找此解决方案的人能得到一些帮助！

Answer 1

let amountColTotal = 0;
cell.getTable().getData().forEach(row => { amountColTotal += row.amount; });

虽然这很简单。

您也可以使用 getCalcResults()

Answer 2

因此，在 Michael 的帮助下，我成功地完成了这项工作。我不得不通过控制台对 table 数据进行一些分析，但设法使其与以下内容一起使用。我想 Tabulator 中可能有一些内置方法可以访问 table 中的所有行，但我无法用 getRow() 等

弄清楚

格式化程序：

在 table 负载上运行，pct 字段的初始填充。

let pctFormatter = function(cell){
    let amountColTotal = 0;
    cell.getTable().getData().forEach(row => { amountColTotal += parseFloat(row.amount); });
    console.log("Amount PCT col total: " + amountColTotal)
    let amount = cell.getRow().getCell("amount").getValue();
    console.log("Amount PCT: " + amount)
    return Math.round ( ( ( amount / amountColTotal ) * 100 ) * 10 ) / 10;
}

变异者：

在 amount edit 上运行，遍历 table 数据并在 calc_pct 列的每个单元格上设置值，用新的 pct 数字更新值。

export let pctMutatorRun = function(cell) { 
    cell.getRow().getCell("calc_srm").setValue(true);
    let table = cell.getTable()
    table.rowManager.rows.forEach(row => {
        console.log(row.getCell("calc_pct").setValue(true));
    });

Table:

{title:"%", field:"calc_pct", sorter:"number", formatter:pctFormatter},
{title:"Amt (kg)", field:"amount", editor:"input", sorter:"number", bottomCalc:"sum", cellEdited:pctMutatorRun, bottomCalcParams:{precision:3}},

Answer 3

您可以在 table 的 dataLoaded 回调和要编辑的列的 cellEdited 回调上调用计算百分比的函数（在下面的示例中为 updatePercent）你在找什么：

var updatePercent = async () => {
    await table.recalc();
  
  var sum = table.getCalcResults().bottom.amount;
  var data = table.getData('active');
  
  data.forEach(row => row.percent = (row.amount / sum) * 100);
  table.updateData(data);
}

var table = new Tabulator("#example-table", {
  height: '100%',
  layout: "fitColumns",
  dataLoaded: updatePercent,
  dataFiltered: updatePercent,
  columns: [{
      title: "Name",
      field: "name"
    },
    {
      title: "Percent",
      field: "percent",
      bottomCalc: "sum"
    },
    {
      title: "Amount",
      field: "amount",
      bottomCalc: "sum",
      editor: "input",
      headerFilter: true,
      cellEdited: updatePercent
    }
  ]
});

var tabledata = [{
    id: 1,
    name: "Oli Bob",
    amount: 10
  },
  {
    id: 2,
    name: "Mary May",
    amount: 5
  },
  {
    id: 3,
    name: "Christine Lobowski",
    amount: 5
  },
  {
    id: 4,
    name: "Brendon Philips",
    amount: 20
  }
];

table.setData(tabledata);

html,
body {
  font-size: 12px;
}

.tabulator {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}

<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/css/bootstrap/tabulator_bootstrap4.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js"></script>
</head>

<body>
  <div id="example-table"></div>
</body>

</html>

JSFiddle：https://jsfiddle.net/9n0fwz4e/

编辑：

带header过滤：https://jsfiddle.net/ox09p8Lq/

Answer 4

这是一个 jsfiddle 以防万一你想包括过滤

comment.log("leave me alone whosebug.com");

制表符格式化程序计算另一列的百分比

Tabulator formatter calculates percent of another column

javascript

tabulator

格式化程序：

变异者：

Table: