ztree的异步加载和右键增删改

ztree的异步加载和右键增删改, html如下

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

<div id="rMenu">
    <ul>
        <li id="m_add" οnclick="addTreeNode();">增加节点</li>
        <li id="m_del" οnclick="removeTreeNode();">删除节点</li>
        <!--<li id="m_change" οnclick="renameTreeNode();">更改节点</li>-->
        <!--<li id="m_check" οnclick="checkTreeNode(true);">Check节点</li>-->
        <!--<li id="m_unCheck" οnclick="checkTreeNode(false);">unCheck节点</li>-->
        <!--<li id="m_reset" οnclick="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>

js部分

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("服务器连接失败！");
        }
    });
}