使用 Tabulator 处理相关数据 id 的最佳方法是什么答案

【问题标题】：Whats the best way to handle related data ids using Tabulator使用 Tabulator 处理相关数据 id 的最佳方法是什么
【发布时间】：2020-05-16 12:07:56
【问题描述】：

使用Tabulator，如果您有一个“选择”编辑器并希望它链接到值“男性”和“女性”，但在男性和女性下方是来自另一个物理数据库表的值，其 id 值为 1 和 2（与“行”ID不同），做这样的事情的最好方法是什么？

“选择”编辑器可以指定下拉列表中项目的显示以及所选值的文字显示，但在保存数据。

我们可以使用选择值 id 的数据属性将选择数据值包装在 div 中，然后在更新时将其传递，但考虑到 Tabulator 的工作原理，不确定这是最佳选择。我们也可以只传递原始选择值，然后在服务器上查找它以获取关联的 ID，但这似乎有很多开销，并且将服务器与客户端紧密耦合，这对于像 3rd 这样的东西是行不通的我们没有服务器控制的派对 API。

感谢您对如何最好地处理此类事情的任何想法！

【问题讨论】：

标签： tabulator

【解决方案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",
        },
    ]
}}

有关如何使用此编辑器的完整详细信息，请查看Editor Documentation

【讨论】：

我阅读了您复制和粘贴的文档，但它们没有提及如何存储/传递值的 ID。如果您将 Steve 的值设置为 1，那么它将显示什么。我们希望 Steve 在 drop drop 和网格中显示，但我们希望在保存选择时将 Steve 的 ID 作为值传递。
您可以为在数据库之间来回发送的内容和显示的标签使用一个值。类似于 select HTML 元素中使用的选项。您是否正在尝试做一些更复杂的事情？您尝试做的事情的可编辑示例是最好的，即使它不在 Tabulator 内。 jsfiddle 是我通常推荐的。它有助于了解您的问题。

【解决方案2】：

终于想通了。您需要使用查找格式化程序使用与选择编辑器相同的参数来显示文本值。这并不明显，因为文档中的选择编辑器示例都没有显示使用它。无论如何，这是一个简单的例子，它在两个方向上都显示出来。当然，您可能希望将数据抽象出来，而不是从字面上复制它，但为了帮助展示字面意义，它被复制了：

{
    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",
    }
}

【讨论】：