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 相关文章推荐
jquery tools系列 expose 学习
Sep 06 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
详解javascript new的运行机制
Jan 26 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 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和.net中des加解密的实现方法
2013/02/27 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
设定php简写功能的方法
2019/11/28 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
javascript 异常处理使用总结
2009/06/21 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
学习python处理python编码问题
2011/03/13 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
Python之Sklearn使用入门教程
2021/02/19 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
事业单位考核材料
2014/05/21 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
学校四风对照检查材料
2014/08/28 职场文书
工程部经理岗位职责
2015/02/02 职场文书
师范生见习总结范文
2015/06/23 职场文书
个人工作决心书
2015/09/22 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
vue中 this.$set的使用详解
2021/11/17 Vue.js