参考博客：https://www.cnblogs.com/henuyuxiang/p/6677397.html

前台代码

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <link rel="stylesheet" href="resources/zTreeStyle/zTreeStyle.css" type="text/css">
  7. <link rel="stylesheet" type="text/css" href="resources/bootstrap/bootstrap.min.css">
  8. <title>index</title>
  9. </head>
  10. <body>
  11.     <div class="container">
  12.         <h4>Ztree异步加载使用例子</h4>
  13.         <input type="text" id="search" /> &nbsp; <input type="button" id="btn" value="搜素" onclick="search()"/>
  14.         <ul id="zTree" class="ztree"></ul>
  15.     </div>
  16. </body>
  17. <script src="resources/js/jquery.min.js"></script>
  18. <script type="text/javascript" src="resources/js/jquery.ztree.all.min.js"></script>
  19. <script type="text/javascript" src="resources/js/jquery.ztree.exhide.min.js"></script>
  20. <script type="text/javascript">
  21. var setting = {
  22.         async: {
  23.             enable: true,
  24.             url:"asyncGetNodes",
  25.             autoParam:["id", "pid", "name"],
  26.             dataFilter: filter
  27.         },
  28.         data:{
  29.             simpleData:{
  30.                 enable: true,
  31.                 idKey:'id',
  32.                 pIdKey:'pid',
  33.                 rootPId: 0
  34.             }
  35.         },
  36.         view:{
  37.             showIcon: false
  38.         },
  39.         callback: {
  40.             onNodeCreated: zTreeOnNodeCreated
  41.           }
  42. };
  43. $(document).ready(function(){
  44.     initZTree();
  45.  
  46. });
  47.  
  48. /**
  49.  * 搜索
  50.  */
  51. function search(){
  52.     var param = $.trim($("#search").val());
  53.     var treeObj = $.fn.zTree.getZTreeObj("zTree");
  54.     if(param != ""){
  55.         param = encodeURI(encodeURI(param));
  56.         treeObj.setting.async.otherParam=["param", param];
  57.       }else {
  58.         //搜索参数为空时必须将参数数组设为空
  59.         treeObj.setting.async.otherParam=[];
  60.       }
  61.  
  62.       treeObj.reAsyncChildNodes(null, "refresh");
  63. }
  64.  
  65. function zTreeOnNodeCreated(event, treeId, treeNode){
  66.     var param = $.trim($("#search").val());
  67.     var treeObj = $.fn.zTree.getZTreeObj(treeId);
  68.     if(param!="" && treeNode.isParent){
  69.         treeObj.reAsyncChildNodes(treeNode, "refresh",false);
  70.     }
  71. }
  72.  
  73. function filter(treeId, parentNode, childNodes) {
  74.     return childNodes;
  75. }
  76. //初始化树
  77. function initZTree(){
  78.     $.ajax({
  79.           url:"asyncGetNodes",
  80.           type:"post",
  81.           dataType: "json",
  82.           success: function(data){
  83.               console.log(data);
  84.               var zTreeObj = $.fn.zTree.init($("#zTree"),setting, data);
  85.               //让第一个父节点展开
  86.               var rootNode_0 = zTreeObj.getNodeByParam('pid',0,null);
  87.               zTreeObj.expandNode(rootNode_0, true, false, false, false);
  88.           },
  89.           error: function(){
  90.  
  91.           }
  92.       });
  93. }
  94.  
  95. </script>
  96. </html>

Node.java:

  1. package com.test.model;
  2.  
  3. public class Node {
  4.     private String id;
  5.     private String pid;
  6.     private String name;
  7.     private String open;
  8.     private String isParent;
  9.  
  10.     public Node(String id, String pid, String name, String open, String isParent) {
  11.         super();
  12.         this.id = id;
  13.         this.pid = pid;
  14.         this.name = name;
  15.         this.open = open;
  16.         this.isParent = isParent;
  17.     }
  18.     public String getId() {
  19.         return id;
  20.     }
  21.     public void setId(String id) {
  22.         this.id = id;
  23.     }
  24.     public String getPid() {
  25.         return pid;
  26.     }
  27.     public void setPid(String pid) {
  28.         this.pid = pid;
  29.     }
  30.     public String getName() {
  31.         return name;
  32.     }
  33.     public void setName(String name) {
  34.         this.name = name;
  35.     }
  36.     public String getOpen() {
  37.         return open;
  38.     }
  39.     public void setOpen(String open) {
  40.         this.open = open;
  41.     }
  42.     public String getIsParent() {
  43.         return isParent;
  44.     }
  45.     public void setIsParent(String isParent) {
  46.         this.isParent = isParent;
  47.     }
  48.  
  49. }

后台代码：

  1. package com.cy.controller;
  2.  
  3. import java.util.ArrayList;
  4. import java.util.List;
  5. import org.springframework.stereotype.Controller;
  6. import org.springframework.web.bind.annotation.RequestMapping;
  7. import org.springframework.web.bind.annotation.ResponseBody;
  8. import com.alibaba.fastjson.JSON;
  9. import com.test.model.Node;
  10.  
  11. @Controller
  12. public class ZtreeController {
  13.     @RequestMapping("/asyncGetNodes")
  14.     @ResponseBody
  15.     public List<Node> asyncGetNodes(String id, String pid, String name) throws Exception{
  16.         List<Node> nodeList = new ArrayList<Node>();
  17.         if(id==null){
  18.             nodeList.add(new Node("1","0","硬件规格","false","true"));
  19.             nodeList.add(new Node("2","0","软件规格","false","true"));
  20.             return nodeList;
  21.         }
  22.  
  23.         if(id.equals("1")){
  24.             nodeList.add(new Node("10","1","单板","false","true"));
  25.             nodeList.add(new Node("11","1","子卡","false","true"));
  26.             nodeList.add(new Node("12","1","设备","false","true"));
  27.         }else if(id.equals("2")){
  28.             nodeList.add(new Node("20","2","java","false","true"));
  29.             nodeList.add(new Node("21","2","jscript","false","true"));
  30.             nodeList.add(new Node("22","2","php","false","true"));
  31.         }else if(id.equals("10")){
  32.             nodeList.add(new Node("100",id,"单板_00","false","true"));
  33.             nodeList.add(new Node("101",id,"单板_00","false","false"));
  34.         }else if(id.equals("100")){
  35.             nodeList.add(new Node("1000",id,"单板_00_00","false","false"));
  36.         }
  37.  
  38.         Thread.sleep(1000);
  39.         return nodeList;
  40.     }
  41. }

说明：

1.通过在otherParam数组中设值的方式将搜索参数带到后台（无参数时必须将otherParam设为空数组否则一直会将前一次的参数带到后台）；

2.在结点创建完成后的回调函数onNodeCreated中进行手动异步加载。每个节点都进行异步加载，这时候带上搜索的关键字进行查询，达到搜索目的；

3.我这边第一次因为要将第一个父节点展开，所以第一次请求第一级父级节点，然后手动$.fn.zTree.init($("#zTree"),setting, data)，这时候expandNode第一个父级节点，是自动异步加载的；

4.如果点击搜索，自动带上param参数，这个参数就是搜索的关键字，然后每个节点创建时候触发onNodeCreated事件，每个节点只要是父节点，都会进行异步加载；

5.我这边后台没有写根据param进行查询，仅仅是一个例子而已。真正根据param去查询就行了。

初始化的时候默认加载第一个父级节点：

搜索的时候加载全部节点，要包含节点名字:

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

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

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

  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. #include<bits/stdc++.h>的使用

    #include<bits/stdc++.h>包含了C++里面所有的库函数,因此在写任何程序的时候只需要加上#include<bits/stdc++.h>即可.

  2. 转载《Oracle的tnsnames.ora配置(PLSQL Developer)》

    源地址:https://www.cnblogs.com/qq3245792286/p/6212617.html. 首先打开tnsnames.ora的存放目录,一般为D:\app\Administrat ...

  3. putty登陆sourceforge.net（密钥的设置）

    现在直接启动putty.exe是不能登陆sourceforge.net 的.按vps的方式,输入地址.用户名和密码后,程序就自动关闭.在登入前需要安装密匙,具体做法如下: 首先得生成一个SSH Key ...

  4. Go Example--超时处理

    package main import ( "fmt" "time" ) func main() { c1 := make(chan string, 1) go ...

  5. CH4912 Meteors

    题意 4912 Meteors 0x49「数据结构进阶」练习 描述 Byteotian Interstellar Union有N个成员国.现在它发现了一颗新的星球,这颗星球的轨道被分为M份(第M份和第 ...

  6. CH#46A 磁力块

    题意 磁力块 CH Round #46 - 「Adera 8」杯NOI模拟赛 描述 在一片广袤无垠的原野上,散落着N块磁石.每个磁石的性质可以用一个五元组(x,y,m,p,r)描述,其中x,y表示其坐 ...

  7. Eclipse工具的设置

    1 Eclipse的工作空间和新建工程1.1: 工作空间* 其实就是我们写的源代码所在的目录 1.2: 创建工程(项目)* 右键/Package Explore 空白区/new /Java Proje ...

  8. SolrCore Initialization Failures - Max direct memory is likely too low

    org.apache.solr.common.SolrException:org.apache.solr.common.SolrException: The max direct memory is ...

  9. terraform 几个方便的工具

    几个方便的terraform 工具,方便了解terraform terraform-docs 方便的查看资源的信息(支持markdown,json 格式),对于ci/cd 很方便 项目地址 https ...

  10. Linux或树莓派3——挂载U盘、移动硬盘并设置rwx权限

    话说最近在树莓派上搭建了一个owncloud,因为树莓派的存储空间有限,就插了个16G的U盘,然后设置成开机自动挂载.这里稍微注意一下的是U盘的格式最好不要NTFS,因为一般情况下NTFS格式的文件系 ...