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

Question

我需要在通过复选框选中一行后调用 recal 来重新计算 table。如果通过单击调用 recal 的行来选择它。我从插件 site

复制了以下代码

  {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 所以如果我点击复选框就可以工作，但我希望在点击复选框时触发该功能。

Answer 1

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

这里是link到fiddle检查解决方案：https://jsfiddle.net/02phqxz8/

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

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

Answer 2

您可以使用rowSelectionChanged

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

var updatedDataLength = 0;

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

或者您可以只添加一个标志 var tableRendered = false;。

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

Answer 3

顾名思义 cellClick 应该在单元格元素上调用，点击还有另一个元素被认为是单元格，复选框包含在单元格内，这就是为什么 cellClick 不是单击复选框时触发，单击复选框外时触发

问题
正如@EugeneOlisevich 建议的那样，与其听 cellClick，不如听 rowSelectionChanged。

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

另一种访问 recalc 函数的方法是通过 this

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

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

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

问题
由于 table 引用未在此处首次加载时创建，因此我添加了不运行循环的条件，直到 table 引用为 undefined/null

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

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

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

注：负值范围可输入mn列

在这里工作example

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

Tabulator.js: cellClick callback is not fired when clicking a checkbox

javascript

tabulator