如何解决一旦用户单击,如何在制表符中将单元格留空?
我想在用户单击单元格或通过按Tab键跳到该单元格时将其清空。
有什么办法吗?我正在使用制表符4.7.2
我已经尝试了cell.setValue(“”),但是它给出了以下错误
Uncaught DOMException: Failed to set the 'innerHTML' property on 'Element': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?
解决方法
我不确定您要在哪里调用cell.setValue()
,但粗略浏览一下他们的文档后,看来一个简单的开始就是实现其表范围的回调Tabulator: Callbacks。
根据他们的快速入门示例表,这是一个最小示例。它实现了三个回调:cellEditing
,cellEditingCancelled
和cellEdited
。当可编辑单元格获得焦点时,将调用cellEditing
。我用它来存储当前值,以便在用户取消编辑时可以将其恢复。在上述情况下,cellEditingCancelled
恢复旧值。 cellEdited
此处未使用,但是在完成编辑后触发并提供对最终编辑值的访问。 (在此示例中,它将在我们将单元格值设置为""
时触发,并在退出该单元格时再次触发,要么是新编辑的值,要么是从cellEditingCancelled
恢复的值)
var tabledata = [
{id:1,name:"Oli Bob",age:"12",col:"red",dob:""},{id:2,name:"Mary May",age:"1",col:"blue",dob:"14/05/1982"},{id:3,name:"Christine Lobowski",age:"42",col:"green",dob:"22/05/1982"},{id:4,name:"Brendon Philips",age:"125",col:"orange",dob:"01/08/1980"},{id:5,name:"Margret Marmajuke",age:"16",col:"yellow",dob:"31/01/1999"},];
let oldValue;
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table",{
cellEditing:function(cell){
//e - the click event object
//cell - cell component
oldValue = cell.getValue();
cell.setValue("",true);
},cellEditCancelled:function(cell){
//cell - cell component
cell.setValue(oldValue,true);
oldValue = "";
},cellEdited:function(cell){
//cell - cell component
},height:205,// set height of table (in CSS or here),this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data:tabledata,//assign data to table
layout:"fitColumns",//fit columns to width of table (optional)
columns:[ //Define Table Columns
{title:"Name",field:"name",editor:"input",width:150},{title:"Age",field:"age",editor:"number",hozAlign:"left",formatter:"progress"},{title:"Favourite Color",field:"col"},{title:"Date Of Birth",field:"dob",sorter:"date",hozAlign:"center"},],});
<link href="https://unpkg.com/tabulator-tables@4.7.2/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/tabulator-tables@4.7.2/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。