Tabulator 5.4版本list编辑器点击清空值问题求助

使用Tabulator 5.4版本的list编辑器时遇到两个问题：

• 点击单元格会直接清空原有值
• 打开值列表后点击别处取消编辑，单元格会显示空白值

我的单元格值不在预设的选项列表中，仅使用基础select功能（未启用autocomplete编辑器），需要实现未选择新值时保留单元格原有值，不被更新的效果。

示例代码如下：

new Tabulator("#example-table", {
columns:[  
        {formatter:"rownum", headerSort:false, hozAlign:"center", width:10 },
        {title:"Status", field:"status", width: 100, 
            editor:"list", 
            validator:function(cell,value){
                if(value.trim() == ""){
                    return false;
                } else {
                    return true;
                }
            },              
            editorParams:{ values:["ACCEPTED","REJECTED"],},
            editable: editCheckstatus
        },
  ],
})

解决方案 #

方法1：通过onCancel事件恢复原始值

在editorParams中添加onCancel回调，当取消编辑时手动将单元格值重置为编辑前的原始值，避免空白值出现：

editorParams:{ 
    values:["ACCEPTED","REJECTED"],
    onCancel: function(cell){
        cell.setValue(cell.getOldValue());
    }
},

方法2：动态将当前值加入选项列表

由于list编辑器无法识别不在预设选项中的值，会导致打开编辑时显示空白。可以在编辑器初始化时，临时将单元格当前值加入选项列表，确保编辑时能显示原有值，同时结合onCancel事件保障取消编辑时的值保留：

editor:"list",
editorParams:function(cell){
    let currentValue = cell.getValue();
    let values = ["ACCEPTED","REJECTED"];
    // 若当前值不在预设选项中，临时加入
    if(!values.includes(currentValue)){
        values.push(currentValue);
    }
    return {
        values: values,
        onCancel: function(cell){
            cell.setValue(cell.getOldValue());
        }
    };
},

这两种方法都能实现未选择新值时保留单元格原有值的预期效果。

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