关于ztree处理异步请求嵌套的问题

Question

求指导！ 前端如何解决，求指导，如果处理数据源怎么保持嵌套之前的依赖关系。

Answer 1

<script type="text/javascript" src="zTreejs/jquery.ztree.core.js"></script>
<script type="text/javascript" src="zTreejs/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="zTreejs/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
    var zNodes;
    var setting = {
        view: {
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            selectedMulti: true
        },
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        edit: {
            enable: true
        },
        callback: {
            onExpand    : zTreeBeforeClick,//点击节点加载子节点
            beforeRemove: beforeRemove,//用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作
            beforeRename: beforeRename,//用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作
            beforeDrop  : beforeDrop,
            onDrop      : onDrop
        }
    };

    function loadPower(){
        $.ajax({
            type:"post",
            url:"${pageContext.request.contextPath}/itemcat/findTree",
            async:false,
            dataType:"json",
            success:function(data){
                zNodes=data;
            }
        })
    }
    $(document).ready(function(){
         loadPower();
        /*  $.fn.zTree.init($("#treeDemo"), setting, zNodes);  */
         $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
    });
    /* ztree一级一级加载数据 */
    function zTreeBeforeClick(event, treeId, treeNode) {
        var id=treeNode.id;
        //判断该节点下是否有节点，没有就加载节点
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        var node = treeObj.getNodeByTId(treeNode.tId);
        if(node.children == null || node.children == "undefined"){  
            $.ajax({  
                  url : "${pageContext.request.contextPath}/itemcat/findTree",  
                  type:'get',//请求方式：get  
                  data: {id:id},
                  dataType : 'json',//数据传输格式：json  
                  error : function() {  
                    $.messager.alert("警告",'亲，请求失败！');  
                  },  
                  success : function(data) { 
                      if(data!=null && data!=""){
                        newNode = treeObj.addNodes(node, data);  
                      }
                  }   
              });
        };  
    };
    //添加
    var newCount = 1;
    function addHoverDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){

            $.ajax({  
                type : "POST",    
                async : false,    
                url : "${pageContext.request.contextPath}/itemcat/addRootTree",    
                data :    
                {    
                    name : "类目" + newCount,  
                    parentId: treeNode.id,
                    sortOrder:treeNode.level+1
                },  
                success:function(result){
                    if(""!=result ){                            
                        var zTree = $.fn.zTree.getZTreeObj("treeDemo");  
                        zTree.addNodes(treeNode, {id:result.data.id, pid:treeNode.id, name:"类目" + (newCount)});  
                        return false; 
                    }else{  
                        alert("无法添加新类目，请联系管理员！");  
                    }  
                }  
            });   
            return false;             
        });  
    };
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
    };
    var log, className = "dark"; 

    //ok 删除
    function beforeRemove(treeId, treeNode) {
        className = (className === "dark" ? "":"dark");     
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");  
        zTree.selectNode(treeNode); 
        var isDel=confirm("确认删除类目 -- " + treeNode.name + " 吗？");
        var isDeled=false;  
        if (isDel) {  
                $.ajax({  
                type : "POST",    
                async : false,    
                url : "${pageContext.request.contextPath}/itemcat/deleteItemCat",    
                data :    
                {    
                    id : treeNode.id    
                },  
                success:function(result){  
                    if (result.status==200) {  
                        isDeled= true;  
                    } else {  
                        alert("数据删除失败,请联系管理员!");  
                        isDeled= false;  
                    }  
                }  
            });   

            return isDeled;  
        }else{  
            return false;  
        }  
    }
    //ok 重命名
    function beforeRename(treeId, treeNode, newName, isCancel) {  
        className = (className === "dark" ? "":"dark");  
        if (newName.length == 0) {  
             alert("节点名称不能为空!");  
             var zTree = $.fn.zTree.getZTreeObj("treeDemo");  
             setTimeout(function(){zTree.editName(treeNode)}, 10);  
             return false;
        }else{
          var isDeled=false;  
          $.ajax({  
              type : "POST",    
              async : false,    
              url : "${pageContext.request.contextPath}/itemcat/editTreeName",    
              data :    
              {    
                  id : treeNode.id,  
                  name : newName  
              },  
              success:function(result){ 
                  if (result.status == 200) {  
                      isDeled= true;  
                  } else {  
                      alert("重命名失败!请联系管理员");  
                      isDeled= false;  
                  }  
              }  
          });               
          return isDeled;  

        }
    }
    /*设置一个根节点*/
    /* beforeDrop方法：在添加到目标节点下之前，判断目标节点是否存在（这里限制了对于根节点的添加），若存在则判断目标节点下是否已存在相同的节点*/
   function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {  
    //如果有提交到后台的操作，则会先执行if…else…再执行post等提交操作  
    alert(treeNodes[0].id);
    alert(treeNodes[0].level);
    alert(targetNode.id);
    alert(targetNode.level);
    if(targetNode) {
        if(targetNode.id == 1){
             alert("Error: This name already exists.");
             return false;
        }
        if(targetNode.children != undefined){  
            //console.log(targetNode.children[0].name)  
            //var nodes = targetNode.children;  
            var name = treeNodes[0].name;  
            for (i = 0; i < targetNode.children.length; i++) {  
                if(targetNode.children[i].name == name){  
                    alert("Error: This name already exists.");  
                    return false;  
                }  
            }  
        }  
        return true;  
    }  
    return false;  
}  
    //拖拽
    function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {  
    className = (className === "dark" ? "":"dark");  
    //拖拽成功时，修改被拖拽节点的pid  
    if(treeNodes && targetNode){  
        alert(treeNodes[0].id);
        alert(targetNode.id);
        var isDeled=false;
        $.ajax({  
             type : "POST",    
             async : false,    
             url : "${pageContext.request.contextPath}/itemcat/editTree",    
             data :    
             {    
               id : treeNodes[0].id, 
               pid: targetNode.id ,
               sortOrder: targetNode.level
            },  
            success:function(result){
                if (result.status == 200) {  
                    isDeled= true;  
                } else {  
                    alert("操作失败!");  
                    isDeled= false;  
                }  
            }  
        });   
        return isDeled;
    }  
}  
    //-->
   /* 添加根节点*/
  // 添加根目录。界面上添加一个button，点击时执行。（因为，树上直接进行添加操作，添加的是子部门）

 function addRoleTree(){
     $.ajax({  
         type : "POST",    
         async : false,    
         url : "${pageContext.request.contextPath}/itemcat/addRootTree",    
         data :    
        {    
            name : "类目一", 
            parentId : 0 ,
            sortOrder:1 
         },  
        success:function(result){
            window.location.reload();
        }  
    });          
}

</SCRIPT>