Question

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

尽管如此，通过按列使用编辑器标签可以打开或关闭它。您也可以禁用给定单元格的编辑器。

我想要做的就是将表显示为只读，这样可以说。然后点击“修改”按钮（位于我的表格中，我捕获了点击）。反过来，这将仅针对该原始文件启用嵌入式内置编辑器功能。然后，我单击一个保存按钮，将更新的数据写回到我的数据库，并使该行再次变为只读状态。

因此，在制表器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},
        ],
    });

这是否有可能或者我必须重新发明轮子？即创建一个模型来编辑表格外的数据？

我尝试过的..... 呈现后，单元格将如下所示：

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

当您单击单元格时，该单元格变得可编辑，并且将“ tabulator-editing”类添加到div中。所以.....尽管我可以“只是”捕获点击事件并执行以下操作：

$(".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.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"来显示/隐藏保存按钮，并且在"rowSelected"上，我们正在检查一次仅选择了1行。 / p>

Answer 5

这可以通过制表器的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类即可。

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

5 个答案: