Spring Boot中Tabulator表格单个单元格选中功能实现求助

问题场景 #

在Spring Boot项目中使用Tabulator表格，需要实现单个formatter为textarea的单元格选中高亮，但设置selectableRows: false时，点击单元格无高亮效果，官方文档仅提及范围选择相关配置。

当前配置代码：

var table = new Tabulator("#main_table", {
    groupHeader: function(value, count, data, group){
        return value + "<span style='color:black; margin-left:10px;'>(" + count + ")</span>";
    },
    groupHeaderPrint: function(value, count, data, group){
        return value + "<span style='color:black; margin-left:10px;'></span>";
    },
    resizableRows:true,
    footerElement:"<button>Добавить мероприятие</button>",
    autoResize:true,
    placeholder:"Нет данных",
    layout:"fitColumns",
    selectableRows:false,
    //selectableCells:true,
    //selectableRowsRangeMode:"click",
    groupBy:"dateweek",
    columns: table_columns
});

解决方案 #

1. 启用单元格选择配置 #

打开selectableCells: true配置，该配置与selectableRows: false兼容，仅开启单元格选中能力，不会触发行选中：

var table = new Tabulator("#main_table", {
    // 原有配置...
    selectableRows:false,
    selectableCells:true, // 启用单元格选择
    // 原有配置...
});

2. 自定义选中样式 #

Tabulator默认的单元格选中样式可能受行选择配置影响，添加自定义CSS来强制高亮选中的单元格：

.tabulator-cell.custom-cell-selected {
    background-color: #cceeff !important;
    border: 1px solid #4da6ff !important;
    outline: none;
}

3. 处理textarea单元格的焦点冲突 #

由于textarea本身会获取焦点，需要为其绑定点击事件，确保点击textarea时也触发单元格选中逻辑：
在列配置中针对textarea类型的列添加cellCreated事件：

columns: [
    // 其他列配置...
    {
        title: "你的列标题",
        field: "对应字段名",
        formatter: "textarea",
        cellCreated: function(cell) {
            const textarea = cell.getElement().querySelector('textarea');
            textarea.addEventListener('click', function(e) {
                e.stopPropagation();
                // 移除所有单元格的选中样式
                table.getCells().forEach(c => c.getElement().classList.remove('custom-cell-selected'));
                // 给当前单元格添加选中样式
                cell.getElement().classList.add('custom-cell-selected');
            });
        }
    }
    // 其他列配置...
]

4. 全局单元格点击事件（可选） #

如果需要所有单元格点击都触发选中，可添加全局cellClick事件：

var table = new Tabulator("#main_table", {
    // 原有配置...
    cellClick: function(e, cell) {
        // 移除所有单元格的选中样式
        table.getCells().forEach(c => c.getElement().classList.remove('custom-cell-selected'));
        // 给当前单元格添加选中样式
        cell.getElement().classList.add('custom-cell-selected');
    },
    // 原有配置...
});

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