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

Question

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

        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

这不起作用，因为制表器使用虚拟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
}