参考博客：

https://segmentfault.com/a/1190000004657854

https://blog.csdn.net/houpengfei111/article/details/8696436

https://blog.csdn.net/qq_36785111/article/details/78873488

这里思路是：

先异步加载所有节点，同时判断所有节点是否异步加载完毕，如果所有节点全部加载完毕时设置搜索按钮可点击；

搜索方法根据所有节点进行模糊查询getNodesByParamFuzzy，然后将查找到的节点和其所有父节点显示，其他节点隐藏；

代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="resources/zTreeStyle/zTreeStyle.css" type="text/css">

<link rel="stylesheet" type="text/css" href="resources/bootstrap/bootstrap.min.css">

<title>index</title>

</head>

<body>

    <div class="container">

        <h4>Ztree异步加载使用例子</h4>

        <input type="text" id="search" /> &nbsp; <input type="button" id="btn" value="搜素" onclick="search()"/>

        <ul id="zTree" class="ztree"></ul>

    </div>

</body>

<script src="resources/js/jquery.min.js"></script>

<script type="text/javascript" src="resources/js/jquery.ztree.all.min.js"></script>

<script type="text/javascript" src="resources/js/jquery.ztree.exhide.min.js"></script>

<script type="text/javascript">

var setting = {

        async: {

            enable: true,

            url:"asyncGetNodes",

            autoParam:["id", "pid", "name"],

            dataFilter: filter

        },

        data:{

            simpleData:{

                enable: true,

                idKey:'id',

                pIdKey:'pid',

                rootPId: 0

            }

        },

        view:{

            showIcon: false

        },

        callback: {

            onAsyncSuccess:onAsyncSuccess

          }

};

$(document).ready(function(){

    initZTree();

});

/**

 * 节点加载完的回调函数，加载方式依旧是分批加载，但是不是等用户展开节点才去加

 * 载，而是让它自动完成加载，这里不好的地方是依旧要加载全部数据，所以必须等待

 * 它加载完才能使用搜索功能

 */

function onAsyncSuccess(event, treeId, treeNode, msg) {

    //console.log('success');

    var zTreeObj = $.fn.zTree.getZTreeObj(treeId);

    var nodes = zTreeObj.transformToArray(zTreeObj.getNodes());

    for (var i = 0; i < nodes.length; i++) {

        // 判断节点是否已经加载过，如果已经加载过则不需要再加载

         if (!nodes[i].zAsync) {

             zTreeObj.reAsyncChildNodes(nodes[i], 'refresh', true);

         }

    }

}

function filter(treeId, parentNode, childNodes) {

    return childNodes;

}

//初始化树

function initZTree(){

    $.ajax({

          url:"asyncGetNodes",

          type:"post",

          dataType: "json",

          success: function(data){

              console.log(data);

              var zTreeObj = $.fn.zTree.init($("#zTree"),setting, data);

              //让第一个父节点展开

              var rootNode_0 = zTreeObj.getNodeByParam('pid',0,null);

              zTreeObj.expandNode(rootNode_0, true, false, false, false);

              console.log('expended');

              //搜索按钮不可用

              $('#btn').attr('disabled','disabled');

              zTreeAsyncReady('zTree',function(){

                 console.log('已经全部加载完了');

                 $('#btn').removeAttr('disabled','disabled');

              });

          },

          error: function(){

          }

      });

}

//判断树节点是否已经全部加载完

function zTreeAsyncReady(treeId, f){

     var zTreeObj = $.fn.zTree.getZTreeObj(treeId); 

     zTreeAsyncReady.timer = setInterval(function(){

         var nodes = zTreeObj.getNodesByFilter(function(node) {

            return !node.zAsync;

         });

         if(nodes.length==0){

             clearInterval(zTreeAsyncReady.timer);

             zTreeAsyncReady.timer == null;

             zTreeAsyncReady.done = true;

         }

         console.log('没执行完');

         if (zTreeAsyncReady.done) {

              f();

         }

     },100);

}

/**

 * 搜索方法

 */

function search(){

    var treeObj = $.fn.zTree.getZTreeObj('zTree');

    var value = $.trim($('#search').val());

    if(value == ""){

        var hides = treeObj.getNodesByParam("isHidden", true);    //显示所有隐藏节点

        treeObj.showNodes(hides);

        return;

    }

    //查找节点

    var nodes = treeObj.getNodesByParamFuzzy('name', value);

    if(nodes.length==0){

        alert('未搜索到数据！');

        return;

    }

    //隐藏所有节点

    var all = treeObj.transformToArray(treeObj.getNodes());

    for (var i = 0; i < all.length; i++) {

        treeObj.hideNode(all[i]);

    }

    //展示查找到的节点

    for (var i = 0; i < nodes.length; i++) {

        treeObj.showNode(nodes[i]);//显示查到节点

        var parentNodes = [];

        getParentsNode(nodes[i], parentNodes);

        treeObj.showNodes(parentNodes);    ////显示其所有父节点

        treeObj.expandAll(true);//展开所有查询到的内容

    }

}

/**

 * 获取所有节点的父节点

 */

function getParentsNode(node, array){

    var parentNode = node.getParentNode();

    if(parentNode!=null){

        array.push(parentNode);

        getParentsNode(parentNode, array);

    }

    return;

}

</script>

</html>

后台异步加载节点的代码：仅仅是模拟使用的；很简单的模拟：

package com.cy.controller;

import java.util.ArrayList;

import java.util.List;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;

import com.test.model.Node;

@Controller

public class ZtreeController {

    @RequestMapping("/asyncGetNodes")

    @ResponseBody

    public List<Node> asyncGetNodes(String id, String pid, String name) throws Exception{

        List<Node> nodeList = new ArrayList<Node>();

        if(id==null){

            nodeList.add(new Node("1","0","硬件规格","false","true"));

            nodeList.add(new Node("2","0","软件规格","false","true"));

            return nodeList;

        }

        if(id.equals("1")){

            nodeList.add(new Node("10","1","单板","false","true"));

            nodeList.add(new Node("11","1","子卡","false","true"));

            nodeList.add(new Node("12","1","设备","false","true"));

        }else if(id.equals("2")){

            nodeList.add(new Node("20","2","java","false","true"));

            nodeList.add(new Node("21","2","jscript","false","true"));

            nodeList.add(new Node("22","2","php","false","true"));

        }else if(id.equals("10")){

            nodeList.add(new Node("100",id,"单板_00","false","true"));

            nodeList.add(new Node("101",id,"单板_00","false","false"));

        }else if(id.equals("100")){

            nodeList.add(new Node("1000",id,"单板_00_00","false","false"));

        }

        Thread.sleep(1000);

        return nodeList;

    }

}

如果有更好的ztree异步搜索的方法，欢迎大伙留言。不胜感激！！

效果：

jquery zTree异步搜索的例子--搜全部节点的更多相关文章

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

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

  2. jquery ztree异步搜索

    一.初始异步加载树 初始化默认给出一个根结点,再结合异步加载的方式手动触发默认加载第一层,如图: 代码如下: var treeSetting = { async: { enable: true, ur ...

  3. jquery zTree异步加载的例子

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

  4. JQuery ztree 异步加载实践

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

  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. zTree异步加载展开第一级节点

    在 setting 中的 callback 中加上 onAsyncSuccess:onAsyncSuccess 回调函数 , 然后实现回调函数 var isFirst = true;function ...

  9. jquery zTree搜索高亮的例子

    思路: 搜索的时候发请求到后台,后台根据关键字找到匹配的节点,并将这些节点添加一个标志light: 后面就根据这个light为true就高亮,false就不高亮: 后台将这些节点返回到前台,前台展示: ...

随机推荐

  1. SQLI DUMB SERIES-6

    less6 输入 ?id=1" 说明双引号未被过滤,输入的id被一对双引号所包围,存在注入点,可以闭合双引号. 而输入正常时 情况和less5相同,因此注入同less5.

  2. 2016 ACM-ICPC EC-Final

    题目链接:Uva传送门 CFGym传送门 UVALive7897 Number Theory Problem (找规律签到) 思路: 8的幂次都是可以的,因为an-1一定能分解成a-1乘上一个多项式. ...

  3. 在学习linux基础入门时的一些问题总结（1）

    本周在实验楼完成了<linux基础入门>的21个实验,虽然之前已经学习过linux的相关课程,对linux下的命令也有一些了解和实践,但完成这21个实验以及35个练习题仍然遇到了许多的问题 ...

  4. 基本数据类型，数字int字符串str

    基本数据类型 数字 int 字符串 str 布尔值 bool 列表 list 字典 dict 元组 tuple(待续...) 整数 int - 创建 a = 123 a = int(123) - 转换 ...

  5. Next.js v4.1.4 文档中文翻译【转载】

    最近想稍稍看下 React的 SSR框架 Next.js,因为不想看二手资料, 所以自己跑到 Github上看,Next.js的文档是英文的,看倒是大概也能看得懂, 但有些地方不太确定,而且英文看着毕 ...

  6. Gravitee.io alert 引擎架构

    alert 在我们的实际开发中应用的场景很多,我们需要进行系统状态的查看,以及特殊异常请求的处理 参考架构图 从下图可以看出,还是很方便的,同时支持slack email... 的实时消息通知,而且我 ...

  7. FastAdmin Git 开发更新流程

    更加简洁的流程 FastAdmin 使用 Git 更新的新用法 https://www.cnblogs.com/F4NNIU/p/9120365.html

  8. C 语言中的 switch 语句 case 后面是否需要加大括号

    事件原由为编辑器的自动缩进,当 case 换行后不自动缩进. 于是在在想可以可否在 case 后面再大括号,让其自动缩进. 查了资料,发现 case 是可以加大括号的,相当于代码块. 而且还有另外一个 ...

  9. JavaScript编码风格

    最近在看前端大牛Nicbolas C.Zakas的<编写可维护的JavaScript代码>一书.觉得里面的很多知识点都写的很好,所以,就写篇博文,总结一下吧!编码规范对于程序设计来说是很重 ...

  10. es高级部分

    1 关于机器 配置. 内存:上亿的数据一般需要64G内存的服务器.劲量不要使用小于32G 内存的服务器. cpu:es 对cpu 要求依赖不如内存.一般要求2-8 核就可以了. 磁盘:es 对磁盘依赖 ...