【发布时间】:2021-01-20 09:09:12
【问题描述】:
我正在尝试在 Tabulator 中模仿 Excel 的复制/粘贴。简单地说,我想复制 (ctrl+c) 几个单元格值,然后将它们粘贴到表格中的其他位置。
我的想法是:
- 复制几个单元格
- 单击我要开始粘贴的单元格。
- 将该单元格的对象存储在某处,以便我在粘贴数据时可以引用它
- Ctrl+v 或右键粘贴
- 使用我存储的单击单元格以及 clipboardPasteParser callback,我想构建一个 rowData 对象以从该回调中返回(如文档中所述)。
- 使用clipboardPasteAction callback,我将获取该rowData 对象并使用它来更新单元格。
但是,据我了解,Tabulator 的剪贴板功能不利于这种复制/粘贴操作。在下面的代码 sn-p 中,您将看到我 console.log out 在clipboardPasteParser(clipboard) 回调中粘贴的结果。 clipboard 只是复制值的串联字符串。
例如,复制“Mary May”、“1”、“female”、“2”和“blue”,会在clipboard 回调变量中生成字符串“Mary May1female2blue”。
如果您想尝试一下,这里是代码。
var data = [
{
id: 1,
name: 'Mrs. Rafaela Barton',
progress: 50,
gender: 'male',
height: 4,
col: 'GhostWhite',
dob: '02/10/1986',
driver: false
},
{
id: 2,
name: 'Grant Kunze',
progress: 16,
gender: 'female',
height: 4,
col: 'DarkViolet',
dob: '05/07/1993',
driver: true
},
{
id: 3,
name: 'Marilou Morar',
progress: 30,
gender: 'female',
height: 2,
col: 'Turquoise',
dob: '14/10/1984',
driver: true
},
{
id: 4,
name: 'Nathan Fadel Jr.',
progress: 78,
gender: 'female',
height: 4,
col: 'SkyBlue',
dob: '01/11/1921',
driver: false
},
{
id: 5,
name: 'Mrs. Amya Eichmann',
progress: 44,
gender: 'female',
height: 3,
col: 'Aquamarine',
dob: '20/02/1937',
driver: false
}
];
var table = new Tabulator("#example-table", {
height:"311px",
data: data,
columns:[
{title:"Name", field:"name", width:150},
{title:"Height", field:"height", bottomCalc:"sum"},
{title:"Progress", field:"progress", formatter:"progress", sorter:"number"},
{title:"Gender", field:"gender"},
{title:"Rating", field:"rating", formatter:"star", hozAlign:"center", width:100},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date"},
{title:"Driver", field:"car", hozAlign:"center", formatter:"tickCross"},
],
clipboard:true,
clipboardPasteParser: function(clipboard) {
console.log(clipboard);
},
});
<!DOCTYPE HTML>
<html>
<head>
<link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>
有什么方法可以让回调参数以某种方式分隔值,以便我可以在 clipboardPasteParser 回调中解析它?那可能吗?我可能错过了什么吗?
我怀疑这个问题与 Tabulator 的关系不大,而与浏览器如何处理复制有关。如果 Tabulator 能够原生处理这个问题,它仍然是一个不错的功能。
谢谢!!
【问题讨论】:
标签: javascript tabulator