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();
      }
    },