如何解决将两个或多个按钮放在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
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。