将两个或多个按钮放在Tabolator Javascript库的一栏中

问题描述

作为标题，我想创建一个这样的列

如果我按下editBt， editBt和delBt将在同一列中更改为updateBt和cancelBt 并且该行将是可编辑的

如果按或updateBt或cancelBt， updateBt和cancelBt将更改回editBt和delBt 并且该行将为只读

有人告诉我要这样做：


{
    title : "",field : "functionButton",width : 100,visible : true,formatter : function(cell) {
            return '<button type="button" class="btn-edit" onclick="editRow(this); return false;">editBt</button>'
                 + '<button type="button" class="btn-del" onclick="delRow(this); return false;">delBt</button>' 
                 + '<button type="button" class="btn-update" onclick="updateRow(this); return false;">updateBt</button>'
                 + '<button type="button" class="btn-cancel" onclick="cancelRow(this); return false;">cancelBt</button>'
    }
},

但是我不能使用提供的函数库（可编辑行）

有什么方法可以做到这一点或替代方法吗？

解决方法

首先，我将假设 editRow ， delRow ， updateRow 和 cancelRow 函数是您已经编码的外部函数，因为它们不是制表器的一部分。

与其从格式化程序中返回静态HTML，不如使用document.createElement()创建按钮元素，然后将事件侦听器绑定到它们，然后可以传递Cell Component或{{3} }传递到其他函数中，这将使您完全控制行，将this传递到函数中将传递整个表对象，这不会帮助您了解正在编辑的行。

function(cell) {

    //create edit button
    var editBt = document.createElement("button");
    editBt.type = "button";
    editBt.textContent = "editBt";
    editBt.classList.add("btn-edit");
    editBt.addEventListener("click",function(){
       editRow(cell);
    });
    
    //create delete button
    var delBt= document.createElement("button");
    delBt.type = "button";
    delBt.textContent = "delBt";
    delBt.classList.add("btn-del");
    delBt.addEventListener("click",function(){
       delRow(cell);
    });
   
    //create update button
    var updateBt = document.createElement("button");
    updateBt.type = "button";
    updateBt.textContent = "updateBt";
    updateBt.classList.add("btn-update");
    updateBt.addEventListener("click",function(){
       updateRow(cell);
    });

    //create cancel button
    var cancelBt = document.createElement("button");
    cancelBt.type = "button";
    cancelBt.textContent = "editBt";
    cancelBt.classList.add("btn-cancel");
    cancelBt.addEventListener("click",function(){
       cancelRow(cell);
    });
 
    //add buttons to cell (just the edit and delete buttons to start with)
    var buttonHolder = document.createElement("span");
    buttonHolder.appendChild(editBt); 
    buttonHolder.appendChild(delBt); 
 
    return buttonHolder;
}

在每个按钮的addEventListener功能内，您可以根据需要添加逻辑以添加和删除其他按钮。例如，单击编辑但显示更新和取消按钮：

editBt.addEventListener("click",function(){

    //hide edit and delete buttons
    editBt.parentNode.removeChild(editBt);
    updateBt.parentNode.removeChild(updateBt);

    //add update and cancel buttons
    buttonHolder.appendChild(updateBt);
    buttonHolder.appendChild(cancelBt);

    editRow(cell); //call your original function
});

javascript tabulator