javascript - 检测单元格组件内部的行选择变化

Question

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

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

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

从单元格中，我可以通过执行 cell.getRow().isSelected() 来获取当前行选择，但我没有找到一种方法来检测特定行选择何时发生更改.

我想到的一个解决方案是使用 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();
        });
    },
});