制表符。如何从 js 启用和禁用编辑

Question

我正在使用制表符（很棒的东西），它具有内置的行内编辑功能。

尽管如此，它可以通过在列的基础上设置编辑器标签来打开或关闭。您也可以禁用给定单元格的编辑器。

我想做的是让 table 显示为只读。然后单击 'edit' 按钮（在我的 table 中，我捕获了单击）。这将反过来为该原始文件启用内联内置编辑器功能。然后我单击保存按钮，将更新的数据写回我的数据库并再次将该行设置为只读。

所以，对于制表符 4.2，我会寻找类似

的东西

var usrtable = new Tabulator("#usrtable", {
        ajaxURL:"/account/cgi-bin/getallusers.php",
        resizableColumns:false,
        tooltips:true,
        history:true,
        pagination:"local",
        paginationSize:10,
        paginationSizeSelector:true,
        reactiveData:true,
        selectable:true,
        initialSort:[{column:"username", dir:"asc"},],
        columns:[
            { formatter: editIcon, width: 40, sortable: false, align: "center", cellClick:  function (e, cell) {
                    var id = cell.getRow().getData().id;
                    row(id).editable=true;
                    /\/\/\/\/\/\/\/\/\/\/\
                }
            },
            {title:"Id", field:"id", visible:false},
            {title:"Username", field:"username", width:80, editor:"input"},
            {title:"Password", field:"password", width:70, editor:"input"},
            {title:"Role", field:"role", width:70, align:"center", formatter:"plaintext", editor:"select", editorParams:{values:["user","admin"]}},
            {title:"Change passwd", field:"changepasswd", width:90,  align:"center", formatter:"tickCross", sorter:"boolean", editor:true},
        ],
    });

这是可能的还是我必须重新发明轮子？即创建一个模型来编辑 table?

之外的数据

我试过的..... 渲染后，单元格如下所示：

<div class="tabulator-cell" role="gridcell" tabulator-field="username" tabindex="0" title="test" style="width: 80px; height: 29px;">test</div>

当你点击单元格时，它变成 editable 并且 class 'tabulator-editing' 被添加到 div。所以.....我虽然可以 'just' 捕捉点击事件并做这样的事情：

$(".tabulator-cell").on("click",function(){
        ($this).removeClass("tabulator-editing");
    });

那没用所以试了这个：

$(".tabulator-cell").on("click",function(e){
        e.preventDefault();
    });

那也没用。这样做时：

$(".tabulator-cell").on("click",function(){
        alert("cell clicked");
    });

它实际上从不触发... :-(

要么我做错了什么，要么真的不知道从这里该何去何从....

Answer 1

在列设置下的文档中，有一个名为 editable 的数据操作选项。

http://tabulator.info/docs/4.2/columns#definition

editable - callback to check if the cell is editable (see Manipulating Data for more details)

我自己还没有试验过，但似乎只在最初渲染 table 时才调用它，因此您可能必须在 table.redraw(true) 时强制重新渲染用户单击“编辑”和“保存”按钮。

您也可以只使用 cellClick 事件并调用 cell.edit()。

Answer 2

所以，我也从 Tabulator 的开发者 Oli 那里得到了反馈。

简短的回答是，没有像我担心的那样在行控制杆上启用编辑的选项。此外，由于多种因素，该选项将不会添加。

换句话说，我正在尝试做的事情不是开箱即用的，编辑是在单元格级别完成的。

Answer 3

制表符中没有 option。但是如果你想禁止编辑一个单元格，你可以简单地删除所有为特定单元格应用的制表符类。例如，如果你想禁用最后一行的编辑，你可以使用这样的东西，

$(".tabulator-row:last .tabulator-cell").removeAttr("role tabulator-field tabindex title");

Answer 4

我知道这是一个老问题，但我的回答对以后来这里的访客（比如我）很有用..

我们也有类似的需求，最终采用了这个方案。我们在每个列中添加了 "editor" 和另一个属性 "editable"。在"editable"中，我们正在检查行是否被选中，如果行被选中则字段可以编辑，否则不可编辑。

除此之外，我们还使用了 "rowSelected" 和 "rowDeselected" 到 show/hide 保存按钮，并且在 "rowSelected" 上，我们正在检查是否仅选择了 1 行一次。

Answer 5

这可以通过 Tabulator 的 Optional Editing:

来实现

// column definition
{ title:"Name", field:"name", editor:"input", editable:editCheck }

var editCheck = function (cell) {
    var isEditable = cell.getRow().getElement().classList.contains('isEditable');
    return isEditable;
}

有了这个逻辑，您只需在适当的制表符行上切换 isEditable class。

制表符。如何从 js 启用和禁用编辑

Tabulator. How to enable and disable editing from js

tabulator