一旦用户单击，如何在制表符中将单元格留空？

问题描述

我想在用户单击单元格或通过按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/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>

javascript tabulator