JQuery ztree带筛选、异步加载实例讲解


Posted in Javascript onFebruary 25, 2016

本文实例分享了JQuery ztree带筛选、异步加载实例,供大家参考,具体内容如下

<html>
< head>
< base href="<%=basePath%>">
<title>My JSP 'ztree.jsp' starting page</title>
<link rel="stylesheet" href="zTrees/css/zTreeStyle/zTreeStyle.css"
 type="text/css">
< script type="text/javascript" src="zTrees/js/jquery-1.4.4.min.js"></script>
< script type="text/javascript" src="zTrees/js/jquery.ztree.core-3.5.js"></script>
< script type="text/javascript"
 src="zTrees/js/jquery.ztree.excheck-3.5.js"></script>
< script type="text/javascript"
 src="zTrees/js/jquery.ztree.exedit-3.5.js"></script>
< script type="text/javascript"
 src="zTrees/js/jquery.ztree.exhide-3.5.js"></script>
< SCRIPT type="text/javascript">
 $(function() {
 var setting = {
 async : { //异步加载
 type : "post",
  enable : true,
  url : getUrl
 },
 check : {
  enable : true
 },
 data : {
  simpleData : {
  enable : true
  }
 },
 callback : {
 onClick : nodeClick,
  onCheck : nodeCheck
 }
 };
 $.fn.zTree.init($("#treeDemo"), setting);
 });
 //返回地址 
 function getUrl(treeId, treeNode) {
 return "***.do?method=listXMLTree&****Sid=100";
 }
 //单击节点
 function nodeClick(event, treeId, treeNode) {
 //alert(treeId+treeNode.id+treeNode.mobileNO);
 var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
 var sNodes = treeObj.getSelectedNodes();
 if (sNodes.length> 0) {
 if (!treeNode.isParent) {
 $.ajax({
  type : 'POST',
  url : '***.do?method=listXMLChildren',
  data : {'****Sid' : treeNode.id},
  dataType : 'text',
  async : false,
  success : function(dat) {
  var dats = eval(dat);
  if (dats.length != 0) {
  //var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
  //treeObj.addNodes(treeNode, dats);
  treeObj.addNodes(treeNode, dats);
  }
  }
 });
 } else {
  treeObj.expandNode(treeNode);
 }
 }
 }
 //选中节点
 function nodeCheck(event, treeId, treeNode) {
 var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
 nodes = treeObj.getCheckedNodes(true);
 var str = "";
 for ( var i = 0, l = nodes.length; i < l; i++) {
 //alert(nodes[i].id + nodes[i].mobileNO);
 if (nodes[i].mobileNO != null) {
  str += nodes[i].name + ":" + nodes[i].mobileNO + ";";
 }
 }
 $('#mtDstName').val(str);
 }
 //监听搜索框
 $(function() {
 $('#sch').bind('input propertychange', function() {
 var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
 var value = $('#sch').val();
 nodeList = treeObj.getNodesByParamFuzzy('name', value);
 nodes = treeObj.getNodes();
 treeObj.hideNodes(nodes[0].children);
 treeObj.showNodes(nodeList);
 });
 });
 
< /SCRIPT>
< /head>
< body>
 搜索:<input type="text" id="sch">
 <!-- < input type="button" id="btnSch" value="搜索">-->
 <br> 树状:
 <div style="height:300px;width:200px;">
 <ul id="treeDemo" class="ztree"></ul>
 </div>
 <div align="center">
 名单:
 <textarea id="mtDstName" name="mtDstName" readonly></textarea>
 </div>
< /body>
< /html>

具体功能操作:

JQuery ztree带筛选、异步加载实例讲解

搜索市委:

JQuery ztree带筛选、异步加载实例讲解

更多关于ztree控件的内容,请参考专题《jQuery插件ztree使用汇总》 。

以上就是带筛选、异步加载功能的ztree,希望大家通过最近几篇文章,对ztree有了深入的了解。

Javascript 相关文章推荐
从JavaScript的函数重名看其初始化方式
Mar 08 Javascript
JS setCapture 区域外事件捕捉
Mar 18 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
Node.js搭建小程序后台服务
Jan 03 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery ztree实现模糊搜索功能
Feb 25 #Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 #Javascript
jquery实现列表上下移动功能
Feb 25 #Javascript
js简单判断移动端系统的方法
Feb 25 #Javascript
jquery ztree实现树的搜索功能
Feb 25 #Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 #Javascript
JQuery ztree 异步加载实例讲解
Feb 25 #Javascript
You might like
php中的实现trim函数代码
2007/03/19 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
js简单抽奖代码
2015/01/16 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
java判断三位数的实例讲解
2019/06/10 Python
Python编写打字训练小程序
2019/09/26 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
Python学习笔记之装饰器
2020/08/06 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
护理学毕业生求职信
2013/11/14 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
副总经理任命书
2014/06/05 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
家庭贫困证明
2014/09/23 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
你会写请假条吗?
2019/06/26 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
python使用glob检索文件的操作
2021/05/20 Python
Nginx缓存设置案例详解
2021/09/15 Servers