Tabulator 4.2 编辑时计算列值？答案

【问题标题】：Tabulator 4.2 calculate column values when edited?Tabulator 4.2 编辑时计算列值？
【发布时间】：2019-07-19 17:14:53
【问题描述】：

我正在使用 mutator 计算列中的值，但在编辑其他列中的任何一个时，我无法更新计算值。我认为 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},
    ],
});

任何帮助将不胜感激。

【问题讨论】：

下次请输入工作代码sn-p，别人不知道你用的是什么版本等

标签： tabulator

【解决方案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>

【讨论】：