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

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

先上图片：

 

 

顶部菜单异步加载：

//加载顶部菜单
$.post("topMenu!topMenu.action",{},function(result){
   	var json = eval('(' + result + ')');
	var tm='<ul>';
	$.each(json, function(i,item){
		if(i==0){
		   	tm+='<li class="selected"><a href="javascript:void(0)" onclick="changeMenu(this,'+item.id+',\''+item.name+'\')"><span>'+item.name+'</span></a></li>';
		}else{
		    tm+='<li><a href="javascript:void(0)" onclick="changeMenu(this,'+item.id+',\''+item.name+'\')"><span>'+item.name+'</span></a></li>';
		}
		});
		tm+="</ul>";
		$("#navMenu").html(tm);
});	
$("#navMenu").html(tm);
});

 

子菜单树加载：

var subMenuSetting = {
	   async: {
		    enable: true,//启用异步加载
		    url:"tree!asyncTree.action", //异步请求地址
		    dataType:"text",
		    autoParam:["id"] //需要传递的参数,为你在ztree中定义的参数名称
		},
		data:{ // 必须使用data  
            simpleData : {  
                enable : true,  
                idKey : "id", // id编号命名 默认  
                pIdKey : "pId", // 父id编号命名 默认   
                rootPId : -1 // 用于修正根节点父节点数据，即pIdKey 指定的属性值  
            }
       	}, 
       	view: {
	    	dblClickExpand: false,
	    	showLine: true,
	    	selectedMulti: false,
	    	expandSpeed: ($.browser.msie && parseInt($.browser.version)<=6)?"":"fast"
	   	},
		callback: {
		    onAsyncSuccess: onAsyncSuccess
		 }
	};
	function onAsyncSuccess(event, treeId, treeNode, msg) {
		initUI($('#'+treeId));
  	}
  	
	function changeMenu(obj,id,name){
		//设置点击横向菜单后横向菜单的样式
		$('#navMenu ul li').each(function(idx){
		    $('#navMenu ul li').removeClass();
		});
		$(obj).parent().addClass("selected");
		//加载树
		$.post("topMenu!topSubTree.action",{id:id},function(result){
   	 		var json = eval('(' + result + ')');
        	    $.fn.zTree.init($("#ztreedemo"), subMenuSetting, json);
	    	    initUI($('#ztreedemo'));
      	});
}

 

 

 

 

 

评论

7 楼 taigo 2014-09-30  

我最近也要实现这样的功能能否提供一份demo  ，谢谢  邮箱是[e-mail]  感激不尽

6 楼 s330526719 2014-09-01  

楼主大神，能给个demo吗，万分感谢！[e-mail]

5 楼 咫尺千山路 2014-07-10  

最近正在做这个，给个demo吧，[e-mail] 谢谢!!

4 楼 niweiwei 2014-05-16  

哥们，你这个demo的源代码，在不，可否提供一份，非常感谢

3 楼 iversongaoming 2014-03-19  

能否提供一份demo，谢谢，邮箱[e-mail]

2 楼 王雷震 2014-01-11  

能给一个json格式不

1 楼 eryuenifeng 2013-11-05  

能否提供一份demo  ，谢谢  邮箱是[e-mail]  感激不尽