Tabulator 6.2.1所有列设editable:false时rowClick等事件失效求助

问题说明 #

使用Tabulator 6.2.1版本，初始将所有列设置为editable: false，预期实现：

• 单击行时选中该行
• 双击行时切换为可编辑状态
  但实际操作中，单击或双击行均无响应，推测是所有列设为不可编辑时，Tabulator默认拦截了cellClick、rowClick和rowDblClick事件。

已编写setRowEditable函数用于切换行的可编辑状态，该函数遍历行内所有可见且绑定字段的单元格，修改对应列定义的editable参数。

相关代码 #

// 设置行可编辑状态的函数
function setRowEditable(row, editable) {
    row.getCells().forEach(function (cell) {
        let col = cell.getColumn();
        if (col.isVisible() && col.getField()) {
            col.updateDefinition({ editable: editable });
        }
    });
    row.getTable().redraw(); // 确保视觉上应用修改
}

// 示例数据
var tableData = [
    { id: 1, name: "John Doe", age: 28, gender: "Male" },
    { id: 2, name: "Jane Smith", age: 32, gender: "Female" },
    { id: 3, name: "Billy Bob", age: 44, gender: "Male" },
];

// 表格配置
var table = new Tabulator("#example-table", {
    data: tableData,
    layout: "fitColumns", // 自动适配列宽
    columns: [
        {
            headerSort: false, frozen: true, width:30, minWidth: 30,
            formatter: function (cell) {
                let el = cell.getElement();
                el.style.backgroundColor = "#E0DFE3";
            }
        },
        { title: "ID", field: "id", editable: false },
        { title: "姓名", field: "name", editable: false },
        { title: "年龄", field: "age", editable: false },
        { title: "性别", field: "gender", editable: false },
    ],
    rowClick: function (e, row) {
        console.log('rowClick');
        row.selected();
    },
    rowDblClick: function (e, row) {
        console.log('rowDblClick');
        row.selected();
        setRowEditable(row, true);
    },
});

解决方案 #

问题核心是当所有列设为editable: false时，Tabulator默认禁用行级交互事件，认为行无交互需求，可通过以下两种方式解决：

方法一：开启行选中功能激活事件 #

在表格配置中添加selectable: true，开启行选中的同时自动激活行点击事件：

var table = new Tabulator("#example-table", {
    // 原有配置...
    selectable: true, // 开启行选中，触发行点击事件
    // ...
});

方法二：手动绑定行事件（无需全局选中） #

如果不需要全局行选中功能，可在表格初始化完成后手动绑定点击事件：

table.on("tableBuilt", function(){
    table.getRows().forEach(row => {
        let element = row.getElement();
        // 绑定单击事件
        element.addEventListener("click", function(e){
            row.selected();
            console.log('rowClick');
        });
        // 绑定双击事件
        element.addEventListener("dblclick", function(e){
            row.selected();
            setRowEditable(row, true);
            console.log('rowDblClick');
        });
    });
});

额外优化 #

setRowEditable函数中无需调用redraw()，因为col.updateDefinition会自动触发视图更新，移除该行可提升性能：

function setRowEditable(row, editable) {
    row.getCells().forEach(function (cell) {
        let col = cell.getColumn();
        if (col.isVisible() && col.getField()) {
            col.updateDefinition({ editable: editable });
        }
    });
    // 移除 row.getTable().redraw();
}

内容的提问来源于stack exchange，提问作者FPLS