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


Posted in Javascript onFebruary 05, 2013

首先提供Ztree官方网站http://www.ztree.me。
Ztree是一个使用jQuery实现的JSP页面的各种功能树,本文介绍一个异步获取数据到下拉树的实现方式。
当前版本Ztree 3.5.01
simple.html

<!DOCTYPE html> 
<html> 
<head> 
<title>simple.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<link rel="stylesheet" type="text/css" href="css/zTreeStyle.css"> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script> 
<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.min.js"></script> 
<!-- <script type="text/javascript" src="js/standard.js"></script> --> 
<script type="text/javascript" src="js/1.js"></script> 
</head> 
<body> 
<div class="zTreeDemoBackground left"><ul id="treeDemo" class="ztree"></ul></div> 
</body> 
</html>

js
var setting = { 
data: { 
simpleData: { 
enable: true 
// idKey:"id", 
// pIdKey:"pId", 
} 
} 
,async: { 
enable: true, 
url:"/Java_Solr/servlet/ZTreeSerlvet", 
autoParam:["id", "name"], 
otherParam:{"otherParam":"zTreeAsyncTest"}, 
// dataType: "text",//默认text 
// type:"get",//默认post 
dataFilter: filter //异步返回后经过Filter 
} 
,callback:{ 
// beforeAsync: zTreeBeforeAsync, // 异步加载事件之前得到相应信息 
asyncSuccess: zTreeOnAsyncSuccess,//异步加载成功的fun 
asyncError: zTreeOnAsyncError, //加载错误的fun 
beforeClick:beforeClick //捕获单击节点之前的事件回调函数 
} 
}; 
//treeId是treeDemo 
function filter(treeId, parentNode, childNodes) { 
if (!childNodes) return null; 
for (var i=0, l=childNodes.length; i<l; i++) { 
childNodes[i].name = childNodes[i].name.replace('',''); 
} 
return childNodes; 
} 
function beforeClick(treeId,treeNode){ 
if(!treeNode.isParent){ 
alert("请选择父节点"); 
return false; 
}else{ 
return true; 
} 
} 
function zTreeOnAsyncError(event, treeId, treeNode){ 
alert("异步加载失败!"); 
} 
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){ } 
/***********************当你点击父节点是,会异步访问servlet,把id传过去*****************************/ 
var zNodes=[]; 
/* var zNodes =[ 
{ id:1, pId:0, name:"parentNode 1", open:true}, 
{ id:11, pId:1, name:"parentNode 11"}, 
{ id:111, pId:11, name:"leafNode 111"}, 
{ id:112, pId:11, name:"leafNode 112"}, 
{ id:113, pId:11, name:"leafNode 113"}, 
{ id:114, pId:11, name:"leafNode 114"}, 
{ id:12, pId:1, name:"parentNode 12"}, 
{ id:121, pId:12, name:"leafNode 121"}, 
{ id:122, pId:12, name:"leafNode 122"}, 
{ id:123, pId:12, name:"leafNode 123"}, 
{ id:13, pId:1, name:"parentNode 13", isParent:true}, 
{ id:2, pId:0, name:"parentNode 2", isParent:true} 
]; */ 
$(document).ready(function(){ 
$.fn.zTree.init($("#treeDemo"), setting, zNodes); 
});

得到zTree对象 :var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
ZtreeServlet
package org.hzy.servlets; 
import java.io.IOException; 
import java.io.PrintWriter; 
import java.util.ArrayList; 
import java.util.List; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import org.hzy.bean.ZtreeBean; 
import com.alibaba.fastjson.JSON; 
public class ZTreeSerlvet extends HttpServlet { 
public void destroy() { 
super.destroy(); 
} 
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
System.out.println(request.getParameter("id") + " " + request.getParameter("name") + " " + request.getParameter("otherParam")); 
response.setCharacterEncoding("UTF-8"); 
PrintWriter out = response.getWriter(); 
ZtreeBean zb = new ZtreeBean(0, -1, "zb", true); 
ZtreeBean zb1 = new ZtreeBean(1, 0, "zb1", true); 
ZtreeBean zb2 = new ZtreeBean(2, 1, "zb2", false); 
ZtreeBean zb3 = new ZtreeBean(2, 0, "zbss", true); 
List<ZtreeBean> list = new ArrayList<ZtreeBean>(); 
list.add(zb); 
list.add(zb1); 
list.add(zb2); 
list.add(zb3); 
String str = JSON.toJSONString(list); 
out.print(str); 
} 
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
doGet(request, response); 
} 
public void init() throws ServletException { 
} 
}
Javascript 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
Javascript中的变量使用说明
May 18 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
web打印小结
Jan 11 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
原生js实现购物车功能
Sep 23 Javascript
JS打印gridview实现原理及代码
Feb 05 #Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 #Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 #Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 #Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 #Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 #Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 #Javascript
You might like
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
php获取远程文件大小
2015/10/20 PHP
深入理解javascript动态插入技术
2013/11/12 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
javascript模拟命名空间
2015/04/17 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
关于python中remove的一些坑小结
2021/01/04 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
2014新年寄语
2014/01/20 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
慰问信格式规范
2015/03/23 职场文书
2015年安全月活动总结
2015/03/26 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书