更改 Tabulator 中只读单元格的样式

Question

我想显示在 Tabulator 中定义的列 editor: false 与启用编辑的单元格不同。

我目前有这样定义的列：

  this.tabAuthorizations = new Tabulator('#myTab', {
  data: data,
  columns: [
    // 0
    {
      title: 'Id',
      field: 'Id',
      visible: false
    },
    {
      title: 'User',
      field: 'UserId',
      formatter: (c) => {
        return directReports.find(x => x.EmployeeListID === c.getValue()).EmployeeName;
      },
      editor: false
    }, {
      title: 'Type',
      field: 'AuthTypeId',
      formatter: c => {
        return authTypes.find(x => x.AuthTypeId === Number(c.getValue())).AuthType;
      },
      editor: 'autocomplete',
      editorParams: {
        showListOnEmpty: true,
        values: authTypes.reduce((a, c) => Object.assign( {[c.AuthTypeId]: c.AuthType}, a), {})
      }
    },
    // etc
    ]
});

目前这会生成应用了相同 css classes 的单元格。

<div class="tabulator-cell" role="gridcell" style="width: 542px; height: 28px;" tabulator-field="TaskListID" title="">My readonly field<div class="tabulator-col-resize-handle"></div><div class="tabulator-col-resize-handle prev"></div></div>

我想根据列定义中 editor: 的设置对单元格应用 -readonly 或 -editable class。 Tabulator 本身似乎没有将 class 应用于可编辑或不可编辑的单元格，除了单元格格式化程序之外，还有更好的方法吗？我宁愿不必为了更改单元格样式而定义格式化程序。

Answer 1

您可以将 CSS class 添加到具有 cssClass 属性的任何列在列定义中：

{
      title: 'Type',
      field: 'AuthTypeId',
      cssClass: 'editable', //add custom css class to cell
}

更改 Tabulator 中只读单元格的样式

Change style of readonly cells in Tabulator

tabulator