Tabulator：如何将第一列排除在可选范围之外？

之前用rangeChanged事件事后修正选中范围导致闪烁，核心原因是这个事件是选中状态渲染完成后才触发——先显示了包含首列的选中效果，再修改范围，自然会出现视觉跳动。正确思路是从源头拦截，不让首列被纳入选中范围。

直接利用Selectable Range模块的两个前置验证配置项，在选中动作发生前就阻止首列被选中：

• rangeStartValidator：验证选中起始位置是否合法
• rangeMoveValidator：验证选中范围扩展/移动时的位置是否合法

具体代码实现 #

var table = new Tabulator("#example-table", {
    // 其他表格基础配置
    selectableRange:{
        enabled:true,
        // 阻止从首列发起选中操作
        rangeStartValidator:function(cell){
            // 首列索引为0，返回false表示不允许在此列开始选中
            return cell.getColumn().getIndex() !== 0;
        },
        // 阻止选中范围扩展到首列
        rangeMoveValidator:function(currentRange, newCell){
            // 新选中单元格是首列时，返回false阻止扩展
            if(newCell.getColumn().getIndex() === 0){
                return false;
            }
            return true;
        }
    },
    columns:[
        {title:"不可选标签", field:"label", width:150}, // 首列
        {title:"可编辑列1", field:"col1", editor:"input"},
        {title:"可编辑列2", field:"col2", editor:"input"},
        // 其他列配置
    ]
});

补充说明 #

1. 这两个验证函数在选中动作触发前执行，完全不会出现先选中再修正的闪烁问题；
2. 若需覆盖快捷键选中场景，可额外监听keydown事件拦截相关操作，但上述配置已能覆盖绝大多数鼠标选中场景；
3. 确保你的Tabulator版本为v5.0及以上（这两个配置项从该版本开始支持）。

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