Tabulator.js：列表数据源变更后如何更新编辑器下拉列表

在JavaScript中使用Tabulator.js表格时，通过对象数组nameList给list编辑器提供下拉选项。当后台修改该数组后，需要让下拉菜单同步使用更新后的值，该如何操作？

原代码示例：

var nameList=[{
        label:"Steve Boberson",
        value:"steve",
    },
    {
        label:"Bob Jimmerson",
        value:"bob",
    },
    {
        label:"Jenny Jillerson",
        value:"jenny",
    },
    {
        label:"Jill Betterson",
        value:"jill",
    }];

var table = new Tabulator("#my-table", {
data:policy, 
columns:[
    // 其他列配置
    {title:"Test", field:"Test", width:100, editor:"list", 
      headerSort:false,headerFilter:"input", editable:editCheck, 
      editorParams:{values:nameList, filterDelay:1000,allowEmpty:true,listOnEmpty:true,freetext:false,multiselect:false,autocomplete:true}
    },  
    // 其他列配置
], 
// 其他表格配置
});

方法1：直接更新列定义并刷新列 #

修改完nameList后，通过Tabulator的API获取目标列，更新其editorParams.values配置，再刷新列使修改生效：

// 后台修改nameList，示例：新增选项
nameList.push({
    label:"New User",
    value:"newuser"
});

// 获取目标列
var testColumn = table.getColumn("Test");
// 更新列的editorParams配置
testColumn.updateDefinition({
    editorParams:{
        values:nameList,
        // 保留原editorParams的其他配置项
        filterDelay:1000,
        allowEmpty:true,
        listOnEmpty:true,
        freetext:false,
        multiselect:false,
        autocomplete:true
    }
});

// 刷新列让配置生效
table.refreshColumn("Test");

方法2：复用原配置对象简化操作 #

如果不想重复写所有editorParams配置，可以直接获取列的当前定义，修改其中的values引用：

// 修改nameList，示例：替换整个数组
nameList = [
    {label:"Updated User1", value:"user1"},
    {label:"Updated User2", value:"user2"}
];

var testColumn = table.getColumn("Test");
var columnDef = testColumn.getDefinition();
// 直接更新values引用
columnDef.editorParams.values = nameList;
// 更新列定义
testColumn.updateDefinition(columnDef);
// 刷新列
table.refreshColumn("Test");

注意事项 #

• 若修改nameList时是重新赋值新数组（而非修改原数组内容），必须同步更新editorParams.values的引用，否则下拉列表不会变化。
• 如果是远程异步加载新的选项列表，只需在获取到新数据后执行上述更新步骤即可。

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