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 相关文章推荐
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
js实现表格数据搜索
Aug 09 Javascript
JS 基本概念详细介绍
Oct 16 Javascript
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
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
PHP脚本的10个技巧(5)
2006/10/09 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
python动态性强类型用法实例
2015/05/09 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
Python中的self用法详解
2019/08/06 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
python实现学生信息管理系统源码
2021/02/22 Python
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
《明天,我们毕业》教学反思
2014/04/24 职场文书
企业晚会策划方案
2014/05/29 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
岗位安全生产责任书
2014/07/28 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
党建工作整改措施
2014/10/28 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python