在ztree里面,删除一个节点的时候,会弹出一个弹框询问,是否删除,本来用的是网页自带的confirm弹框,根据公司的业务需求,要用到layer弹框删除,这个时候,就出现了一个问题。
问题:触发删除事件之后,弹出layer弹框,但是没有点击确定或者取消,就已经将选中的节点删除了。
原因:layer.confirm不能阻塞事件(confirm是网页自带的,有阻塞事件),不管有没有确定按钮,就已经执行ztree里面的删除节点事件function zTreeOnRemove(event, treeId, treeNode)
造成这个问题。
解决办法:弃用ztree自带的节点删除
原来的方法:
代码语言:javascript复制// 删除之前事件
function zTreeBeforeRemove(treeId, treeNode) {
var flag = true;
$.ajax({
url : basePath "/organ/isDel/" treeNode.id,
type : "get",
async : false,
success : function(data) {
if(data == 0){
/alert(i18n_unDel);/
layer.msg('i18n_unDel',{icon:5,time:1000});
flag = false;
}else{
/flag = confirm(i18n_conf);/
flag =layer.confirm("确认要删除吗,删除后不能恢复", { title: "删除确认" }, function (index) {
layer.close(index);
});
}
}
});
return flag;
}
// 删除节点事件
function zTreeOnRemove(event, treeId, treeNode) {
$.ajax({
url : basePath "/organ/" treeNode.id,
type : "DELETE",
success : function(data) {
initTree();
}
});
}
修改之后:
代码语言:javascript复制// 删除之前事件
function zTreeBeforeRemove(treeId, treeNode) {
layer.confirm("确认要删除吗,删除后不能恢复", { title: "删除确认" }, function (index) {
new Promise(function(resolve,reject){
$.ajax({
url : basePath "/organ/isDel/" treeNode.id,
type : "get",
async : false,
success : function(data) {
if(data == 0){
layer.msg('i18n_unDel',{icon:5,time:1000});
}else{
return resolve(null)
}
}
});
}).then(function(){
$.ajax({
url : basePath "/organ/" treeNode.id,
type : "DELETE",
success : function(data) {
initTree();
return Promise.resolve(null)
}
});
}).then(function(){
zTreeObj.removeNode(treeNode,false)
layer.close(index);
}).catch(function(error){
if(error){
layer.msg(error,{icon:5,time:1000});
}
})
});
return false;
}
// 删除节点事件
function zTreeOnRemove(event, treeId, treeNode) {
}
原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。