将 JSON 数据添加到表格每个单元格的下拉菜单中 (Tabulator.js)答案

【问题标题】：Add JSON data to a dropdown menu in every cell of the table (Tabulator.js)将 JSON 数据添加到表格每个单元格的下拉菜单中 (Tabulator.js)
【发布时间】：2020-03-28 13:54:05
【问题描述】：

我对 tabulator.js 有点陌生，但到目前为止，它很棒，但我有一个问题。我有一个包含一些客户端的 JSON 文件。这是数据：

{
  "clients": [
    {
      "city": "Brussels",
      "email": "benoit@gmail.com",
      "firstName": "Benoit",
      "idClient": 1,
      "lastName": "Dupont",
      "mailBox": "6",
      "phoneNumber": "0465237956",
      "postCode": "1200",
      "street": "Clos Chapelle-aux-Champs",
      "streetNumber": "43"
    }
  ]
}

目前只有一个客户端，但将来会更多地添加到此 json 数据中。因此，我想在“客户端”列的每一行中添加一个下拉菜单，如下面的屏幕截图所示。 https://ibb.co/8zH8S26

（链接到我的截图）

我尝试按照 Tabulator.js 的文档处理此事，但我似乎无法使用 JSON 数据在我的代码中很好地实现它

var table = new Tabulator("#test", {
    data: response.users,
    index: "idUser",
    layout: "fitColumns",
    responsiveLayout: "hide",
    tooltips: true,
    addRowPos: "top",
    pagination: "local",
    paginationSize: 7,
    movableColumns: true,
    resizableRows: true,
    columns: [
        {title: "Registration Date", field: "registrationDate", formatter: dateFormatter},
        {title: "Worker", field: "worker", formatter: "tickCross", editor: true},
        {title: "First Name", field: "firstName"},
        {title: "Last Name", field: "lastName"},
        {title: "Username", field: "username"},
        {title: "Email", field: "email"},
        {title: "City", field: "city"},
        {
            title: "Client", editor: "select", editorParams: {
                values: {
                    // TODO INSERT THE VALUES OF THE JSON DATA HERE
                }
            }
        },
        {
            title: "", formatter: buttonTest, cellClick: function (e, cell) {
                const data = {
                    user: cell.getRow().getData().idUser,
                    worker: cell.getRow().getData().worker
                };

                updateData("users/" + data.user.idUser, data, token, function (response) {
                    console.log(response);
                }, function (response) {
                    console.log(response.error);
                })
            }
        }
    ],
});

https://ibb.co/TqqMqK1

（代码图片链接）

从下拉列表中选择选项后，我想记住所选客户端的 ID。

我几乎尝试了所有方法，但没有任何效果。你能帮我么？请不要犹豫，说明您的解决方案（我是视觉学习者）。

【问题讨论】：

标签： javascript json drop-down-menu tabulator

【解决方案1】：

我使用以下代码做了类似的事情：-

let clientSel={}
window.JQuery.ready(function(){
    // first create a json client list  
    let jsonStr = "[{'rid':'A01','desc':'client 1'}, {'ri'B01','desc':'client 2'}]"  
    let retJSON = JSON.parse(jsonStr)
    // create the cleinSel object from the json
    $(retJSON).each(index => {
        var key = retJSON[index].rid;
        var val = retJSON[index].desc 
        clientSel[key]=val;
    });
});


columns = [
    {title:"Client", field:"client",editor:"select", editorParams:function(cell){
        //create a options list of all values from another column in the table
        var rows = clientSel;
        return {values:rows};}, formatter:"lookup", formatterParams:function(){
            return clientSel},
    }
]

希望这会有所帮助。

【讨论】：