ztree的非同步載入和右鍵增刪改, html如下

<ul class="ztree" id="ModelcarEditTree"></ul>

<div id="rMenu">
    <ul>
        <li id="m_add" onclick="addTreeNode();">增加節點</li>
        <li id="m_del" onclick="removeTreeNode();">刪除節點</li>
        <!--<li id="m_change" onclick="renameTreeNode();">更改節點</li>-->
 
        <!--<li id="m_check" onclick="checkTreeNode(true);">Check節點</li>-->
        <!--<li id="m_unCheck" onclick="checkTreeNode(false);">unCheck節點</li>-->
        <!--<li id="m_reset" onclick="resetTree();">恢復zTree</li>-->
    </ul>
</div>
 

<style type="text/css">
    div#rMenu {position:fixed; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
    div#rMenu ul li{
        margin: 1px 0;
        padding: 0 5px;
        cursor: pointer;
        list-style: none outside none;
        background-color
 
: #DFDFDF;
    }
</style>

var zNodesEdit
var bomIdEdit;
function gotoModelcarEdit(bomId) {
    bomIdEdit = bomId;
    gotoUrl(111);
    modelCarEdit();
    //初始化樹，官方提供的非同步載入方法
    function modelCarEdit(){
        var allData = {
            bomId: bomId,
            parentId: 0    //父節點的Id
        };
        $.ajax({
            type: 'post',
            url: serverUrl+"",
            contentType:'application/json;charset=utf-8',
            data:JSON.stringify(allData),
            async: false,
            success: function (data) {
                zNodesEdit = data.data;
            },
            error: function () {
                layer.alert("伺服器連線失敗！");
            }
        });
    }
}


var settingEdit = {
    isSimpleData : true,//資料是否採用簡單 Array 格式，預設false
    async : {
        enable : true,//設定 zTree 是否開啟非同步載入模式
        type:"post",//提交方式
        url : serverUrl+"",//Ajax 獲取資料的 URL 地址
        contentType:'application/json;charset=utf-8',
        autoParam : ["bomId","fakeId=parentId"],//非同步載入時需要自動提交父節點屬性的引數
        dataFilter: modelCarEditFilter //返回資料的預處理過濾函式
    },
    view: {
        dblClickExpand: false,
        showIcon: false,
        addHoverDom: false,
        removeHoverDom: false,
        selectedMulti: false
    },
    data: {
        simpleData: {
            enable: true,//是否採用簡單資料模式
            idKey : "id",//樹節點ID名稱
            pIdKey : "pId",//父節點ID名稱
            rootPId: 0
        },
        key: {
            name: "bomNodeName"
        }
    },
    callback: {
        onRightClick: OnRightClick,
        onClick: zTreeOnClickEdit,
        onAsyncSuccess: zTreeEditOnAsyncSuccess,//非同步載入成功的function
        onAsyncError: zTreeEditOnAsyncError //載入錯誤的function
    }
};
//右擊事件
function OnRightClick(event, treeId, treeNode) {
    if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
        zTree.cancelSelectedNode();
        showRMenu("root", event.clientX, event.clientY);
    } else if (treeNode && !treeNode.noR) {
        zTree.selectNode(treeNode);
        showRMenu("node", event.clientX, event.clientY);
    }
}
//顯示右擊選單
function showRMenu(type, x, y) {
    $("#rMenu ul").show();
    if (type=="root") {
        $("#m_del").hide();
        $("#m_check").hide();
        $("#m_unCheck").hide();
    } else {
        $("#m_del").show();
        $("#m_check").show();
        $("#m_unCheck").show();
    }

    y += document.body.scrollTop;
    x += document.body.scrollLeft;
    rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

    $("body").bind("mousedown", onBodyMouseDown);
}
//隱藏右擊選單
function hideRMenu() {
    if (rMenu) rMenu.css({"visibility": "hidden"});
    $("body").unbind("mousedown", onBodyMouseDown);
}
//滑鼠按下
function onBodyMouseDown(event){
    if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
        rMenu.css({"visibility" : "hidden"});
    }
}
//新增節點
function addTreeNode() {
    hideRMenu();
    var newNode = { bomNodeName:"增加"};
    if (zTree.getSelectedNodes()[0]) {
        var allData = {
            bomId: bomIdEdit,
            bomNodeName: newNode.bomNodeName,
            pId: zTree.getSelectedNodes()[0].fakeId
        }
        $.ajax({
            type: 'post',
            url: serverUrl+"",
            contentType:'application/json;charset=utf-8',
            data:JSON.stringify(allData),
            dataType: 'json',
            success: function (data) {
                if (data.ok == false) {
                    alert(data.message);
                }else {
                     var nodes = zTree.getSelectedNodes();
                     /*根據 zTree 的唯一標識 tId 快速獲取節點 JSON 資料物件*/
                     var parentNode = zTree.getNodeByTId(nodes[0].parentTId);
                     if(null == parentNode){
                         gotoModelcarEdit(bomIdEdit);
                         /*強行非同步載入父節點的子節點。[setting.async.enable = true 時有效]*/
                         zTree.reAsyncChildNodes(nodes[0], "refresh", false);
                     }else{
                         /*選中指定節點*/
                         zTree.selectNode(parentNode);
                         zTree.reAsyncChildNodes(parentNode, "refresh", false);
                     }
                }
            },
            error: function () {
                layer.alert("伺服器連線失敗！");
            }
        });
    } else {
        var allData = {
            bomId: bomIdEdit,
            bomNodeName: newNode.bomNodeName,
            pId:""
        };
        $.ajax({
            type: 'post',
            url: serverUrl+"",
            contentType:'application/json;charset=utf-8',
            data:JSON.stringify(allData),
            dataType: 'json',
            success: function (data) {
                if (data.ok == false) {
                    alert(data.message);
                }else {
                    //var zTree = $.fn.zTree.getZTreeObj("ModelcarEditTree");
                    //zTree.reAsyncChildNodes(null, "refresh", false);
                    //父節點的Id
                    gotoModelcarEdit(bomIdEdit);
                }
            },
            error: function () {
                layer.alert("伺服器連線失敗！");
            }
        });
    }
}
//刪除節點
function removeTreeNode() {
    hideRMenu();
    var nodes = zTree.getSelectedNodes();
    if (nodes && nodes.length>0) {

        if (true == nodes[0].isParent) {
            layer.alert("該節點下有子節點，不允許刪除！");
        }else{
            layer.confirm('您確定要刪除該節點麼?', {
                btn: ['確認','取消'] //按鈕
            }, function(){
                $.ajax({
                    type: 'delete',
                    url: serverUrl+""+nodes[0].id,
                    dataType: 'json',
                    success: function (data) {
                        if (data.ok == false) {
                            alert(data.message);
                        }else {
                            layer.alert("刪除成功");
                            zTree.removeNode(nodes[0]);
                        }
                    },
                    error: function () {
                        layer.alert("伺服器連線失敗！");
                    }
                });
            }, function(){});
        }
    }
}
var zTree, rMenu;
$.fn.zTree.init($("#ModelcarEditTree"), settingEdit, zNodesEdit);
zTree = $.fn.zTree.getZTreeObj("ModelcarEditTree");
rMenu = $("#rMenu");
//樹的節點點選事件
function zTreeOnClickEdit(event, treeId, treeNode) {
    $.ajax({
         type: 'get',
         //url: serverUrl+""+treeNode.id,
         url: serverUrl+"",
         data:{
            id:treeNode.id
         },
         dataType: 'json',
         success: function (data) {
             if (data.ok == false) {
                 alert(data.message);
             }else {
            //移除不可編輯狀態
            $("#modelCarEditParentName").removeAttr("readonly");
            //情況之前的內容
            $("#modelCarEditBCode").val("");
            $("#modelCarEditNodeName").val("");
            $("#modelCarEditParentName").val("");
            $("#modelCarEditId").val("");
            //填寫新內容
            $("#modelCarEditBCode").val(data.data.nodeInfo.bussCode);
            $("#modelCarEditNodeName").val(data.data.nodeInfo.bomNodeName);
            $("#modelCarEditParentName").val(data.data.parentNodeInfo.bomNodeName);
            $("#modelCarEditId").val(data.data.nodeInfo.id);
            //設定不可編輯狀態
            $("#modelCarEditParentName").attr('readonly','readonly');
        }
    },
    error: function () {
        layer.alert("伺服器連線失敗！");
    }
});
}
function zTreeEditOnAsyncSuccess(event, treeId, treeNode){
    //alert("獲取資料成功");
}
function zTreeEditOnAsyncError(event, treeId, treeNode){
   // alert("獲取資料失敗");
}
//非同步載入返回的資料處理
function modelCarEditFilter(treeId, parentNode, responseData) {
    responseData = responseData.data;
    return responseData;
}

/**
 * 編輯的修改功能
 */
function modelCarEditConfirm() {
    var id = $("#modelCarEditId").val().trim();
    var codeCode = $("#modelCarEditBCode").val().trim();
    var bomNodeName = $("#modelCarEditNodeName").val().trim();
    var editData = {
            bomId:bomIdEdit,
            id:id,
            bussCode:codeCode,
            bomNodeName:bomNodeName
        };
    $.ajax({
        type: 'put',
        url: serverUrl+"",
        contentType:'application/json;charset=utf-8',
        data:JSON.stringify(editData),
        dataType: 'json',
        success: function (data) {
            if (data.ok == false) {
                alert(data.message);
            }else {
                //移除不可編輯狀態
                $("#modelCarEditParentName").removeAttr("readonly");
                //情況之前的內容
                $("#modelCarEditBCode").val("");
                $("#modelCarEditNodeName").val("");
                $("#modelCarEditParentName").val("");
                $("#modelCarEditId").val("");
                //設定不可編輯狀態
                $("#modelCarEditParentName").attr('readonly','readonly');
                var nodes = zTree.getSelectedNodes();
                /*根據 zTree 的唯一標識 tId 快速獲取節點 JSON 資料物件*/
                var parentNode = zTree.getNodeByTId(nodes[0].parentTId);
                if(null == parentNode){
                    gotoModelcarEdit(bomIdEdit);
                    /*強行非同步載入父節點的子節點。[setting.async.enable = true 時有效]*/
                    zTree.reAsyncChildNodes(nodes[0], "refresh", false);
                }else{
                    /*選中指定節點*/
                    zTree.selectNode(parentNode);
                    zTree.reAsyncChildNodes(parentNode, "refresh", false);
                }
                layer.alert("修改節點資訊成功");
                //gotoModelcarEdit(data.data[0].bomId);
            }
        },
        error: function () {
            layer.alert("伺服器連線失敗！");
        }
    });
}