Tabulator列表编辑器：实现单元格显示标签，后台使用ID的教程-js教程-PHP中文网

Tabulator列表编辑器：实现单元格显示标签，后台使用ID的教程

DDD

发布： 2025-10-03 11:54:11

原创

212人浏览过

Tabulator列表编辑器：实现单元格显示标签，后台使用ID的教程

本教程旨在解决Tabulator表格中列表编辑器（如选择器）的常见需求：在单元格中显示易读的标签，但实际存储并用于后台操作的是对应的ID值。我们将通过结合Tabulator的editorParams配置和自定义formatter函数，详细讲解如何实现这一功能，确保数据存储的准确性与用户界面的友好性。

1. 问题背景与挑战

在使用tabulator的列表或选择器编辑器时，一个常见场景是用户从下拉列表中选择一个选项，我们希望在表格单元格中显示该选项的文本标签（例如“张三老师”），但在数据层面（例如提交到后端数据库或进行其他逻辑处理时）却需要使用该选项对应的唯一标识符（例如“教师id: 101”）。

Tabulator的默认行为是，当使用editor: "select"或editor: "list"并提供value-label对时，单元格在编辑完成后会直接显示选中的value。这与我们期望显示label的需求相悖。例如，原始代码中，profesor列的编辑器虽然提供了value和label，但编辑后单元格显示的是value（如"3"或"4"），而非label（如"Castillo, Juan"）。

// 原始问题中的部分代码
{
    title:"Profesor",
    width:200,
    field:"profesor", // 此处profesor字段将存储ID
    editor:"list",
    editorParams:{
        valuesLookup:function(cell, filterTerm){
            return [
                {"value":"3","label":"Castillo, Juan"},
                {"value":"4","label":"Baracus, Mario"}
            ];
        },
        itemFormatter:function(label, value, item, element){
            // itemFormatter用于格式化下拉列表中的单个选项，而非单元格显示
            return "<strong>" + label + " </strong><br/><div>" + item.value + "</div>";
        }
    }
}

登录后复制

此外，cellEdited事件回调中获取到的cellValue也是存储的value（ID），这部分是符合预期的，因为我们需要用它来执行后续操作（如AJAX查询）。挑战在于如何让单元格显示label，同时不影响cellEdited获取value。

2. 解决方案：结合 formatter 和 editorParams

解决此问题的关键在于利用Tabulator的两个核心功能：

editorParams.values (或 valuesLookup)：用于向编辑器提供value-label映射的数据源。
formatter 函数：用于控制单元格的显示内容。它会在单元格渲染时，根据单元格存储的实际值（ID），查找并显示对应的标签。

2.1 准备数据源

首先，我们需要一个包含所有选项value和label映射的列表。这个列表应该在Tabulator初始化时可访问，供editorParams和formatter共同使用。

// 定义教师列表，包含value和label
const teacherList = [
    {"value":"3","label":"Castillo, Juan"},
    {"value":"4","label":"Baracus, Mario"},
    {"value":"5","label":"Smith, John"}, // 假设有更多教师
    {"value":"6","label":"Ingalls, Laura"}
];

// 初始表格数据，profesor字段存储的是教师ID
var tableData = [
    {id:1, name:"Billy Bob", age:"12", gender:"male", profesor:"3"},
    {id:2, name:"Mary May", age:"1", gender:"female", profesor:"6"},
];

登录后复制

2.2 配置列定义

在列定义中，我们将对profesor列进行以下修改：

Veed Video Background Remover

Veed推出的视频背景移除工具

查看详情

field: 仍然指向存储ID的字段（例如"profesor"）。
editor: 使用"select"或"list"。
editorParams:
- values: 直接传入我们准备好的teacherList。如果需要动态加载，可以使用valuesLookup函数，但最终返回的格式应与teacherList相同。
formatter: 这是最关键的部分。它是一个函数，接收cell、formatterParams等参数。在这个函数中，我们获取单元格的当前值（即存储的ID），然后遍历teacherList查找对应的label并返回。

{
    title:"Profesor",
    width:200,
    field:"profesor", // 存储教师ID
    editor:"select", // 可以使用"select"或"list"
    editorParams: {
        values: teacherList // 将教师列表传递给编辑器
    },
    formatter:function(cell, formatterParams, onRendered) {
        const cellValue = cell.getValue(); // 获取单元格存储的ID
        if (cellValue) {
            // 在teacherList中查找匹配的label
            const teacher = teacherList.find(obj => obj.value == cellValue);
            return teacher ? teacher.label : ""; // 如果找到则返回label，否则返回空字符串
        } else {
            return ""; // 如果单元格没有值，则显示空
        }
    }
}

登录后复制

通过这种配置，当Tabulator渲染表格时，profesor列会使用formatter函数来决定显示内容。formatter会根据单元格存储的ID（如"3"），在teacherList中找到对应的label（"Castillo, Juan"），然后显示出来。当用户点击单元格进行编辑时，editor会使用editorParams.values提供的列表，让用户选择。用户选择后，编辑器会将对应的value（ID）存储回profesor字段。

2.3 cellEdited 事件的处理

cellEdited事件仍然会接收到单元格的实际存储值（即ID），这正是我们进行后续操作（如AJAX更新数据库）所需的。

table.on("cellEdited", function(cell){
    var rowData = cell.getRow().getData();
    var colField = cell.getColumn().getField();
    var cellValue = cell.getValue(); // 这里获取到的是存储的ID，例如"3"

    console.log(`单元格 [${rowData.id}, ${colField}] 已编辑。显示标签: ${cell.getValue()}, 实际存储值 (ID): ${cellValue}`);
    // 此时，cellValue就是我们需要的ID，可以用于AJAX请求
    // 例如：sendAjaxUpdate(rowData.id, colField, cellValue);
});

登录后复制

3. 完整示例代码

以下是一个完整的Tabulator示例，演示了如何实现单元格显示标签，后台使用ID的功能。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Tabulator 列表编辑器：显示标签，存储ID</title>
    <link href="https://unpkg.com/tabulator-tables@5.5.0/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.5.0/dist/js/tabulator.min.js"></script>
</head>
<body>
    <div id="example-table"></div>

    <script type="text/javascript">
        // 1. 定义教师列表，包含value和label
        const teacherList = [
            {"value":"3","label":"Castillo, Juan"},
            {"value":"4","label":"Baracus, Mario"},
            {"value":"5","label":"Smith, John"},
            {"value":"6","label":"Ingalls, Laura"}
        ];

        // 2. 初始表格数据，profesor字段存储的是教师ID
        var tableData = [
            {id:1, name:"Billy Bob", age:"12", gender:"male", profesor:"3"},
            {id:2, name:"Mary May", age:"1", gender:"female", profesor:"6"},
            {id:3, name:"John Doe", age:"25", gender:"male", profesor:"5"},
        ];

        // 3. 初始化Tabulator表格
        var table = new Tabulator("#example-table", {
            data:tableData, // 设置初始数据
            layout:"fitColumns", // 自动调整列宽以适应表格宽度
            columns:[
                {title:"ID", field:"id", width:50},
                {title:"姓名", field:"name"},
                {title:"年龄", field:"age"},
                {title:"性别", field:"gender"},
                {
                    title:"教授",
                    width:200,
                    field:"profesor", // 此字段存储教师ID
                    editor:"select", // 使用选择器编辑器
                    editorParams: {
                        values: teacherList // 将教师列表传递给编辑器
                    },
                    formatter:function(cell, formatterParams, onRendered) {
                        const cellValue = cell.getValue(); // 获取单元格存储的ID
                        if (cellValue) {
                            // 在teacherList中查找匹配的label
                            const teacher = teacherList.find(obj => obj.value == cellValue);
                            return teacher ? teacher.label : ""; // 如果找到则返回label，否则返回空字符串
                        } else {
                            return ""; // 如果单元格没有值，则显示空
                        }
                    }
                },
            ],
        });

        // 4. 监听单元格编辑事件
        table.on("cellEdited", function(cell){
            var rowData = cell.getRow().getData();
            var colField = cell.getColumn().getField();
            var cellValue = cell.getValue(); // 这里获取到的是存储的ID

            console.log(`单元格 [行ID: ${rowData.id}, 列: ${colField}] 已编辑。`);
            console.log(`单元格显示标签: ${cell.getElement().innerText}`); // 获取单元格实际显示的文本
            console.log(`实际存储值 (ID): ${cellValue}`);

            // 在这里可以进行AJAX请求，将rowData.id, colField, cellValue发送到后端
            // alert(`更新数据：行ID=${rowData.id}, 列=${colField}, 新值=${cellValue}`);
        });

    </script>
</body>
</html>

登录后复制

4. 注意事项与总结

数据源一致性：确保editorParams.values（或valuesLookup返回的数据）和formatter函数所依赖的数据源是相同的。如果数据源是动态加载的，请确保在两者需要时都能访问到最新的数据。
formatter的鲁棒性：在formatter函数中添加对cellValue不存在或find方法未找到匹配项的检查，以避免潜在的错误。例如，teacher ? teacher.label : ""。
性能考量：如果teacherList非常庞大，formatter中的find操作可能会影响性能。对于极端情况，可以考虑将teacherList转换为一个Map对象（new Map(teacherList.map(item => [item.value, item.label]))），这样查找效率更高。
itemFormatter与formatter的区别：
- itemFormatter是editorParams的一部分，用于自定义下拉列表中每个选项的显示方式。
- formatter是列定义的一部分，用于自定义单元格在非编辑状态下的显示方式。
- 本教程主要关注formatter来解决单元格显示标签的问题。