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 相关文章推荐
自动更新作用
Oct 08 Javascript
SWFObject Flash js调用类
Jul 08 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
prototype.js常用函数详解
Jun 18 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
vue 授权获取微信openId操作
Nov 13 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
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
Python字符串逐字符或逐词反转方法
2015/05/21 Python
python显示生日是星期几的方法
2015/05/27 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
django富文本编辑器的实现示例
2019/04/10 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
python日志模块logbook使用方法
2019/09/19 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
python中可以声明变量类型吗
2020/06/18 Python
python如何删除文件、目录
2020/06/23 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
高一生物教学反思
2014/01/17 职场文书
年会活动策划方案
2014/01/23 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
如何Python使用re模块实现okenizer
2022/04/30 Python