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 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
微信小程序—setTimeOut定时器的问题及解决
Jul 26 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
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
php连接数据库代码应用分析
2011/05/29 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
jquery ui resizable bug解决方法
2010/10/26 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
python使用append合并两个数组的方法
2015/04/28 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
当当网软件测试笔试题
2015/11/24 面试题
公务员培训自我鉴定
2013/09/19 职场文书
物理教学随笔感言
2014/02/22 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
给公司的建议书范文
2014/05/13 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
学生通报表扬范文
2015/05/04 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle