Копирование данных табулятора из одной таблицы в несколько таблиц с помощью функции setData () дает непредсказуемые результаты - PullRequest
Новая
       33

Копирование данных табулятора из одной таблицы в несколько таблиц с помощью функции setData () дает непредсказуемые результаты

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

Я использую Tabulator для ввода и редактирования табличных данных на стороне клиента. В моем приложении мне нужно скопировать данные из одной таблицы [Crew Leader] в одну или несколько таблиц [Crew Member]. После ввода данных для [Командир бригады] я использую button, чтобы запустить процесс копирования в таблицы [Член экипажа]. Это достигается с помощью функции Tabulator setData(), которая работает должным образом.

После того, как данные были скопированы в таблицы [Член экипажа], необходимо отредактировать каждую строку с информацией, относящейся к отдельному [Члену экипажа]. Процесс редактирования на экране работает должным образом.

Моя проблема возникает, когда я go экспортирую данные. Обратите внимание, что данные в моей строке JSON:

  • не совпадают с данными, отображаемыми на экране; и
  • одинаково для всех таблиц [Член экипажа].

Похоже, что изменения, применяемые к одной таблице [Член экипажа], применяются (в виртуальной DOM) к все столы [Член экипажа]. Другими словами, с двумя «клонированными» таблицами изменения, примененные к таблице один, применяются к таблице два в виртуальной DOM, но не на экране (и наоборот ).

Клиентский скрипт, который выполняет копирование из таблицы [Crew Leader] в таблицу (s) [Crew Member]: 

function CloneTable() {
    var tableCrewLeader = Tabulator.prototype.findTable('#CrewLeaderTable')[0];
    var dataCrewLeader = tableCrewLeader.getData();
    if (tableCrewLeader.getDataCount() > 0) {
        // Verify a Tabulator table is present for each selected [Crew Member] by
        // looping through each <div> element with the class "crew-member-card".
        $(".crew-member-card").each(function () {
            if ($(this).attr('id').length > 0) {
                const divId = "#" + $(this).attr('id').replace('Card', 'Table');
                const tableMember = Tabulator.prototype.findTable(divId);
                if (tableMember.length > 0) {
                    const tableCrewMember = Tabulator.prototype.findTable(divId)[0];
                    tableCrewMember.setData(dataCrewLeader);
                }
                else {
                    console.log("The Tabulator table " + divId+ " was not found.");
                }
            }
        });
    }
}

Также стоит отметить, эти аномалии не возникают, когда данные для таблиц [Член экипажа] вводятся напрямую (метод setData() не используется). Редактирование / изменения на экране не отражаются в других таблицах, если данные не были изначально скопированы в таблицу.

Что бы это ни стоило, следующее - l oop, который я использую для проверки содержимого каждого [ Crew Member] строка таблицы (используя Firefox Web Console для просмотра журнала): 

var dataCrewMember = tableCrewMember.getData();
$(dataCrewMember).each(function () {
    console.log(this);
});

EDIT

Я устранил несоответствие между отображаемыми на экране данные и экспортированные данные, установив атрибут reactiveData в моем Tabulator конструкторе следующим образом: 

var table = new Tabulator(divid, {
    height: "100%",
    layout: "fitDataFill",
    reactiveData: true, //enable reactive data
    movableRows: true, 
    tabEndNewRow: true, 
    rowContextMenu: myActionContextMenu,
    keybindings: {
        "navUp": true, 
        "navDown": true, 
                },
                columns: [
                    { title: "Phase Code", field: "Phasecode", width: 144, editor: "select", editorParams: { values: function (cell) { return window.laborPhaseCodes; } } },
                    { title: "Date Worked", field: "DateComp", hozAlign: "center", sorter: "date", editor: dateEditor },
                    { title: "Start Time", field: "TimeStart", hozAlign: "center", sorter: "time", editor: timeEditor },
                    { title: "Finish Time", field: "TimeFinish", hozAlign: "center", sorter: "time", editor: timeEditor },
                    { title: "Memo", field: "Memo", width: 144, hozAlign: "left", editor: "input" },
                    { title: cloneString, headerSort: false, headerClick: CloneTable, rowHandle: true, formatter: "handle" }
                ],
            });

Обратите внимание, однако, я все еще сталкиваюсь с проблемой, когда изменение было внесено в один [член экипажа ] автоматически копируется в другие таблицы [Член экипажа]. Это происходит только тогда, когда данные в таблицах [Член экипажа] были заполнены с использованием метода setData().

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

1 Ответ

2 голосов
/ 08 мая 2020

Внутри вашей функции cloneTables вы устанавливаете dataCrewLeader = tableCrewLeader.getData(). Затем вы используете dataCrewLeader в качестве значения в каждой из вновь созданных таблиц. Я могу только предположить, что они передаются как ссылка, потому что они являются объектами. Итак, изменение одного меняет их все. (Я не знаю, является ли это ошибкой или ожидается, что табулятор будет создавать копии при вызове setData().)

Чтобы исправить это, вместо установки переменной в значение. Вы хотите позвонить по номеру .getData() несколько раз. Итак, вы можете сделать tableCrewMember.setData(tableCrewMember.getData()), и он будет работать должным образом.

Вы можете прокомментировать / раскомментировать строки внутри функции copyData из приведенного ниже примера, чтобы увидеть проблему.

Отредактировал пример, чтобы он работал, ничего не меняя. https://jsfiddle.net/nrayburn/85ecbvys/36/

...