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 ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
js单词形式的运算符
May 06 Javascript
Javascript进制转换实例分析
May 14 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 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函数getenv简介和使用实例
2014/05/12 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
python基础之入门必看操作
2017/07/26 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
用python与文件进行交互的方法
2018/03/01 Python
Python读取properties配置文件操作示例
2018/03/29 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
解决Python二维数组赋值问题
2019/11/28 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
《雾凇》教学反思
2014/02/17 职场文书
教师师德演讲稿
2014/05/06 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
五一活动标语
2014/06/30 职场文书
学校党员对照检查材料
2014/08/28 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
公司离职证明样本
2014/09/13 职场文书
一年级语文教学随笔
2015/08/14 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
Golang的继承模拟实例
2021/06/30 Golang