用户单击后如何使制表符中的单元格为空？

Question

我想在用户单击单元格或用户通过按 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?

Answer 1

我不确定你试图在哪里调用 cell.setValue() 但在粗略地查看了他们的文档后，看起来一个简单的起点是实现他们的 table 宽回调 Tabulator: Callbacks.

这是一个基于他们的快速入门示例 table 的最小示例。它实现了三个回调：cellEditing、cellEditingCancelled 和 cellEdited。 cellEditing 在 editable 单元格获得焦点时调用。我用它来存储当前值，以便在用户取消编辑时可以恢复它。 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", editor:"input", field:"col"},
        {title:"Date Of Birth", editor:"input", 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>

用户单击后如何使制表符中的单元格为空？

How to make cell empty in tabulator once user click on it?

javascript

tabulator