Tabulator列表编辑器：实现值与显示分离的策略

// 假设这是从后端获取的教师列表
const teacherList = [
    {"value": "3", "label": "Castillo, Juan"},
    {"value": "4", "label": "Baracus, Mario"},
    {"value": "5", "label": "Smith, John"},
    {"value": "6", "label": "Ingalls, Laura"}
];

// 示例表格数据
var tableData = [
    {id:1, name:"Billy Bob", age:"12", gender:"male", profesorId:"3"}, // 注意这里存储的是ID
    {id:2, name:"Mary May", age:"1", gender:"female", profesorId:"6"},
];

var table = new Tabulator("#example-table", {
    data: tableData, // 设置初始表格数据
    columns: [
        {title: "Name", field: "name"},
        {title: "Age", field: "age"},
        {title: "Gender", field: "gender"},
        {
            title: "Profesor",
            width: 200,
            field: "profesorId", // 存储ID的字段
            editor: "select", // 使用select编辑器
            editorParams: {
                values: teacherList // 编辑器显示这些选项
            },
            formatter: function(cell, formatterParams, onRendered) {
                const value = cell.getValue(); // 获取单元格存储的ID
                if (value) {
                    // 从teacherList中查找匹配ID的标签
                    const teacher = teacherList.find(obj => obj.value == value);
                    return teacher ? teacher.label : ""; // 如果找到，返回标签；否则返回空字符串
                } else {
                    return ""; // 如果没有值，显示为空
                }
            }
        },
    ],
});

table.on("cellEdited", function(cell){
    // cell - 单元格组件
    var rowId = cell.getRow().getData().id; // 获取行ID
    var columnField = cell.getColumn().getField(); // 获取被编辑的列字段名
    var cellValue = cell.getValue(); // 获取单元格的新值 (这里是教授的ID)

    console.log(`行ID: ${rowId}, 列: ${columnField}, 新值 (ID): ${cellValue}`);

    // 此时，cellValue就是教授的ID，可以用于AJAX查询
    // 例如：
    // fetch(`/api/updateProfessor?rowId=${rowId}&profesorId=${cellValue}`)
    //     .then(response => response.json())
    //     .then(data => console.log("更新成功", data))
    //     .catch(error => console.error("更新失败", error));
});