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"},
        ],
});

非常感谢

AMEND-添加了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()}

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

希望有帮助！

[UPDATE1]

我在制表人的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}

您可以在每列上添加不同的方法，并可以设置相应的条件。我还注意到，制表符一旦加载其数据，就无法禁用/启用单元格编辑。但是，通过上述方法，您可以在加载数据之前定义可编辑性！

[UPDATE2]

我正在使用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

};

制表符-禁止编辑特定字段

1 个答案: