Tabulator 5.0及以上版本cellEdited事件无法触发问题咨询

问题根因 #

Tabulator 5.0及以上版本对列配置内的事件回调规则做了调整，所有回调属性统一新增on前缀，4.x版本直接使用事件名作为配置项的写法不再兼容，这是你代码中cellEdited回调无法触发的原因。

修复方案 #

你可以选择以下任意一种方式修复：

• 方案1：调整列配置回调属性名
  直接把列配置中的cellEdited改为onCellEdited即可，修改后的列配置如下：

  columns: [{
    title: "Name",
    field: "name",
    width: 150,
    editor: "input",
    onCellEdited: (cell) => console.log('edited')
  }]
  

• 方案2：使用全局事件绑定（5.x官方推荐写法）
  通过表格实例的on方法全局绑定cellEdited事件，无需修改列配置：

  // 表格实例化完成后绑定事件
  table.on('cellEdited', function(cell) {
    console.log('edited')
  })
  

完整可运行代码 #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link href="https://unpkg.com/tabulator-tables@5.0.7/dist/css/tabulator.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.0/dist/js/tabulator.min.js"></script>
</head>
<body>
  <div id="example-table"></div>
</body>
<script>
  var tabledata = [{
    id: 1,
    name: "Oli Bob"
  }];

  var table = new Tabulator("#example-table", {
    height: "311px",
    columns: [{
      title: "Name",
      field: "name",
      width: 150,
      editor: "input",
      onCellEdited: (cell) => console.log('edited')
    }],
    data: tabledata
  });
</script>
</html>

内容的提问来源于stack exchange，提问作者Thomas Dufresne