为Tabulator表格选中列动态添加/移除CSS类的实现方案

一、修改现有cellClick逻辑实现类名添加 #

你当前通过cellClick直接修改单元格样式的方式，可以改成操作DOM类名来达成需求，同时建议添加清除其他列选中状态的逻辑，避免多列同时高亮：

var table = new Tabulator("#example-table", {
    data: tabledata,
    columns: [
        {title:"Name", field:"name"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob"},
    ],
    columnDefaults:{
        cellClick:function(e, cell){
            // 先移除所有列的选中类
            table.getColumns().forEach(col => {
                col.getCells().forEach(cell => {
                    cell.getElement().classList.remove("column-selected");
                });
            });
            // 给当前点击列的所有单元格添加类
            cell.getColumn().getCells().forEach(function(cell){
                cell.getElement().classList.add("column-selected");
            });
        },
    },
});

二、更优雅的实现方案：监听表头点击 #

相比点击单元格，用户更习惯点击表头来选中列，用headerClick事件更符合常规交互逻辑，同时可以维护一个选中列的引用，实现点击同一表头取消选中的切换效果：

let selectedCol = null; // 存储当前选中的列

var table = new Tabulator("#example-table", {
    data: tabledata,
    columns: [
        {title:"Name", field:"name"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob"},
    ],
    headerClick:function(e, column){
        // 如果点击的是已选中的列，取消选中
        if(selectedCol === column){
            column.getCells().forEach(cell => {
                cell.getElement().classList.remove("column-selected");
            });
            selectedCol = null;
        } else {
            // 先移除之前选中列的类
            if(selectedCol){
                selectedCol.getCells().forEach(cell => {
                    cell.getElement().classList.remove("column-selected");
                });
            }
            // 给当前列添加选中类
            column.getCells().forEach(cell => {
                cell.getElement().classList.add("column-selected");
            });
            selectedCol = column;
        }
    },
});

完整代码示例 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
   <link href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator.min.css" rel="stylesheet"/>
   <script src="https://unpkg.com/tabulator-tables@5.5.2/dist/js/tabulator.min.js"></script>
   <style>
       .column-selected {
         color: red;
       }
   </style>
</head>
<body>
<div id="example-table"></div> 
</body>
</html>

JavaScript #

var tabledata = [
    {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
    {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
    {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
];

let selectedCol = null;

var table = new Tabulator("#example-table", {
    data: tabledata,
    columns: [
        {title:"Name", field:"name"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob"},
    ],
    headerClick:function(e, column){
        if(selectedCol === column){
            column.getCells().forEach(cell => cell.getElement().classList.remove("column-selected"));
            selectedCol = null;
        } else {
            if(selectedCol){
                selectedCol.getCells().forEach(cell => cell.getElement().classList.remove("column-selected"));
            }
            column.getCells().forEach(cell => cell.getElement().classList.add("column-selected"));
            selectedCol = column;
        }
    },
});

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