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

Question

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

        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，这意味着当前只有实际可见的行的元素存在，这些行在用户滚动或更改页面时创建和销毁。

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

好消息是，Tabulator 已经提供了一种向单元格添加 class 的方法，这应该可以满足您的需要。然后你可以调整你的选择器来处理单元格内的输入 class.

在行选择列的列定义中，您需要添加 cssClass 属性，在这种情况下，我们将其设置为使用“custom-checkbox-cell”class:

{
    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
}

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

Tabulator - Change style of checkbox within the row selection column

tabulator