DWZ横向导航实现动态左菜单树(基于zTree插件)

此篇文章是基于ztree实现，若是dwz与ztree未整合，请先按照《DWZ和zTree整合（实现版）》文章整合。

先上图片：

 

 

顶部菜单异步加载：

Js代码  

1. //加载顶部菜单  
2. $.post("topMenu!topMenu.action",{},function(result){  
3.     var json = eval('(' + result + ')');  
4.     var tm='<ul>';  
5.     $.each(json, function(i,item){  
6.         if(i==0){  
7.             tm+='<li class="selected"><a href="javascript:void(0)" οnclick="changeMenu(this,'+item.id+',\''+item.name+'\')"><span>'+item.name+'</span></a></li>';  
8.         }else{  
9.             tm+='<li><a href="javascript:void(0)" οnclick="changeMenu(this,'+item.id+',\''+item.name+'\')"><span>'+item.name+'</span></a></li>';  
10.         }  
11.         });  
12.         tm+="</ul>";  
13.         $("#navMenu").html(tm);  
14. });   
15. $("#navMenu").html(tm);  
16. });  

 

子菜单树加载：

Js代码  

1. var subMenuSetting = {  
2.        async: {  
3.             enable: true,//启用异步加载  
4.             url:"tree!asyncTree.action", //异步请求地址  
5.             dataType:"text",  
6.             autoParam:["id"] //需要传递的参数,为你在ztree中定义的参数名称  
7.         },  
8.         data:{ // 必须使用data    
9.             simpleData : {    
10.                 enable : true,    
11.                 idKey : "id", // id编号命名 默认    
12.                 pIdKey : "pId", // 父id编号命名 默认     
13.                 rootPId : -1 // 用于修正根节点父节点数据，即pIdKey 指定的属性值    
14.             }  
15.         },   
16.         view: {  
17.             dblClickExpand: false,  
18.             showLine: true,  
19.             selectedMulti: false,  
20.             expandSpeed: ($.browser.msie && parseInt($.browser.version)<=6)?"":"fast"  
21.         },  
22.         callback: {  
23.             onAsyncSuccess: onAsyncSuccess  
24.          }  
25.     };  
26.     function onAsyncSuccess(event, treeId, treeNode, msg) {  
27.         initUI($('#'+treeId));  
28.     }  
29.       
30.     function changeMenu(obj,id,name){  
31.         //设置点击横向菜单后横向菜单的样式  
32.         $('#navMenu ul li').each(function(idx){  
33.             $('#navMenu ul li').removeClass();  
34.         });  
35.         $(obj).parent().addClass("selected");  
36.         //加载树  
37.         $.post("topMenu!topSubTree.action",{id:id},function(result){  
38.             var json = eval('(' + result + ')');  
39.                 $.fn.zTree.init($("#ztreedemo"), subMenuSetting, json);  
40.                 initUI($('#ztreedemo'));  
41.         });  
42. }  

 

 

 

 

 转自：http://njkf-hp.iteye.com/blog/1965218?utm_source=tuicool