Tabulator copyToClipboard 方法未按预期工作

Question

我是 Tabulator plug-in 的新手，我正在尝试使用 Tabulator copyToClipboard 方法将数据从一个 table 复制到另一个，但没有成功。

在我的应用程序中，我创建了 11 个 <div> 元素（一个用于 [Crew Leader]，每个用于最多 10 个 [Crew Members]）作为 Tabulator table 的容器s 被实例化。我希望从 [Crew Leader] table 复制数据并将其粘贴到每个受影响的 [Crew Member] table 中，从而减轻数据 re-entry。这一系列 copy/paste 事件是由绑定到 header 中 header 的 <button> 的点击事件触发的 table。 <button> 单击事件调用以下函数：

        function CloneTable() {

            // Verify the [Crew Leader] Tabulator table is present....
            var tableLeader = Tabulator.prototype.findTable("#CrewLeaderTable");
            if (tableLeader.length > 0) {
                alert("The Tabulator table #CrewLeaderTable was found.\ntable.length = " + tableLeader.length);
                tableLeader.copyToClipboard("all");
                alert("The table contents were copied to the clipboard.");
            }
            else {
                alert("The Tabulator table #CrewLeaderTable was not found.");
            }
        }

第一个 alert 消息验证 #CrewLeaderTable object 已按预期找到。但是，从未收到第二个 alert 验证，因此表明 Tabulator copyToClipboard 方法失败。

我已经尽可能多地阅读了相关的 Tabulator 文档，我希望我只是在我的设置中忽略了一些东西。

以下是我的 Tabulator 构造函数的副本：

            var table = new Tabulator(divid, {
                height: "100%",
                layout: "fitDataFill",
                movableRows: true, //enable user movable rows
                tabEndNewRow: true, //create empty new row on tab
                rowContextMenu: myActionContextMenu,
                keybindings: {
                    "navUp": true, //enable navUp keybinding using the "up arrow" key
                    "navDown": true, //enable navDown keybinding using the "down arrow" key
                },
                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: "<button type='button' id='btnClone' class='btn btn-success btn-sm py-0' style='font-size:10px;'>Clone</button>", headerSort: false, headerClick: tabCloneTable }
                ],
                cellEdited: function (cell) {
                }
            });

我花了几天时间试图找出将数据从一个 table table 转换到另一个的最佳方法。 Tabulator 文档相当全面，但我担心我忽略了一些东西。非常感谢任何帮助。

Answer 1

看起来 copyToClipboard 没有 return 数据，它在内部维护且不可访问。但是，您所做的 set/getData 工作正常。这是一个例子，https://jsfiddle.net/nrayburn/19sjg74k/7/.

基本上，您要做的是在父 table 上调用 getData 并在子 table 上调用 setData。

  const crewLeaderTable = Tabulator.prototype.findTable('#CrewLeaderTable')[0];
  const crewMemberTable = Tabulator.prototype.findTable('#CrewMember1Table')[0];
  const crewLeaderData = crewLeaderTable.getData();
  // You could also use replaceData or addData, depending on the requirements
  crewMemberTable.setData(crewLeaderData);

Tabulator copyToClipboard 方法未按预期工作

Tabulator copyToClipboard method isn't working as anticipated

copy-paste

tabulator