layer彈框刪除ztree節點非阻塞問題解決

在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後前端妹子，愛程式設計，愛運營，文藝與程式碼齊飛，魅力與智慧共存的程式媛一枚。