使用setData()函数将Tabulator数据从一个表复制到多个表，会产生不可预知的结果。

Question

我使用的是 Tabulator 用于客户端输入和编辑表格数据。 在我的应用程序中，我需要将数据从单个[船员组长]表复制到一个或多个[船员]表。 在输入[船员组长]的数据后，我使用了一个名为 "船员组长 "的应用程序。button 来触发复制到[船员]表中的过程。 这是通过使用 Tabulator setData() 函数，其工作原理与预期相同。

将数据复制到[船员]表中后，有必要用与个别[船员]相关的信息编辑每一行。 屏幕上的编辑过程与预期的一样。

我的问题出现在我去导出数据时。 请注意，在我的 JSON 字符串。

• 与屏幕上显示的内容不一样；以及。
• 对所有 [Crew Member] 表来说都是一样的。

似乎应用于一个[船员]表的更改被应用于（在虚拟DOM中）所有[船员]表。 换句话说，对于两个 "克隆 "表，应用于表一的更改在虚拟DOM中应用于表二，但在屏幕上却没有应用（和 反之亦然).

客户端脚本，将[船员长]表复制到[船员]表。

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() 方法）。) 当数据原本没有复制到表中时，屏幕上的编辑变化不会反映在其他表中。

值得一提的是，下面是我用来验证每个[船员]表行内容的循环（使用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" }
                ],
            });

但是，请注意，我仍然遇到这样的问题：在一个[船员成员]表中所作的更改会自动复制到其他[船员成员]表中。 只有当 [Crew Member] 表中的数据已被使用了 setData() 方法。

任何帮助都非常感激。

Answer 1

在你的应用程序中 cloneTables 功能，您可以设置 dataCrewLeader = tableCrewLeader.getData(). 然后你用 dataCrewLeader 作为每个新创建的表的值。 我只能假设这些表被作为引用传递，因为它们是对象。 所以，改变一个就会改变所有的表。 我不知道这是否是一个错误，或者说，当调用标签机时，是否应该创建副本。setData().)

要解决这个问题，不是将一个变量设置为值。 你想调用 .getData() 多次。 所以，你可以做 tableCrewMember.setData(tableCrewMember.getData()) 就可以正常工作了。

您可以在下面的代码中添加注释和注释 copyData 函数来查看问题。

编辑了这个例子，所以它可以在不改变任何东西的情况下工作。https:/jsfiddle.netnrayburn85ecbvys36