Tabulator 使用setData（）函数将制表器数据从一个表复制到多个表会产生不可预测的结果

我正在使用

tablator

进行客户端输入和表格数据编辑。在我的应用程序中，我需要将数据从单个[Crew Leader]表复制到一个或多个[Crew Member]表。输入[Crew Leader]的数据后，我使用

按钮

触发对[Crew Member]表的复制过程。这是使用

制表器setData（）

函数完成的，该函数按预期工作

将数据复制到[Crew Member]表后，需要使用与单个[Crew Member]相关的信息编辑每一行。屏幕编辑过程按预期工作

当我要导出数据时，问题就出现了。注意，my

JSON

字符串中的数据：

• 与屏幕上显示的内容不同；及
• 对于所有[机组成员]表来说都是相同的

应用于一个[Crew Member]表的更改（在虚拟DOM中）似乎应用于所有[Crew Member]表。换句话说，对于两个“克隆”表，应用于表1的更改将应用于虚拟DOM中的表2，但不会在屏幕上显示（反之亦然）

从[Crew Leader]表复制到[Crew Member]表的客户端脚本：

编辑

通过在我的

制表器
构造函数中设置
reactiveData
属性，我消除了屏幕数据和导出数据之间的差异，如下所示：

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]表中所做的更改会自动复制到其他[Crew Member]表中。只有使用
setData（）
方法填充[Crew Member]表中的数据时，才会发生这种情况

非常感谢您的帮助。
在您的
cloneTables
函数中，您可以设置
dataCrewLeader=tableCrewLeader.getData（）
。然后使用
dataCrewLeader
作为每个新创建的表中的值。我只能假设这些是作为引用传递的，因为它们是对象。所以，改变一个会改变一切。（我不知道这是一个bug，还是tablator在调用
setData（）
时会创建副本）

要解决此问题，请不要将变量设置为该值。您想多次调用
.getData（）
。因此，您可以执行
tableCrewMember.setData（tableCrewMember.getData（））
，它将按预期工作

您可以从下面的示例中注释/取消注释
copyData
函数内的行，以查看问题

编辑了示例，使其在不更改任何内容的情况下工作。
在
cloneTables
函数中，设置
dataCrewLeader=tableCrewLeader.getData（）
。然后使用
dataCrewLeader
作为每个新创建的表中的值。我只能假设这些是作为引用传递的，因为它们是对象。所以，改变一个会改变一切。（我不知道这是一个bug，还是tablator在调用
setData（）
时会创建副本）

要解决此问题，请不要将变量设置为该值。您想多次调用
.getData（）
。因此，您可以执行
tableCrewMember.setData（tableCrewMember.getData（））
，它将按预期工作

您可以从下面的示例中注释/取消注释
copyData
函数内的行，以查看问题

编辑了示例，使其在不更改任何内容的情况下工作。
@nrayburn tech我希望你能参与其中。谢谢。我在理解这个问题时遇到了问题。下面是一个示例，我将数据从一个表复制到另一个表。然后我可以更改任何表中的数据，并且该值与其他表中的数据是独立的。如果这不是你看到的，你可能需要缩短你的问题，以便更容易理解。你搞定了。在查看代码时，我注意到了一些差异。首先，您为领导者和两个成员创建的
div
将在
窗口中创建。load
事件。出于我的目的，leader
div
是在
窗口创建的。load
但是我的1-to-x成员
div
是动态创建的，因为名称是从列表中选择的。其次，将
div
对象传递给
tablator
构造函数。我看到的示例将元素
id
作为字符串传递。有区别吗？我似乎无法让
制表器
构造函数使用
div
对象引用。思想？再次感谢。在制表器创建之前，你能发布你的领导者表格和两名工作人员的html吗？而且，使用id和div之间实际上没有什么区别。我传入div是因为我在JavaScript中创建了它。下面是一个使用html中div的示例。我正在制作一把小提琴，希望它能复制我的问题。我会让你知道我的想法。再次感谢。@nrayburn技术公司我希望你能参与其中。谢谢。我在理解这个问题时遇到了问题。下面是一个示例，我将数据从一个表复制到另一个表。然后我可以更改任何表中的数据，并且该值与其他表中的数据是独立的。如果这不是你看到的，你可能需要缩短你的问题，以便更容易理解。你搞定了。在查看代码时，我注意到了一些差异。首先，您为领导者和两个成员创建的
div
将在
窗口中创建。load
事件。出于我的目的，leader
div
是在
窗口创建的。load
但是我的1-to-x成员
div
是在dyn中创建的
var dataCrewMember = tableCrewMember.getData();
$(dataCrewMember).each(function () {
    console.log(this);
});

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" }
                ],
            });