layer弹框删除ztree节点非阻塞问题解决

• 2019 年 10 月 5 日
• 筆記

在ztree里面，删除一个节点的时候，会弹出一个弹框询问，是否删除，本来用的是网页自带的confirm弹框，根据公司的业务需求，要用到layer弹框删除，这个时候，就出现了一个问题。

问题：触发删除事件之后，弹出layer弹框，但是没有点击确定或者取消，就已经将选中的节点删除了。

原因：layer.confirm不能阻塞事件（confirm是网页自带的，有阻塞事件），不管有没有确定按钮，就已经执行ztree里面的删除节点事件function zTreeOnRemove(event, treeId, treeNode)

造成这个问题。

解决办法：弃用ztree自带的节点删除

原来的方法：

// 删除之前事件  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();  }  });  }

修改之后：

// 删除之前事件  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后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。