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

Question

我想更改制表符行选择列中的复选框样式。我正在为 CSS 使用引导程序 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');

Answer 1

这不起作用，因为 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
}