Tabulator 4.2 在编辑时计算列值？

Question

我正在使用增变器计算列中的值，但在编辑其他列中的任一列时我无法更新计算值。我以为 mutatorEdit 函数会执行此操作，但在编辑其他单元格时不会调用它。

示例代码

var tabledata = [
    {id:1, distance:"42", time:"13.90", speed:""},
    {id:2, distance:"12", time:"5.70", speed:""},
];
//custom mutator
var speedMutator = function(value, data, type, params, component){
    return Math.round(data.distance / data.time);
}
var table = new Tabulator("#example-table", {
    data:tabledata,
    columns:[ //Define Table Columns
        {title:"Id", field:"id", visible:false},
        {title:"Distance", field:"distance", editor:true},
        {title:"Time", field:"time", editor:true},
        {title:"Speed", field:"speed", mutator:speedMutator, mutatorEdit:speedMutator},
    ],
});

如有任何帮助，我们将不胜感激。

Answer 1

使用cell edit call back

let tabledata = [{
  distance: 1,
  time: 1,
  speed: 1
}];

const table = new Tabulator("#example-table", {
  data: tabledata,
  reactiveData: true,
  columns: [ //Define Table Columns
    {
      title: "Distance",
      field: "distance",
      editor: true,
      cellEdited: function(cell) {
        tabledata[0].speed = cell.getValue() / tabledata[0].time;
      }
    },
    {
      title: "Time",
      field: "time",
      editor: true,
      cellEdited: function(cell) {
        tabledata[0].speed = tabledata[0].distance / cell.getValue();
      }
    },
    {
      title: "Speed",
      field: "speed"
    },
  ],
});

<!DOCTYPE html>
<html>

<head>
  <title>Tabulator Tree Demo</title>
</head>

<body>

  <div id='example-table'></div>

  <!-- Tabulator CDN -->
  <link href="https://unpkg.com/tabulator-tables@4.2.1/dist/css/tabulator.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>
</body>

</html>

Tabulator 4.2 在编辑时计算列值？

Tabulator 4.2 calculate column values when edited?

tabulator