Tabulator copyToClipboard方法无法正常工作

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Tabulator copyToClipboard方法无法正常工作相关的知识,希望对你有一定的参考价值。

我是Tabulator插件的新手,我正在尝试使用Tabulator copyToClipboard方法将数据从一个表复制到另一个表,但是没有成功。

在我的应用程序中,我创建了11个<div>元素(一个用于[Crew Leader],一个每个用于最多10个[Crew Member]),以用作实例化制表器表的容器。我希望从[Crew Leader]表中复制数据并将其粘贴到每个受影响的[Crew Member]表中,从而减少数据重新输入。复制/粘贴事件的顺序是由绑定到[Crew Leader]表标题中的<button>的click事件触发的。<button>click事件调用以下函数:

        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对象。但是,第二次alert验证从未收到,因此表明制表器copyToClipboard方法失败。

我已经阅读了尽可能多的相关制表器文档,希望我只是忽略了设置中的某些内容。

以下是我的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) 
                
            );

我花了几天的时间试图找出将数据从一个表“克隆”到另一个表的最佳方法。制表器文档非常全面,但是我担心我忽略了一些东西。非常感谢您的协助。

答案

似乎您只是缺少启用剪贴板的选项。添加应该可以。

‘剪贴板:真实’

以上是关于Tabulator copyToClipboard方法无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章

Tabulator + Nuxt.js:如何在回调中使用 axios?

如何在 react-tabulator 中插入新行

Tabulator 5.0 - 解析日期时间 luxon - 日期时间 ISO 8601

将 panel.widgets.tables.Tabulator 转换为 layoutDOM

Vue-tabilator:如何访问制表功能?

text copyToClipboard.vue