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>

制表符4.2编辑后会计算列值吗？

1 个答案: