Блог

Главная - Вопросы по программированию - Как сделать ячейку пустой в табуляторе, как только пользователь нажимает на нее?

Как сделать ячейку пустой в табуляторе, как только пользователь нажимает на нее?

#javascript #tabulator

#javascript #табулятор

Вопрос:

Я хочу сделать ячейку пустой, как только пользователь нажимает на ячейку или пользователь переходит к ней, нажимая клавишу 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?

Ответ №1:

Я не уверен, куда вы пытались позвонить 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", 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>

Комментарии:

1. cellEditing это то, что мне было нужно. Не уверен, как я это пропустил. Спасибо!