zTree 异步加载

zTree异步加载树形菜单 zTree异步加载树形菜单ztree是依赖于jquery实现的多功能树插件, 也是目前做菜单管理、权限管理用的较多的前段插件之一。 阅读详情
最近在写一个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(); 
	}


 

最后效果:

 

ssm整合实现zTree异步加载 系列文章目录 文章目录系列文章目录前言一、什么是异步加载树?二、如何实现异步加载树效果图:案例1.创建数据库2.创建maven工程2.1.依赖2.2.搭建环境持久层代码业务层代码web层代码界面代码总结 前言 学习到zTree时,在实现异步加载树的时候有点疑问,最后解决了。记录一下,希望能帮助到刚刚接触到zTree的同学学习。 提示:以下是本篇文章正文内容,下面案例可供参考 一、什么是异步加载树?       异步加载树:是指在一开始的时候只 阅读详情

相关推荐

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

二,异步加载使用关键,还是在setting参数上等级:访问量: 3万积分: 484排名: 10万博主最新文章ZTree学习(一):一般使用,一载数据oracle

ztree异步加载1

ztree的使用主要有官方的api,其中主要是json字符串在页面上进行展示。json字符串包含 “标准json“和”简单json“。 标准json: var nodes = [ {name: "父节点1", children: [ {name: "子节点1"}, {name: "子节点2"} ]} ]; 简单json: var nodes = [ ...

jhhuang4836的专栏 148

C/C++ 计算程序运行的时间

C/C++计算程序执行时间的方法,精度依次增加,推荐度也依次增加 1.#include <time.h> clock_t start, finish; double process_interval ; start=clock(); process(); //要计时的程序 finish=clock(); process_interval =(double)(finish-star...

stu_shanghui的博客 1020

ztree实现异步加载(点击节点,请求后台数据,添加数据到对应节点)真正实现了异步树加载数据

ztree实现异步加载 首先说一下这篇文章和我写的上一篇异步树的区别: 上一篇的我实现的是其实是个伪异步加载,因为我实际是把异步的操作写在了节点上面,点击节点时,获取当前节点的ID,取回子节点的数据,然后手动拼接到当前节点下面。 真正的异步其实是应该点击树前面的"+"号,然后用zTree自带的异步功能请求后台(也就是我上一篇存在疑问的地方),获取数据后自动拼接到当前请求的节点。 好了,直接上代码,...

skyjian10的博客 6343

Windows 11安装realtek audio control

Windows 11安装realtek audio control,解决无法链接RPC问题

m0_46144825的博客 8万+

5分钟搞懂SCMA:稀疏码多址接入的核心原理与实战应用

本文深入浅出地解析了SCMA(稀疏码多址接入)的核心原理与实战应用。通过对比传统正交多址技术,阐释了SCMA如何通过非正交叠加和稀疏码本设计,实现远超资源单元数的用户接入,从而有效应对5G海量机器通信(mMTC)的挑战。文章还探讨了其在上行海量连接、免授权接入等场景的应用潜力及工程实现中的关键考量。

zeta9的博客 264

ztree实现异步加载(点击节点,请求后台数据,添加数据到对应节点)

ztree实现异步加载(点击节点,请求后台数据,添加数据到对应节点) skyjian10 2018-03-07 16:50:09 31041 收藏 17 分类专栏: ztree异步加载 文章标签: ztree 异步加载树 异步 版权 首先准备好后台数据:这里我就不贴SQL了,因为数据是别人博客里面的.后面会标明出处. 引入对应的js和css,没有这些文件的小伙伴可以点击 http://www.treejs.cn/v3/api.php 下载 <script type="text/javascr..

zhaofuqiangmycomm的博客 2414

山景BP10_128DBG开发板ADC_Key驱动

最近在学习山景BP10_128DBG开发板,想使用开发板上的按键。看了看原理图和之前用过的按键好像有点不一样。常见的按键都是判断IO口是否被拉低或拉高来判断按键是否被按下。山景BP10_128DBG开发板上的按键是ADC按键,每个按键按下之后ADC的采样值是不同的,通过ADC采样回来的值进而判断哪个按键按下。这种方式核心思想就是用一个ADC通道来节约IO口,对于IO紧张的芯片是一个不错的解决思路。

weixin_56646002的博客 1311

ztree异步加载

首先页面要引入ztree 的css、js 然后ztree setting 中的 async、data 页面加载完成,请求后端接口 获取 一部分 初始数据–&gt;初始化ztree ztree setting 中的 callback其实什么都不配置就可以异步加载了(beforeAsync,onAsyncSuccess这两个都不用配置),点击父节点 ztree异步向后端请求到数据自己会完...

Talk is cheap. Show me the code. 695

ROS实践(四)机器人SLAM建图(gmapping)

本文介绍了SLAM技术及其实现方法。SLAM(同步定位与地图构建)让机器人在未知环境中通过传感器数据自主定位并构建地图。文章详细讲解了激光雷达、RGBD相机等常用传感器,以及gmapping和map_server这两个ROS功能包的使用方法。重点阐述了SLAM建图实验步骤:配置gmapping节点参数、启动机器人仿真、运行gmapping节点、使用rviz可视化工具、通过键盘遥控机器人完成地图构建并保存。实验结果表明,该方法能有效实现机器人自主建图功能,为后续导航等应用奠定基础。

qq_1033275663的博客 4335

多无人车协同探索开源包部署教程及常见报错解决方式

本博客将介绍项目的基本概念、部署步骤以及常见问题的解决方案。该项目利用 RRT(Rapidly-exploring Random Tree)算法,通过多机器人协作进行高效的环境探索,适用于自动化与自主导航任务。项目简介:介绍该项目的核心算法、特点及应用场景,展示如何通过多个机器人共同工作来提升探索效率。部署教程:详细讲解如何在 ROS Noetic 环境中部署该项目,安装依赖、创建工作空间、克隆代码并编译项目。项目运行:包括单机器人与多机器人自主探索的示例,帮助读者快速理解和实践项目。

慕羽★的博客 1764

zTree异步加载时,点击父节点没有向后台取数据

 js代码: var curMenu = null, zTree_Menu = null; var setting = { async:{ autoParam:["menuid"],//异步加载时自动提交父节点参数 contentType:"application/json",//提交参数的数据类型 enable:true,//是否开启异步加载模...

songshuge的博客 500

R语言caret拟合模型:train函数构建xgBoost Dart模型、模型调优、自定义设置trainControl函数和tuneLength参数

R语言caret拟合模型:train函数构建xgBoost Dart模型、模型调优、自定义设置trainControl函数和tuneLength参数

statistics+insight+vista+power 530

zTree异步加载

其实并不是很难哈,主要参考官网的信息 zTree异步加载一、思路二、使用步骤1.ztree代码配置2.后端接口例子 一、思路 前端按照下面的代码配置好,然后每次发起ajax请求后端都应该去查询该目录下的子节点返回给前端,就是这样就可以实现异步加载了。但是有一点要注意的是,刚进入页面的第一次从根节点加载的时候 .fn.zTree.init(.fn.zTree.init(.fn.zTree.init(("#treeDemo"), setting);这样就行了,不用带节点信息,然后后端方法处理的时候就做一下判断

weixin_45736916的博客 3958

密码学系列3-Elgamal加密及其IND-CPA安全性证明

但这没有任何影响,敌手本身就只能知道公钥,他并没有能力知道挑战者是否知道对应的私钥。所以上述整个游戏就是一个模拟实验,敌手无法区分挑战者运行的是这个模拟实验,还是真正的按照第一节的算法构造的实验(挑战者知道私钥…为什么合起来的时候有1/2:因为T既可能是随机的也可能是g^{ab},这两种情况概率为1/2。能够攻破Elgamal加密方案,那么挑战者利用敌手的能力构建下面游戏,来求解困难性问题DDH。就是挑战者选的随机数,虽然挑战者自己也不知道。),否则挑战者输出0,作为DDH的回答。

qq_41359358的博客 1249

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

10zTree - 用 zTree 方法异步加载节点数据

使用 zTreeObj.reAsyncChildNodes 方法 Function 参数说明 function 举例 重新异步加载 zTree var treeObj = $.fn.zTree.getZTreeObj("tree"); treeObj.reAsyncChildNodes(null, "refresh"); 重新异步加载当前选中的第一个节点 var treeObj =...

阿甘兄 1736

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

ztree 后台异步加载_ztree异步加载实例

当前版本Ztree 3.5.01simple.htmljsvar setting = {data: {simpleData: {enable: true// idKey:"id",// pIdKey:"pId",}},async: {enable: true,url:"/Java_Solr/servlet/ZTreeSerlvet",autoParam:["id", "...

weixin_29029995的博客 273

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

ztree 后台异步加载_Jquery zTree 树控件异步加载操作

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件兼容 IE、FireFox、Chrome 等浏览器在一个页面内可同时生成多个 Tree 实例支持 JSON 数据支持一次性静态生成 和 Ajax 异步加载 两种方式支持多种事件响应及反馈支持 Tree 的节点移动、编辑、删除支持任意更换皮肤 / 个性化图标(依靠css)支持极其灵活的 checkbox 或 ...

weixin_39955781的博客 395

【zTree】简单实例与异步加载实例

我们在项目中经常会需要用到树,这次按照数据库存储的特点重新了做一个小demo,使用zTree来实现这个功能。 简单实例:     首先我们需要在界面中引入代码,很简单,但是很重要,它用来存放加载的树。      ps:添加ztree的引用,下载地址:http://www.ztree.me/v3/main.php#_zTreeInfo           其次是js代

颗粒归仓 1万+

ztree 后台异步加载_ZTree异步加载树结构

var setting ={async:{autoParam:["parentId"],enable:true,type:"post",url:getUrl,dataFilter:filter,},check : {chkStyle:"radio",enable:false,chkboxType : {"Y" : "s", "N" : "ps"},radioType :"level"},view:...

weixin_35545176的博客 915

java ztree 异步加载_zTree树形插件异步加载方法详解

本文实例为大家分享了zTree树形插件异步加载,Struts2框架,供大家参考,具体内容如下异步加载上面呢,是jsp页面的代码,因为是纯插件测试,可以直接复制过去使用的,action层代码,可以直接复制使用list=null;try {list=ztreeService.getMenusById(ztree);} catch (Exception e) {e.printStackTrace();}...

weixin_32540969的博客 276

ztree 后台异步加载_【zTree】简单实例与异步加载实例

【zTree】简单实例与异步加载实例我们在项目中经常会需要用到树,这次按照数据库存储的特点重新了做一个小demo,使用zTree来实现这个功能。简单实例:首先我们需要在界面中引入代码,很简单,但是很重要,它用来存放加载的树。其次是js代码:vartree={/***所有的初始化的操作*/pFunction:{zTree:'',setting:{view:{dblClickExpan...

weixin_33733806的博客 392

vue 项目ztree 异步加载树

1、在data()添加setting设置 setting: { data: { simpleData: { enable: true, idKey: "", pIdKey: "", rootPId: 0 } }, check: { //不显示复选框 enable:...

OldStreet61的博客 1856
上一篇: Wabacus的使用方法
下一篇: java打包下载
wuliSugar
博客等级 码龄15年 5粉丝 18原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值