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创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 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
ThinkPHP写第一个模块应用
2012/02/20 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python批量按比例缩小图片脚本分享
2015/05/21 Python
详解Django中Request对象的相关用法
2015/07/17 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
python计算列表内各元素的个数实例
2018/06/29 Python
详解Python用户登录接口的方法
2019/04/17 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
住房抵押登记委托书
2014/09/27 职场文书
委托书英文
2015/01/28 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
SQL Server 中的事务介绍
2022/05/20 SQL Server