Tabulator技术问题：如何为可编辑单元格设置CSS样式？

最优方案：使用列配置的cellCss属性 #

直接在列配置中添加cellCss函数，根据单元格的可编辑状态动态返回样式类或内联样式，既不会与lookup格式化器冲突，又能保证性能和样式自动更新。

1. 先定义CSS样式类：

.editable-cell {
  background-color: #1e3b20;
  /* 可按需添加其他样式，比如：
  color: #fff;
  border: 1px solid #2d5a30;
  */
}

2. 修改列配置，加入cellCss：

{
  title:"Title",
  field:"FieldName",
  editor:"list",
  editorParams:{values:{0:"none", 1:"param1", 2:"param2"}},
  formatter:"lookup",
  formatterParams:{0:"none", 1:"param1", 2:"param2"},
  width:120,
  editable:editCheck,
  cellCss:function(cell){
    // 利用Tabulator内置的isEditable()方法判断单元格可编辑状态
    return cell.isEditable() ? "editable-cell" : "";
    // 若无需CSS类，也可直接返回内联样式对象：
    // return cell.isEditable() ? {backgroundColor: "#1e3b20"} : {};
  }
}

方案优势：

• 与lookup格式化器完全兼容，二者独立工作，不会产生冲突
• 性能高效：仅针对当前列的单元格处理，无需遍历所有行/单元格，且Tabulator会在单元格创建、数据更新、可编辑状态变化时自动触发样式更新
• 代码简洁，直接集成在列配置中，易于维护

备选方案：监听单元格事件 #

如果需要更灵活的控制，可通过cellCreated和cellEdited事件来处理样式：

1. 监听cellCreated事件初始化样式：

table.on("cellCreated", function(cell){
  // 仅处理目标列
  if(cell.getField() === "FieldName"){
    const elem = cell.getElement();
    cell.isEditable() ? elem.classList.add("editable-cell") : elem.classList.remove("editable-cell");
  }
});

2. 监听cellEdited事件，当影响可编辑状态的其他单元格变化时更新样式：

table.on("cellEdited", function(cell){
  // 假设影响"FieldName"列可编辑状态的是"OtherField"列
  if(cell.getField() === "OtherField"){
    const targetCell = cell.getRow().getCell("FieldName");
    const elem = targetCell.getElement();
    targetCell.isEditable() ? elem.classList.add("editable-cell") : elem.classList.remove("editable-cell");
  }
});

说明：

这种方案适合需要基于多个外部条件做复杂样式调整的场景，但相比cellCss需要额外编写事件监听逻辑。

内容的提问来源于stack exchange，提问作者loco298