Как программно изменить значение ячейки для программно вставленной строки в Табуляторе? - PullRequest
Новая
       18

Как программно изменить значение ячейки для программно вставленной строки в Табуляторе?

0 голосов
/ 26 мая 2020

Я понял, как программно скопировать и вставить новую строку в мою Tabulator таблицу, используя щелчок правой кнопкой мыши и свойство rowContextMenu; однако у меня возникают трудности с программным изменением данных в ячейках недавно вставленной строки.

Сокращенная версия моего кода настройки таблицы Tabulator выглядит следующим образом: 

function TabulatorTimeSheet(divId) {
    try {
        var myActionContextMenu = [
            {
                label: "Copy & Paste Row",
                action: function (e, row) {
                    var myTable = row.getTable();
                    var rowData = row.getData();
                    var idx = 0;
                    myTable.addData(rowData, false)
                        .then(function (newRows) {
                            //NOTE: The [Added] column of the new row needs to be set to "true".
                            newRows.forEach(newRow => {
                                idx = newRow.getPosition(true);
                                myTable.updateRow(idx, { Added: "true" });
                            });
                            myTable.redraw(true);
                        })
                }
            }
        ]
        var table = new Tabulator(divId, {
            height: "100%",
            data: [],
            layout: "fitDataFill",
            selectable: 1,
            cellEdited: function (cell) {
                    var myTable = cell.getTable();
                    var row = cell.getRow();
                    var rowData = row.getData();
                    rowData["Changed"] = "true";
            },
            rowContextMenu: myActionContextMenu,
            columns: [
                { title: "Date Worked", field: "DateComp", responsive: 0, hozAlign: "center", sorter: "date", editor: dateEditor },
                { title: "Start Time", field: "TimeStart", responsive: 0, hozAlign: "center", sorter: "time", editor: timeEditor },
                { title: "Finish Time", field: "TimeFinish", responsive: 0, hozAlign: "center", sorter: "time", editor: timeEditor },
                { title: "Added", field: "Added", visible: true, responsive: 0, hozAlign: "center" },
                { title: "Changed", field: "Changed", visible: false, responsive: 0, hozAlign: "center" }            ]
        });
        table.setData(myEndPointURL, { caseSelector: myCaseSelector, emplId: myEmployeeId });
    }
    catch (error) {
        console.log(error);
    }

The addData() функция вставляет копию выбранной строки, как и ожидалось; однако я не могу изменить ячейку Added вновь вставленной строки. Несмотря на мои усилия, я все еще вижу пустую ячейку.

Любая помощь приветствуется.

1 Ответ

1 голос
/ 26 мая 2020

Большая часть вашей настройки выглядит нормально. Вместо myTable.updateRow используйте newRows.update({field: 'new val'}). Поскольку у вас уже есть ссылка на строку, вам не нужно получать идентификатор. Я думаю, это решит вашу проблему.

Еще несколько вещей.

  1. Вы вставляете только одну строку, поэтому вместо myTable.addData используйте myTable.addRow. Тогда возвращаемое значение будет только 1 строкой, поэтому вам не нужно forEach.
  2. table.redraw, вероятно, не требуется.

Вот очень простой пример, который должен делать все, что вам нужно. Я пропустил контекстное меню, так как оно не имеет отношения к проблеме, но вам просто нужно переместить туда функцию, и все должно быть хорошо.

https://jsfiddle.net/nrayburn/65cngder/6/

...