ztree 懒加载

<link href="${base}/common/plugins/ztree/css/zTreeStyle.css" rel="stylesheet" type="text/css" />

<script src="${base}/common/plugins/jQuery/jquery-1.11.1.min.js"></script>

<script src="<%=resourceBase%>/plugins/ztree/js/jquery.ztree.core-3.5.js"></script>
<script src="<%=resourceBase%>/plugins/ztree/js/jquery.ztree.excheck-3.5.js"></script>
<script src="<%=resourceBase%>/plugins/ztree/js/jquery.ztree.exedit-3.5.js"></script>

<script type="text/javascript">


var  rMenu = $("#rMenu");
var tree = {  
   zTree:'',  
   pNode:'',  
   setting:{  
       isSimpleData: true,  
       treeNodeKey: "id",  
       treeNodeParentKey: "pid",  
       showLine: true,  
       root:{   
           isRoot:true,  
           nodes:[]  
       },  
       callback:{ //回调函数  
           /**  
            * event:鼠标事件  
            * treeId：树的容器id  
            * treeNode：当前点击的节点  
            */ 
            onRightClick: OnRightClick, 
            onExpand:function(event,treeId,treeNode){  
               tree.pNode = treeNode;  
               tree.loadNodeByPNode();  
           }  
       }  
   },  
/**  
    * 一般情况下，如果一段代码中要用到一个变量  
    * 而这个变量的值是在回调函数中赋值的  
    * 这个时候要保证使用这个变量的时候回调函数已经执行了  
    */  
   loadRootNode:function(){ //加载根节点,pid=0  
    var zNodes=[];
       var parameter = {  
               pid:0  
       };  
       $.post('<%=dataUrl0%>',parameter,function(data){  
        $.each(data, function(i,item){   
        var html={id:item.key,pid:i, name:item.title, open:false, noR:false,isParent:true,parent: true,};
          // html.children= ajaxChild(item.key); 
               zNodes[i]=html;
           });   
       });  
        $.fn.zTree.init($("#treeDemo"), tree.setting,zNodes);
        tree.zTree = $.fn.zTree.getZTreeObj("treeDemo");
   },  




//点击该节点，加载该节点的子节点

/**  
    * 该方法是点击父节点的+号后执行的，意味着执行该方法的时候树已经生成了  
    * 所以才能用tree.zTree  
    */  
   loadNodeByPNode:function(){
       var children=[];
       var folder=false;
       var parameter= {  
        pcode:tree.pNode.id //子节点的pcode是父节点的id  
       };  
       //获取pid = mid的数据，也就是子节点的id等于父节点的id，说明此父节点加载了子节点  
       if(!tree.zTree.getNodeByParam("pid",tree.pNode.id)){ 
           $.post('<%=base%>/work/sys/parts/getCategoryId.do',parameter,function(reback){  
               /**  
                * 把查询出来的字节点追加到父节点上  
                */ 
                $.each(reback, function(o,item2){  
            var html2={id:item2.key,pid:item2.pcode, name:item2.title,isParent:item2.folder};
            
          folder=item2.folde;
          children[o]=html2;
                })
           });  
           tree.zTree.addNodes(tree.pNode,children,folder); 
       }  
   }  
};  
$(document).ready(function(){
   tree.loadRootNode(); 
});  






























<%-- 
var zTree, rMenu;
$(document).ready(function(){

$.fn.zTree.init($("#treeDemo"), setting,zNodes);
zTree = $.fn.zTree.getZTreeObj("treeDemo");
rMenu = $("#rMenu");
});
var setting = {
async: {
enable: true,
contentType:"application/x-www-form-urlencoded",  
autoParam:["id=pcode"],  
url:"<%=base%>/work/sys/parts/getCategoryId.do",
dataFilter: filter 
},
data:{  
       simpleData :{  
          enable:true  
       }  
   },
view: {
dblClickExpand: false

},
check: {
enable: false
},
callback: {

beforeClick: onClick,
onRightClick: OnRightClick
}

}; 


function onClick(treeId, parentNode, childNodes) { 
alert(treeId);

}


var zNodes=[];
    //把这的数据用json加载出来
    $.post('<%=dataUrl0%>','',function(data){
   
    $.each(data, function(i,item){   
    var html={id:item.key,pid:i, name:item.title, open:false, noR:false,isParent:true,parent: true,};
        // html.children= ajaxChild(item.key); 
            zNodes[i]=html;
        });   
    },'json'); 
 
  
    function ajaxChild(pcode){
    var children=[];
        //获取大类小类和子类的路径
        $.post('<%=base%>/work/sys/parts/getCategoryId.do?pcode='+pcode,'',function(reback){
        $.each(reback, function(o,item2){  
       
       
           var html2={id:item2.key,pid:item2.pcode, name:item2.title,isParent:item2.folder};
        
           if(item2.folder==true){
            html2.children= ajaxChild(item2.key);
           } 
           children[o]=html2;
           
          
       });   
   },'json'); 
  
      
        
        
        
        var str = JSON.stringify(children);  
        return children;
    }
    function filter(treeId, parentNode, childNodes) {
    if (!childNodes) return null;
    for (var i=0, l=childNodes.length; i<l; i++) {
   
    childNodes[i].id=childNodes[i].key;
    childNodes[i].name=childNodes[i].title;
   
    }
   
    return childNodes;
    
    }
--%>
function OnRightClick(event, treeId, treeNode) {

$('#chiocenodeid').val(treeNode.id);//点击结点给input赋值
        $('#chiocenodename').val(treeNode.name); 
       
        //$('#codeid').val(treeNode.name);
if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
tree.zTree.cancelSelectedNode();
showRMenu(treeNode.id,"root", event.clientX, event.clientY);
} else if (treeNode && !treeNode.noR) {
tree.zTree.selectNode(treeNode);
showRMenu(treeNode.id,treeNode.isParent, event.clientX, event.clientY);
}
}


function showRMenu(pcode,type, x, y) {//判断点击的是那个节点

$("#rMenu ul").show();
 
if (type==true) {//父节点
$("#m_add").show();
   $("#m_add").attr("pcode",pcode) 
$("#m_edit").show();
$("#m_del").show();

} else if(type==false){
$("#m_add").hide();
$("#m_edit").show();
$("#m_del").show();

}else{
$("#m_add").hide();
$("#m_edit").hide();
$("#m_del").hide();
}
y+= $(document).scrollTop();
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"});
}
}



</script>

<div class="col-md-4 alert alert-dismissible"
style="width: 310px; float: left; margin: 0 0 0 20px;">
<div class="box box-blue">
<div class="wn_title">部件管理模块</div>
<div style="padding: 10px 20px 30px 20px; height: 600px">
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>


</div>
</div>
</div>

效果如图：