jquery ztree异步搜索(搜叶子)实践


Posted in Javascript onFebruary 25, 2016

一、初始异步加载树

 初始化默认给出一个根结点,再结合异步加载的方式手动触发默认加载第一层,如图:

jquery ztree异步搜索(搜叶子)实践

代码如下:

var treeSetting = {
 async: {
 enable: true, <a href="http://my.oschina.net/wealpan/admin/"xxx/demo.do?method=listByTree" rel="nofollow">url:"xxx/demo.do?method=listByTree</a>",
 dataType:"json",
 autoParam:["id=pid"]
 },
 view: {
 dblClickExpand: true,
 selectedMulti: false,
 expandSpeed: ($.browser.msie && parseInt($.browser.version)<=6)?"":"fast"
 },
 data: {
 simpleData: {
  enable:true,
  idKey: "id",
  pIdKey: "pid",
  rootPId: "root"
 }
 },
 callback: {
 onNodeCreated: zTreeOnNodeCreated
 }
};
 
//默认根结点
var rootNode = {"id":0, "pid":"root", "name":"商品分类", "open":true, "isParent":true};
 
$(document).ready(function(){
 var zTreeObj = $.fn.zTree.init($("#tree"), treeSetting, rootNode);
 var node = zTreeObj.getNodeByParam("id", 0, null);
 zTreeObj.reAsyncChildNodes(node, "refresh");
});

二、异步搜索叶子结点

    在使用JQuery ZTREE时可能要用到异步的方式模糊搜索叶子结点,如图:

 jquery ztree异步搜索(搜叶子)实践

    而如果只使用ZTREE自带的展开方法zTreeObj.expandNode只是会展开改结点,无法触发异步加载;这时候就必须手动调用异步加载的方法进行处理,解决思路如下:   
    通过在otherParam数组中设值的方式将搜索参数带到后台(无参数时必须将otherParam设为空数组否则一直会将前一次的参数带到后台);在结点创建完成后的回调函数onNodeCreated中进行手动异步加载。

代码如下:

function searchM() {
 var param = $.trim($("input[name='param']").val());
 var treeObj = $.fn.zTree.getZTreeObj("tree");
 var node = treeObj.getNodeByParam("id", 0, null);
 if(param != ""){
 param = encodeURI(encodeURI(param));
 treeObj.setting.async.otherParam=["param", param];
 }else {
 //搜索参数为空时必须将参数数组设为空
 treeObj.setting.async.otherParam=[];
 }
 treeObj.reAsyncChildNodes(node, "refresh");
}
 
function zTreeOnNodeCreated(event, treeId, treeNode) {
 var param <span></span><span></span>= $.tr<span></span>im($("input[name='param']").val());
 var treeObj = $.fn.zTree.getZTreeObj("tree");
 //只有搜索参数不为空且该节点为父节点时才进行异步加载
 if(param != "" && treeNode.isParent){
 treeObj.reAsyncChildNodes(treeNode, "refresh");
 } 
};

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

以上就是关于jquery ztree异步搜索的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
JQuery ztree 异步加载实例讲解
Feb 25 #Javascript
Node.js编写组件的三种实现方式
Feb 25 #Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 #Javascript
你所未知的3种Node.js代码优化方式
Feb 25 #Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 #Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 #Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 #Javascript
You might like
一棵php的类树(支持无限分类)
2006/10/09 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
初学JavaScript第二章
2008/09/30 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
Django 用户认证组件使用详解
2019/07/23 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
基于Python解密仿射密码
2019/10/21 Python
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
清洁工表扬信
2014/01/08 职场文书
啦啦队口号大全
2014/06/16 职场文书
基层党组织整改方案
2014/10/25 职场文书
世界遗产的导游词
2015/02/13 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
详解Python为什么不用设计模式
2021/06/24 Python
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS