从单元格组件内部检测行选择更改

Question

我正在使用Tabulator满足我的应用程序中的某些数据需求，并创建了一些自定义单元格。

我目前有一个带有“编辑”按钮的自定义单元格，该按钮可切换行选择及其可编辑性。网格外部还有一个按钮，允许选择所有行（如屏幕截图所示）

我想做的是在突出显示行时（通过单击“编辑”按钮或以编程方式选择所有行）将按钮从“编辑”更改为“取消”。

通过执行cell.getRow().isSelected()，可以从单元格中的with获得当前的行选择，但是我没有发现检测特定行选择何时更改的方法。

我想到的一个解决方案是使用CSS隐藏/显示“编辑”或“取消”按钮，因为Tabulator会将类tabulator-selected添加到突出显示的任何内容中。但这似乎更像是黑客。

预先感谢您的想法，意见和评论！

---

如果相关，我将使用Tabulator包裹在Vue组件中。目前，自定义单元只是普通JS。

Answer 1

正确的方法是在单元格上使用格式化程序，该格式化程序根据行的选定状态设置切换的选定状态，可以使用cell.getRow().isSelected()

进行检索。

然后可以在行组件上使用 rowSelectionChanged 回调和 reformat 函数来触发重新格式化选择状态更改时该行的行：

var table = new Tabulator("#example-table", {
    rowSelectionChanged:function(data, rows){
        rows.forEach(function(row){
            row.reformat();
        });
    },
});

Answer 2

Tabulator中内置了一些回调，可告诉您行选择发生更改的时间， rowSelected ， rowDeselected 和 rowSelectionChanged 。完整的文档可以在Callbacks Documentation

中找到

更改格式化程序中单元格的格式仅是安全的，因此您要注意一行中选择的更改，然后触发该行的重新格式化：

var table = new Tabulator("#example-table", {
    rowSelectionChanged:function(data, rows){
        rows.forEach(function(row){
            row.reformat();
        });
    },
});

Answer 3

我想出了一种似乎很合适的方法来检测单元格中行选择的变化。它使用MutationObserver API并检查tabulator-selected CSS类的行元素。

（我也打开了feature request on GitHub，所以将来可能会有不同的处理方式）

/**
 * A custom formatter/cell to enable the selection of an individual row
 *
 * @param {Object} cell Tabulator Cell object
 * @returns {HTMLElement}
 */
export default function(cell) {
  const checkbox = document.createElement('input')
  checkbox.type = 'checkbox'
  checkbox.onchange = function() {
    cell.getRow().toggleSelect()
  }

  // Callback function to execute when mutations are observed
  function mutationCallback(mutationsList) {
    for (let mutation of mutationsList) {
      // if you are using something other than a checkbox, you would perform the element changes in there
      checkbox.checked = mutation.target.classList.contains('tabulator-selected')
    }
  }

  // Create an observer to only watch for attribute changes (like CSS classes) and activate it
  const rowEl = cell.getRow().getElement()
  // list of all available config options: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit
  const config = { attributes: true, attributeFilter: ['class'] }
  const observer = new MutationObserver(mutationCallback)
  observer.observe(rowEl, config)

  return checkbox
}