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 相关文章推荐
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
JavaScript 基本概念
Jan 20 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
ES6新增的数组知识实例小结
May 23 Javascript
JavaScript分页组件使用方法详解
Jul 26 Javascript
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函数(ignore_user_abort)
2012/08/01 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
python文件比较示例分享
2014/01/10 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
Python函数中不定长参数的写法
2019/02/13 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
python字符串查找函数的用法详解
2019/07/08 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
PyTorch中permute的用法详解
2019/12/30 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
2014年父亲节活动方案
2014/03/06 职场文书
小学教师寄语大全
2014/04/03 职场文书
积极向上的团队口号
2014/06/06 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL