一、初始异步加载树

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

代码如下:
var treeSetting = {
async: {
enable: true, url:"xxx/demo.do?method=listByTree",
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时可能要用到异步的方式模糊搜索叶子结点,如图:

而如果只使用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 = $.trim($("input[name='param']").val());
var treeObj = $.fn.zTree.getZTreeObj("tree");
//只有搜索参数不为空且该节点为父节点时才进行异步加载
if(param != "" && treeNode.isParent){
treeObj.reAsyncChildNodes(treeNode, "refresh");
}
};

jquery ztree异步搜索的更多相关文章

  1. jquery zTree异步搜索的例子--搜全部节点

    参考博客: https://segmentfault.com/a/1190000004657854 https://blog.csdn.net/houpengfei111/article/detail ...

  2. jquery zTree异步搜索的例子--搜叶子节点

    参考博客:https://www.cnblogs.com/henuyuxiang/p/6677397.html 前台代码 <%@ page language="java" c ...

  3. JQuery ztree 异步加载实践

    本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说 ...

  4. jquery zTree异步加载的例子

    下面是使用zTree异步加载的一个例子: 1)初始化树的时候是ajax请求,返回nodes列表来初始化树的:如果一开始就异步的话,$.fn.zTree.init($("#zTree" ...

  5. Jquery Ztree异步加载树

    1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...

  6. bootstrap jQuery Ztree异步载入数据,check选择&amp;可加入、改动、删除节点

    效果图: 一.下载zTree插件 地址:http://www.ztree.me 二.html代码 <link href="../Scripts/zTree/css/zTreeStyle ...

  7. ASP.NET MVC 中使用 jQuery 实现异步搜索功能

    常见的几种异步请求方式: Ajax.BeginForm   异步提交文本的形式 Ajax.ActionLinkk 文本链接的形式 Client Validataion  客户端的认证 一.用jQuer ...

  8. C#使用Jquery zTree实现树状结构显示_异步数据加载

    JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面:  http://www.treejs.cn/v3/dem ...

  9. Jquery zTree结合Asp.net实现异步加载数据

    zTree结合Asp.net实现异步加载数据 实现简单操作 zTree 下载 api 访问 :http://www.ztree.me/v3/main.php 例子中用到json数据转化 newtons ...

随机推荐

  1. bzoj3946

    题解: 树套树 treap+线段树 treap就把线段树上的节点弄一下 然后修改的时候 把中间的一段一起加 把两头重新计算(二分+hash) 代码: #include<bits/stdc++.h ...

  2. 使用Messenger 从Activity发送数据到service 通过后台计算结果Log输出;

    package com.lixu.messenger; import android.app.Activity; import android.app.Service; import android. ...

  3. bootstrap的学习总结

    1.bootstrap是一个css框架,它提供了很多类,这些类中实现了内外边距,颜色,大小等样式的封装,它还提供了很多常用插件可以直接使用 2.12栅格本质上是将标签的外边距和内边距通过“格子”的思想 ...

  4. 深入理解Linux网络技术内幕——内核基础架构和组件初始化

    引导期间的内核选项     Linux允许用户把内核配置选项传给引导记录,再有引导记录传给内核,以便对内核进行调整.     start_kernel中调用两次parse_args,用于引导期间配置用 ...

  5. anu - proptypes

    //为了兼容yo var check = function () { return check; }; check.isRequired = check; export var PropTypes = ...

  6. NSScanner

    NSScanner NSScanner:该类主要实现对字符串扫描.并且该扫描必须从头到尾扫描(也可以跳到指定的地方进行扫描),开始扫描必须应用到函数,连续的数字之间可以用空格隔开,如:35 15.2 ...

  7. Uboot中start.S源码的指令级的详尽解析

    Uboot中start.S源码的指令级的详尽解析 https://www.crifan.com/files/doc/docbook/uboot_starts_analysis/release/html ...

  8. iOS 开发 Framework

    制作Framework 的好处和缺点 好处:       1.如果模块间接口定义的比较完善,模块化的程序具有很好的可扩展性与内聚性:       2.物理上的模块化便于开发过程的管理与测试,尤其是在程 ...

  9. [LeetCode&Python] Problem 412. Fizz Buzz

    Write a program that outputs the string representation of numbers from 1 to n. But for multiples of ...

  10. JAVA爬取百度贴吧图片

    package com.wang.xiaowei.utils; import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.code ...