使用Tabulator处理相关数据ID的最佳方法是什么？

Question

使用 制表机如果你有一个'select'编辑器，想让它链接到'男'和'女'的值，但是在男和女的下面是来自另一个物理数据库表的值，id值为1和2（与'行'id不同），什么是最好的方法来做这样的事情？

'select'编辑器有办法指定下拉中的项目显示和选择值的文字显示，但没有地方让选择值的隐藏（不显示）底层ID在保存数据时传递。

我们可以将选择的数据值用div包起来，并在更新时传递一个数据属性，但考虑到Tabulator的工作方式，我们不确定这是最好的选择。我们也可以只传递原始的选择值，然后在服务器上查找它以获得相关的ID，但这似乎是一个很大的开销，并且将服务器和客户端紧密结合在一起，这对于像第三方API这样我们没有服务器控制的东西是行不通的。

任何关于如何最好地处理这样的事情的想法都是值得赞赏的。

Answer 1

选择编辑器允许以多种方式传递值，包括指定项目值和其用户可见的标签

如果你想显示一个与你想存储的值不同的标签，你可以传入一个对象，其中每个属性的键是被选中后将存储的值，而每个属性的值将是列表中显示的标签。

{title:"Name", field:"name", editor:"select", editorParams:{
    values:{
        "steve":"Steve Boberson",
        "bob":"Bob Jimmerson",
        "jim":"Jim Stevenson",
    }
}}

对于更复杂的选项列表，你可以使用一个对象数组，允许你定义选项组和禁用选项。

{title:"Name", field:"name", editor:"select", editorParams:{
    values:[
        { //option group
            label:"Men",
            options:[ //options in option group
                {
                    label:"Steve Boberson",
                    value:"steve",
                },
                {
                    label:"Bob Jimmerson",
                    value:"bob",
                },
            ]
        },
        { //option group
            label:"Women",
            options:[ //options in option group
                {
                    label:"Jenny Jillerson",
                    value:"jenny",
                },
                {
                    label:"Jill Betterson",
                    value:"jill",
                },
            ]
        },
        {//ungrouped option
            label:"Other",
            value:"other",
        },
    ]
}}

关于如何使用这个编辑器的完整细节，请查看以下内容 编辑文档

Answer 2

终于想明白了。你需要使用lookup formatter来显示文本值，使用与选择编辑器相同的参数。这一点并不明显，因为在文档中没有一个选择编辑器的例子显示它的使用。总之，这里有一个简单的例子，从两个方向展示它。当然，你会想把数据抽象出来，而不是字面上的复制，但这里为了帮助显示字面的使用，它被复制了。

{
    title:"Example", 
    field:"example",
    editor: "select",
    editorParams:{
        "1": "Cute",
        "2": "Fine",
        "3": "Scary",
    },
    formatter:"lookup", // display option, but store value
    formatterParams:{
        "1": "Cute",
        "2": "Fine",
        "3": "Scary",
    }
}