Question

我想显示在制表器中用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类的单元。

<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类应用于单元格。 Tabulator本身似乎没有将一个类应用于可编辑或不可编辑单元格，是否有比单元格格式化程序更好的方法呢？我宁愿不必仅仅为了更改单元格样式而定义格式程序。

Answer 1

您可以使用列定义中的 cssClass 属性将CSS类添加到任何列：

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

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

1 个答案: