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

时间:2019-02-19 18:39:16

标签: javascript tabulator

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

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

enter image description here

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

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

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

预先感谢您的想法,意见和评论!


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

3 个答案:

答案 0 :(得分:1)

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

进行检索。

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

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

答案 1 :(得分:1)

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

中找到

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

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

答案 2 :(得分:0)

我想出了一种似乎很合适的方法来检测单元格中行选择的变化。它使用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
}