`
Sugar_521
  • 浏览: 4552 次
社区版块
存档分类
最新评论

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(); 
	}

 效果图如下:

 

  • 大小: 8.4 KB
  • 大小: 4.4 KB
分享到:
评论

相关推荐

    java实现ztree异步加载

    首先,我们需要理解ZTree异步加载的基本原理。ZTree通过Ajax请求向服务器获取数据,服务器端(这里为Java)处理请求并返回JSON格式的节点数据。ZTree接收到这些数据后动态构建或更新树形结构。这个过程涉及到的主要...

    ztree异步加载

    "ztree异步加载"正是解决这一问题的一种高效方案。ZTree是一款基于JavaScript的富UI组件,它提供了一种灵活的方式来构建可交互的树形控件。在处理大量数据时,一次性加载所有节点会导致页面响应变慢,用户体验下降,...

    zTree异步加载子节点针对大数据量数列表

    最近项目中有一个比较大型的树节点加载,网上面也看过一些解决方案,感觉都不是很好,也有很多误区,比如单击节点时加载子...ztree fileter方法是在每次展开时都会执行,所以根据不同的请求达到异步加载子节点的需求。

    ztree异步加载demo(有说明文档)

    【标题】"ztree异步加载demo(有说明文档)" 涉及到的知识点主要围绕着ZTree,这是一个非常流行的JavaScript组件,主要用于构建树形结构的界面,尤其适用于网站导航、文件目录管理和组织结构展示等场景。异步加载是...

    jquery ztree 异步加载

    ### jQuery ZTree异步加载详解 #### 一、概述 jQuery ZTree插件是一款功能强大的树形控件,被广泛应用于Web开发中,用于展示层级结构数据。在大数据量的场景下,同步加载所有节点数据可能会导致页面加载缓慢,用户...

    zTree异步加载简单示例VS2008项目完整源码

    这个"zTree异步加载简单示例VS2008项目完整源码"是针对开发人员的一个实用资源,提供了如何在Visual Studio 2008环境下实现zTree异步加载功能的具体代码实例。 异步加载(Async Loading)是zTree的核心特性之一,它...

    zTree异步加载Demo

    【zTree异步加载Demo】是一个基于SpringMVC框架和MySQL数据库实现的示例,它展示了如何使用zTree这一流行的JavaScript树形插件进行异步数据加载。zTree是一款功能强大的jQuery插件,广泛用于构建多级目录结构,如...

    ZTree 异步加载 SSH JSON

    以上就是ZTree异步加载SSH JSON的基本实现步骤。在实际应用中,可能还需要考虑权限控制、懒加载、异步加载失败的处理等问题,以满足更复杂的需求。通过这种方式,我们可以构建出高效、动态的树形界面,提升Web应用的...

    使用ztree异步加载全国地区。

    在你提到的场景中,"使用ztree异步加载全国地区"是一种优化用户体验的有效方法。zTree是一款非常流行的jQuery插件,主要用于实现树形结构的展示和操作,尤其适用于处理大量数据的场合。 首先,我们来详细了解一下...

    ztree异步加载1

    《zTree异步加载详解——打造高效数据交互体验》 在IT行业中,zTree是一款广泛应用于Web开发的JavaScript树插件,它以其轻量级、灵活性和强大的功能深受开发者喜爱。尤其是在处理大量数据的场景下,zTree的异步加载...

    关于javaWeb(S2SH)中使用zTree异步加载树节点问题

    在上述问题中,开发者遇到了在S2SH项目中使用zTree异步加载树节点的问题。首先,我们需要了解zTree异步加载的基本配置。`settingMan`对象包含了zTree的配置参数: 1. `data.simpleData.enable : true`:开启简单...

    ZTree学习(二):异步加载树结构 - CSDN博客1

    **ZTree 异步加载树结构详解** ZTree 是一款基于 jQuery 的强大的树形插件,广泛应用于构建具有层级关系的列表。在处理大量数据时,为了提高用户体验,避免一次性加载所有节点导致页面卡顿,我们可以采用异步加载...

    异步&同步加载树节点----zTree(一)

    例如,一个基本的zTree异步加载配置可能如下所示: ```javascript var setting = { async: { enable: true, url: "your/data/api", autoParam: ["id"], otherParam: {"token": "yourToken"}, dataFilter: ...

    jQuery zTree 异步加载添加子节点重复问题

    在解决jQuery zTree异步加载添加子节点时出现的重复问题之前,我们首先需要理解zTree树插件的基本特性和其工作原理。zTree是一个基于jQuery的树形控件,它支持多功能的树形结构展示,并且可以轻松实现节点的增删改查...

    jquery ztree 异步动态加载

    以下是一个简单的ZTree异步加载示例: ```javascript $(function() { var setting = { async: { enable: true, url: "/getNodes", type: "post", autoParam: ["id"], otherParam: {"type": "async"} }, ...

    zTree异步加载展开第一级节点的实现方法

    zTree异步加载展开第一级节点的实现方法 zTree异步加载展开第一级节点的实现方法是指在使用zTree插件时,如何实现异步加载展开第一级节点的功能。实现该功能需要在setting中的callback中添加onAsyncSuccess回调函数...

    ztree 异步加载 拖拽 右键菜单 功能

    **zTree - 异步加载、拖拽与右键菜单功能详解** zTree是一款基于JavaScript的树形插件,广泛应用于网页中展示层次结构的数据。它具有轻量级、高效、可自定义等特点,能够方便地实现异步加载、拖拽操作以及右键菜单...

    jquery zTree异步加载简单实例分享

    知识点四:zTree异步加载的关键配置项 1. enable属性:设置为true以启用异步加载功能。 2. url属性:指定服务器端servlet的路径,用于获取异步加载的数据。 3. autoParam属性:自动传递给服务器的参数名称列表,这里...

    ztree的异步加载实现jfinal

    ztree的异步加载实现jfinal,希望可以帮到你

Global site tag (gtag.js) - Google Analytics