动态添加和删除制表网格单元格中的 css 类

Question

我想“选择”使用制表器网格创建的表中的一列。我想要实现的是将 css 类添加到选定的列：

我尝试通过添加 cellClick 函数来做到这一点（请参阅代码片段）。我能够更改单元格元素 html 样式并更改颜色。但我想添加一个 css 类：“column-selected”到所选列中的每个单元格。我还想知道是否有比添加 onCellClick 函数更优雅的解决方案？

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"},
];


var table = new Tabulator("#example-table", {
     data:tabledata, //assign data to table
     columns:[ //Define Table Columns
        {title:"Name", field:"name"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob"},
    ],
    columnDefaults:{
        cellClick:function(e, cell){
            cell.getColumn().getCells().forEach(function(cell){
               cell.getElement().style.color = "#A6A6DF";
            })
        },
    },
});

.column-selected {
  color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"/>
   <script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div> 

</body>
</html>

Answer 1

您可以使用

getColumn().updateDefinition({cssClass: "column-selected"})

：

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"},
];


var table = new Tabulator("#example-table", {
     data:tabledata, //assign data to table
     columns:[ //Define Table Columns
        {title:"Name", field:"name"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob"},
    ],
    columnDefaults:{
        cellClick:function(e, cell){
          cell.getColumn().updateDefinition({cssClass: "column-selected"});
        },
    },
});

.column-selected {
  color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"/>
   <script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div> 

</body>
</html>

动态添加和删除制表网格单元格中的 css 类

问题描述投票：0回答：1

1个回答

最新问题

动态添加和删除制表网格单元格中的 css 类

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1