制表符 - 更改行选择列中复选框的样式

如何解决制表符 - 更改行选择列中复选框的样式

我想更改制表符行选择列中的复选框样式。我正在为 css 使用 bootstrap 4。我正在尝试通过 jquery 将自定义 css 类添加到复选框，但没有运气。

        var table = new Tabulator("#job_openings_table_wrapper",{
          data: tableData,selectable: true,height: "420px",pagination: "local",paginationSize: 10,paginationSizeSelector: [10,20,50,100],footerElement:
            "<div id='record-count-container' class='table-footer-element'><label>Total Records:</label><span id='record-count' class='ml-1'>#</span></div><div id='selected-record-count-container' class='table-footer-element'><label>Selected:</label><span id='selected-record-count' class='ml-1'>#</span></div>",dataFiltered: update_record_count,dataLoaded: update_record_count,rowSelectionChanged: update_selected_record_count,rowContextMenu: rowContextMenuBuilder,columns: [
            {
              formatter: "rowSelection",titleFormatter: "rowSelection",align: "center",headerSort: false,},{ title: "Job ID",field: "job_id" },{ title: "Position",field: "position" },{ title: "Employment Type",field: "employment_type" },{ title: "Hiring Department",field: "hiring_department" },{ title: "Created On",field: "created_on" },{ title: "Status",field: "status" },],});

        $(":checkBox").wrap("<div class='custom-control custom-checkBox'></div>");
        $(':checkBox').addClass('custom-control-input');

解决方法

这行不通，因为 Tabulator 使用虚拟 DOM，这意味着当前只有实际可见的行的元素存在，当用户滚动或更改页面时会创建和销毁行。

这意味着您无法安全地从表格外部操作表格内容。

好消息是，Tabulator 已经提供了一种向单元格添加类的方法，它应该可以满足您的需求。然后，您可以调整您的选择器以使用此类处理单元格内的输入。

在行选择列的列定义中，您需要添加 cssClass 属性，在本例中，我们将其设置为使用“custom-checkbox-cell”类：

{
    formatter: "rowSelection",titleFormatter: "rowSelection",align: "center",headerSort: false,cssClass:"custom-checkbox-cell",},

然后您可以使用以下 CSS 选择器设置复选框样式：

.custom-checkbox-cell input{
    border:2px solid blue; //add a blue border to the checkbox
}