zTree 异步加载

Sugar_521

浏览: 4553 次

最近访客更多访客>>

yhnd685

antiwise

平常心cz

anyco

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2013-06 ( 3)
更多存档...

博客分类：

zTree

最近在写一个zTree 异步加载的小例子，纠结了两三天，终于给纠结出来了！现将经验及代码分享如下：

	<SCRIPT type="text/javascript">
		var curMenu = null, zTree_Menu = null;
		var setting = {
			async:{
				autoParam:["menuid"],//异步加载时自动提交父节点参数
				dataType:"json",//提交参数的数据类型
				enable:true,//是否开启异步加载模式
				type:"post",//提交方式
				url:"LoadMenuServlet",//服务端加载类
			},
			view: {
				showLine: true,
				selectedMulti: false,
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true,
					idKey:"menuid",
					pIdKey:"parentid"
				},
				key:{
					name:"menuname"
				}
			},
			callback:{
				beforeClick:beforeClick
			}
		};
		function beforeClick(treeId, treeNode){
				if(treeNode.isParent){
					if(treeNode.level==0){
						//循环判断节点是否打展开
						for(var i=0,l=zTree_Menu.getNodes().length;i<l;i++){
							if(zTree_Menu.getNodes()[i]!=treeNode){
								zTree_Menu.expandNode(zTree_Menu.getNodes()[i], false);
								var a = $("#" + zTree_Menu.getNodes()[i].tId + "_a");
								a.removeClass("cur");
							}else{
								zTree_Menu.expandNode(treeNode, true);
								var a = $("#" + treeNode.tId + "_a");
								a.addClass("cur");
							}
						}
					} else {
						zTree_Menu.expandNode(treeNode,false);
					}
				}
				return !treeNode.isParent;
			}
		$(document).ready(function(){
			var treeObj = $("#treeDemo");
			$.fn.zTree.init(treeObj, setting);
			zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
		});
		//-->
	</SCRIPT>
<style type="text/css">
.ztree li a.level0 {width:200px;height: 20px; text-align: center; display:block; background-color: #0B61A4; border:1px silver solid;}
.ztree li a.level0.cur {background-color: #66A3D2; }
.ztree li a.level0 span {display: block; color: white; padding-top:3px; font-size:12px; font-weight: bold;word-spacing: 2px;}
.ztree li a.level0 span.button {	float:right; margin-left: 10px; visibility: visible;display:none;}
.ztree li span.button.switch.level0 {display:none;}
</style>
</head>
<body>
<div class="big">
	<div class="top">
		
	</div>
	<div class="left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>

LoadMenuDaoImpl类：

public List<Menu> loadMenu(String menuid) {
		Connection conn=null;
		PreparedStatement ps=null;
		ResultSet rs=null;
		List<Menu> listMenu=new ArrayList<Menu>();
		try{
			conn=BaseDao.getConn();
			String sql="select * from tbl_menu where parentid=?";
			ps=conn.prepareStatement(sql);
			ps.setString(1, menuid);
			rs=ps.executeQuery();
			while(rs.next()){
				Menu menu=new Menu();
				menu.setMenuid(rs.getString("menuid"));
				menu.setMenuname(rs.getString("menuname"));
				menu.setParentid(rs.getString("parentid"));
				String isParent=rs.getString("isParent");
				if(isParent.equals("1")){
					menu.setisParent(true);
				}else{
					menu.setisParent(false);
				}
				listMenu.add(menu);
			}
		}catch(Exception e){
			e.printStackTrace();
		}finally{
			BaseDao.closeConnection(conn, ps, rs);
		}
		return listMenu;
	}

LoadMenuServlet类：

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		
		String menuid=request.getParameter("menuid");
		
		System.out.println(menuid+"............................");
		
		if(menuid==null||menuid.equals("")){
			menuid="0";
		}
		
		LoadMenuDao listMenu=new LoadMenuDaoImpl();
		
		List<Menu> menus=listMenu.loadMenu(menuid);
		
		JSONArray array=JSONArray.fromObject(menus);
		
		System.out.println(array);
		
		out.print(array);
		
		out.flush();
		out.close(); 
	}

效果图如下：