Добавьте данные JSON в раскрывающееся меню в каждой ячейке таблицы (Tabulator. js) - PullRequest
Новая
       19

Добавьте данные JSON в раскрывающееся меню в каждой ячейке таблицы (Tabulator. js)

1 голос
/ 28 марта 2020

Я немного новичок в табуляторе. 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 data `var table = new Tabulator (" # test ", {data: response.users, index:" idUser ", layout:" fitColumns ", responseiveLayout:" hide ", подсказки: true, addRowPos: "top", нумерация страниц: "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

(ссылка на изображение кода)

После того, как выбран вариант из раскрывающегося списка, я хочу запомнить идентификатор выбранного клиента.

У меня есть перепробовал почти все, и ничего не работает. Можете ли вы помочь мне? Пожалуйста, не стесняйтесь проиллюстрировать ваше решение (я визуальный ученик).

Большое спасибо заранее

1 Ответ

1 голос
/ 04 апреля 2020

Я сделал нечто подобное, используя следующий код: - 

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

Надеюсь, это поможет.

...