制表符 - 禁用特定字段的编辑

Question

我在 Tabulator 中有一个表格，其中所有字段都是可编辑的。 我希望能够在表格加载后打开和关闭不同字段的编辑功能。

我可以隐藏栏目：table.hideColumn("r1"); 但如果我可以禁用编辑，那就太好了。 作为奖励，我还想重新格式化禁用的列（更改背景颜色）

 var table = new Tabulator("#table", {
    height:"90%",
    layout:"fitData",
    ajaxURL:"data.php",
    placeholder:"Data Loading...",
    history:true,
    cellEdited:function(cell){console.log("cell changed: (" + cell.getOldValue() + ") [" + cell.getValue() + "] - field: " + cell.getField() + " - id: " + cell.getRow().getIndex());},
    columns:[
        {title:"id", field:"id", sorter:"number", visible:false},
        {title:"1", field:"r1", sorter:"number", editor:"input"},
        {title:"2", field:"r2", sorter:"number", editor:"input"},
        {title:"3", field:"r3", sorter:"number", editor:"input"},
        {title:"4", field:"r4", sorter:"number", editor:"input"},
        ],
});

非常感谢

修正 - 已添加 fiddle

Answer 1

为了改变 bg 单元格颜色及其字体颜色，请使用：

cell.getElement().style.color= "#ffffff";  //CHANGE CELL WHITE FONT
cell.getElement().style.backgroundColor = "#e68a00"; //CHANGE CELL BG COLOR

在制表符的标题声明中..

要禁用编辑，请尝试使用带有状态的对象数组：假设我们有 3 列并且只希望编辑第 3 列...

var isDisabled=["","","input"];

所以你可以使用：

{title:"1", field:"r1", sorter:"number", editor:isDisabled[0].toString()},
{title:"2", field:"r2", sorter:"number", editor:isDisabled[1].toString()},
{title:"3", field:"r3", sorter:"number", editor:isDisabled[2].toString()}

现在您可以直接在数组中访问这些状态，以更改制表符在运行时的编辑状态！

希望有帮助！

[更新1]

我在 Tabulator 的 Documentation 上找到了这种方法：

var editCheck = function(cell){
    //cell - the cell component for the editable cell

    //get row data
    var data = cell.getRow().getData();

    return data.age > 18; // only allow the name cell to be edited if the age is over 18
}

//in your column definition for the column
{title:"Name", field:"name", editor:"input", editable:editCheck}

您可以在每一列上添加不同的方法，并且可以设置相应的标准。 i 还指出，一旦制表器加载其数据，就无法禁用/启用单元格编辑。但是使用上述方法，您可以在加载数据之前定义编辑能力！

[更新2]

我使用cell.getColumn().getField(); 访问列名以触发 IF 语句

var editCheck = function(cell){

var data = cell.getRow().getData();

if (incomingValue === 0){
   console.log("Enable All");
   return data;
}

if (incomingValue === 2 && cell.getColumn().getField()==="r1"){
   console.log("Disabled col1");
   return data.r1!==incomingValue; //FOR ENABLING EDIT TO OTHER COLUMNS EXCEPT THIS ONE
}

//... Here all IFs for the rest columns

};