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

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

前台代码

<%@ 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: {

            onNodeCreated: zTreeOnNodeCreated

          }

};

$(document).ready(function(){

    initZTree();

});

/**

 * 搜索

 */

function search(){

    var param = $.trim($("#search").val());

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

    if(param != ""){

        param = encodeURI(encodeURI(param));

        treeObj.setting.async.otherParam=["param", param];

      }else {

        //搜索参数为空时必须将参数数组设为空

        treeObj.setting.async.otherParam=[];

      }

      treeObj.reAsyncChildNodes(null, "refresh");

}

function zTreeOnNodeCreated(event, treeId, treeNode){

    var param = $.trim($("#search").val());

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

    if(param!="" && treeNode.isParent){

        treeObj.reAsyncChildNodes(treeNode, "refresh",false);

    }

}

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);

          },

          error: function(){

          }

      });

}

</script>

</html>

Node.java:

package com.test.model;

public class Node {

    private String id;

    private String pid;

    private String name;

    private String open;

    private String isParent;

    public Node(String id, String pid, String name, String open, String isParent) {

        super();

        this.id = id;

        this.pid = pid;

        this.name = name;

        this.open = open;

        this.isParent = isParent;

    }

    public String getId() {

        return id;

    }

    public void setId(String id) {

        this.id = id;

    }

    public String getPid() {

        return pid;

    }

    public void setPid(String pid) {

        this.pid = pid;

    }

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name = name;

    }

    public String getOpen() {

        return open;

    }

    public void setOpen(String open) {

        this.open = open;

    }

    public String getIsParent() {

        return isParent;

    }

    public void setIsParent(String isParent) {

        this.isParent = isParent;

    }

}

后台代码：

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;

    }

}

说明：

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

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

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

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

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

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

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

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

jquery zTree异步搜索的例子--搜全部节点
参考博客: https://segmentfault.com/a/1190000004657854 https://blog.csdn.net/houpengfei111/article/detail ...
jquery ztree异步搜索
一.初始异步加载树初始化默认给出一个根结点,再结合异步加载的方式手动触发默认加载第一层,如图: 代码如下: var treeSetting = { async: { enable: true, ur ...
jquery zTree异步加载的例子
下面是使用zTree异步加载的一个例子: 1)初始化树的时候是ajax请求,返回nodes列表来初始化树的:如果一开始就异步的话,$.fn.zTree.init($("#zTree" ...
JQuery ztree 异步加载实践
本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说 ...
Jquery Ztree异步加载树
1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...
bootstrap jQuery Ztree异步载入数据，check选择&可加入、改动、删除节点
效果图: 一.下载zTree插件地址:http://www.ztree.me 二.html代码 <link href="../Scripts/zTree/css/zTreeStyle ...
ASP.NET MVC 中使用 jQuery 实现异步搜索功能
常见的几种异步请求方式: Ajax.BeginForm 异步提交文本的形式 Ajax.ActionLinkk 文本链接的形式 Client Validataion 客户端的认证一.用jQuer ...
zTree异步加载展开第一级节点
在 setting 中的 callback 中加上 onAsyncSuccess:onAsyncSuccess 回调函数 , 然后实现回调函数 var isFirst = true;function ...
jquery zTree搜索高亮的例子
思路: 搜索的时候发请求到后台,后台根据关键字找到匹配的节点,并将这些节点添加一个标志light: 后面就根据这个light为true就高亮,false就不高亮: 后台将这些节点返回到前台,前台展示: ...

随机推荐

如何解决VMware 12 安装Ubuntu 16.04时无网络连接问题
刚安装玩Ubuntu,打开后上网没有网络连接 ,点击右上角的数据连接,显示已经启动联网,但是用火狐还是无法上网: 解决方法如下: 先查看虚拟机的网络适配器:点击虚拟机左上角的编辑,里面有个网络适配器 ...
杭电oj2000-C语言
题目题目 Problem Description 输入三个字符后,按各字符的ASCII码从小到大的顺序输出这三个字符. Input 输入数据有多组,每组占一行,有三个字符组成,之间无空格. Outp ...
java基本数据类型的范围
System.out.println("BYTE MAX_VALUE = " + Byte.MAX_VALUE); System.out.println("BYTE MI ...
python3 sort
#https://docs.python.org/3.5/howto/sorting.html?highlight=sort #In Python 3.2, the functools.cmp_to_ ...
【mybatis源码学习】调试mybatis的第一个程序
[一].基础知识准备 mybatis-config.xml配置文件的结构 MyBatis配置文件中大标签configuration下子标签包括: configuration |--- properti ...
mysql修改用户密码
修改自己的密码(root用户,其它用户应该也差不多) 方法一: [root@localhost /]# mysqladmin -u root -p password "root" ...
[转]一致性hash算法 - consistent hashing
consistent hashing 算法早在 1997 年就在论文 Consistent hashing and random trees 中被提出,目前在 cache 系统中应用越来越广泛: 1 ...
mysql之 myloader原理介绍
myloader恢复主要流程 1.首先由myloader主线程完成建库建表,依次将备份目录下建库和建表文件执行应用到目标数据库实例中: 2.接着myloader主线程会生成多个工作线程,由这些 ...
应用间通信方式HTTP和RPC
一.HTTP和RPC 1.Dobbo RPC框架 2.Sping Cloud 微服务架构下的一站式解决方案. 微服务直接使用的是 Http restful方式二.SpringCloud中服务间两种 ...
format()的简单实用笔记
# 关于format和format_map的使用# 如果要使用输出的字符串对其不仅仅是可以使用format,还可以使用ljust/rjust/center来处理,输出当然也可以是使用%来进行操作,但是 ...

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

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

随机推荐

热门专题