将单元格变量传递给自定义图标事件 Tabulator 的 onclick 方法

Question

我正在使用 Tabulator 创建表格。每行都有一个删除图标（自定义垃圾桶图标）。但是在自定义图标上触发 onclick 事件不起作用。

这是我的代码：

{formatter: deleteBtn, title:"Action"}

let deleteCallback = function(e, cell) {
        cell.getRow().delete();
};

let deleteBtn = function(cell, formatterParams, onRendered) {
        return `<span onclick="deleteCallback('${cell}')"><i class="fa fa-trash"></i></span>`;
};

按钮显示正确。但是，当我单击该按钮时，出现一条错误消息：Uncaught TypeError: Cannot read properties of undefined (reading 'getRow')。基本上 cell 是 undefined.

有一个 cellClick 事件可以触发操作，但我不希望这样。我希望单击单元格内的按钮而不是单元格本身。

如何让它工作？

谢谢

Answer 1

您可以将自己的 deleteButton 格式化程序定义为。

Tabulator.extendModule(
  "format",
  "formatters",
  (function () {
    return {
      deleteButton: function (cell) {
      const deleteCallback = () => {
        cell.getRow().delete();
      };

     let span = document.createElement("span");
     let icon = document.createElement("i");
     icon.className = "fa fa-trash-o";

     icon.addEventListener("click", deleteCallback);
     span.append(icon);

     return span;
   },
};
})());

这是适合您的 codepen

Still I suggest to use "eventDelegation" for your code.

将单元格变量传递给自定义图标事件 Tabulator 的 onclick 方法

Passing the cell variable into the onclick method of a custom icon event Tabulator

javascript

button

onclick

tabulator

formatter