Tabulator.js：单击复选框时不会触发 cellClick 回调

Question

在复选框选中一行后，我需要通过调用recal来重新计算表格。 如果通过单击调用recal的行来选择它。 我从插件站点复制了以下代码

  {formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", headerSort:false, cellClick:function(e, cell){
    console.log("table ",table);
     // cell.getRow().toggleSelect();
    console.log("table ",table);        
    table.recalc();
  }},

但没有任何东西被执行。 该复选框被选中并突出显示该行。 你可以试试我的jsFiddle。

更新 1 ，因此如果我单击复选框，它会起作用，但我希望在单击复选框时触发 function。

Answer 1

顾名思义，应该在单元格元素单击时调用cellClick ，还有另一个元素被认为是单元格，并且复选框包含在单元格内，这就是为什么当您单击复选框时不会触发cellClick并在单击复选框外部时触发的原因

1. 问题
   正如@EugeneOlisevich 所建议的，而不是听cellClick ，听rowSelectionChanged会是更好的选择。

   在第一次加载完成之前，不会创建table引用，而不是使用table调用recalc 。

   您可以访问recalc function 的另一种方法是通过this

...
rowSelectionChanged: function(e, row) {
    this.recalc();
},
...

2. 问题
   如果选择了行，则单击可编辑列时，它将取消选择该行
   这可以通过防止通过cellClick function 将event冒泡到父级来解决。

...
{
    title: "mn",
    field: "mn",
    editor: "number",
    cellEdited: function(cell) {
        aktualizuj_m(cell);
    },
    cellClick: function(e, cell) {
        e.preventDefault();
        e.stopPropagation();
    },
},
...

3. 问题
   由于在第一次加载时未创建table引用，因此我添加了条件以在undefined table引用之前不运行循环 / null

table && values.forEach(function(value, index) {
    var row = table.getRow(index + 1);
    if (row.isSelected() && value) {
      calc = calc + value;
    }
});

4. 问题
   如果将mn列输入更改为 0，则 sum 不会更新，这可以通过更新条件来解决。

...
if (typeof mnozstvi == "number") {
    cell.getRow().update({
      cena_m: cena * mnozstvi
    });
}
...

注： mn列可输入负数范围

这里的工作示例

Answer 2

您可以尝试使用另一个事件处理程序，而不是直接听单元格单击或行选择（或者这取决于您想要的行为）

这是检查解决方案的小提琴链接： https://jsfiddle.net/02phqxz8/

...,
rowSelectionChanged:function(data, rows) {
    if(table) {
    table.recalc();
  }
},
...

改变了什么：相反，您可以处理 rowSelectionChanged 事件。 每次调用它时，通过单击行或单击复选框，您可以为表调用重新计算。 只需确保默认检查表 object，因为该事件在构造函数返回表本身之前被触发。 或者作为避免每次都进行此附加检查的选项，您可以在创建表后立即订阅此事件。

Answer 3

您可以使用rowSelectionChanged

rowSelectionChanged:function(data, rows) {
    if (updatedDataLength != data.length) {
       updatedDataLength = data.length;
       table.recalc();
    }
},

var updatedDataLength = 0;

您需要添加一个可以检查数据更改的局部变量，因为第一次渲染表时，它还会调用table.recalc() ，这将导致渲染初始表的问题。 所以我建议使用检查更新的数据长度以保持简单，而不是比较整个数据。

---

或者你可以添加一个标志var tableRendered = false; .

rowSelectionChanged: function(data, rows) {
      if (!tableRendered) {
         tableRendered = true;
      } else {
         table.recalc();
      }
    },