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 相关文章推荐
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
js实现双人五子棋小游戏
May 28 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
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
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
PHP 正则表达式小结
2015/02/12 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
python3转换code128条形码的方法
2019/04/17 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
python 简单的调用有道翻译
2020/11/25 Python
python二维图制作的实例代码
2020/12/03 Python
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
结婚典礼证婚词
2014/01/11 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
企业介绍信范文
2015/01/30 职场文书
运动会广播稿20字
2015/08/19 职场文书
分享几个实用的CSS代码块
2022/06/10 HTML / CSS
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技