在 Tabolator Javascript lib 中的一列中放置两个或多个按钮

Question

作为标题我想做一个这样的专栏

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

如果按下或更新Bt或取消Bt， 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>'
    }
},

但我无法使用库提供的函数（可编辑行）

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

Answer 1

首先，我假设 editRow、delRow、updateRow 和 cancelRow 示例中概述的函数是您已经编码的外部函数，因为它们不是 Tabulator 的一部分。

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

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
});

在 Tabolator Javascript lib 中的一列中放置两个或多个按钮

put two or more buttons in one column in Tabolator Javascript lib

javascript

tabulator