將 JSON 數據添加到表格每個單元格的下拉菜單中 (Tabulator.js)

Question

我對 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。

我幾乎嘗試了所有事情，但沒有任何效果。 你能幫我么？ 請不要猶豫說明您的解決方案（我是一個視覺學習者）。

Answer 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},
    }
]

希望這可以幫助。