思路：

搜索的时候发请求到后台，后台根据关键字找到匹配的节点，并将这些节点添加一个标志light；

后面就根据这个light为true就高亮，false就不高亮；

后台将这些节点返回到前台，前台展示；

我这边后台处理的多，因为感觉后台用关键字来搜索，然后添加light标志，返回前台；感觉快些；

当然，仅仅前端处理也可以。

代码：

<%@ 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>Ztree搜索高亮显示</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 = {

        data:{

            simpleData:{

                enable: true,

                idKey:'id',

                pIdKey:'pid',

                rootPId: 0

            }

        },

        view:{

            selectedMulti:false,    //不允许同时选中多个节点

            showIcon: false,

            fontCss:null

        },

        callback: {

          }

};

$(document).ready(function(){

    initZTree();

});

/*搜索的时候设置返回的treeNode,添加light属性为true

*初始化treeNode的light为false

*根据light属性来设置高亮，如果true就高亮

*/

function setFontCss(treeId, treeNode){

    return !!treeNode.light?{background: '#eee',border: '1px solid #888'}:{};

}

//初始化树

function initZTree(){

    setting.view.fontCss=null;

    $.ajax({

          url:"getAllNodes",

          type:"post",

          dataType: "json",

          success: function(data){

              console.log(data);

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

          }

      });

}

/**

 * 搜索方法

 */

function search(){

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

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

    //如果输入为空直接初始化；

    if(value == ""){

        initZTree();

        return;

    }

    //查找节点

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

    if(nodes.length==0){

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

        return;

    }else{

        searchNodesByName(value);

    }

}

function searchNodesByName(name){

    setting.view.fontCss=setFontCss;

    $.ajax({

          url:"searchNodesByName",

          type:"post",

          dataType: "json",

          success: function(data){

              console.log(data);

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

          }

     });

}

</script>

</html>

后台代码：

仅仅是模拟，很简单。实际根据业务查询nodelist即可；

Controller：

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("/getAllNodes")

    @ResponseBody

    public List<Node> getAllNodes() throws Exception{

        //初始化的时候不高亮，所以light为false

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

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

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

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

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

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

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

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

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

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

        nodeList.add(new Node("101","10","单板_02","false","false",false));

        nodeList.add(new Node("102","10","单板_03","false","false",false));

        Thread.sleep(1000);

        return nodeList;

    }

    @RequestMapping("/searchNodesByName")

    @ResponseBody

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

        //假设搜索单板，将这些nodes返回

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

        //搜索的时候，对于包含"单板"这个关键字的，设置light为true，添加高亮标识

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

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

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

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

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

        Thread.sleep(1000);

        return nodeList;

    }

}

Model：Node：

package com.test.model;

public class Node {

    private String id;

    private String pid;

    private String name;

    private String open;

    private String isParent;

    private boolean light;        //标识是不是要高亮

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

        super();

        this.id = id;

        this.pid = pid;

        this.name = name;

        this.open = open;

        this.isParent = isParent;

        this.light = light;

    }

    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;

    }

    public boolean isLight() {

        return light;

    }

    public void setLight(boolean light) {

        this.light = light;

    }

}

效果：

1.搜全部的时候、初始化的时候

2.搜索的时候：

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异步加载的例子

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

  4. jquery ztree异步搜索

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

  5. 【zTree】 zTree使用的 小例子

    使用zTree树不是第一次了  但是 还是翻阅着之前做的 对照着 使用起来比较方便  这里就把小例子列出来   总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先  在 ...

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

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

  7. 自写 zTree搜索功能 -- 关键字查询 -- 递归无限层

    唠叨一哈 前两天朋友跟我说要一个ztree的搜索功能,我劈头就是一巴掌:这种方法难道无数前辈还做少了?自己去找,我很忙~然后我默默地蹲着写zTree的搜索方法去了.为什么呢?因为我说了句“找不到是不可 ...

  8. zTree搜索

    自写 zTree搜索功能 -- 关键字查询 -- 递归无限层 唠叨一哈 前两天朋友跟我说要一个ztree的搜索功能,我劈头就是一巴掌:这种方法难道无数前辈还做少了?自己去找,我很忙~然后我默默地蹲着写 ...

  9. jQuery+zTree

    0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 ...

随机推荐

  1. Python--函数对象@命名空间与作用域@包函数@装饰器@迭代器@内置函数

    一.函数对象 函数(Function)作为程序语言中不可或缺的一部分,但函数作为第一类对象(First-Class Object)却是 Python 函数的一大特性. 那到底什么是第一类对象(Firs ...

  2. hdu4338 Simple Path

    Everybody knows that totalfrank has absolutely no sense of direction. Getting lost in the university ...

  3. LeetCode–Flip Game

    You are playing the following Flip Game with your friend: Given a string that contains only these tw ...

  4. Redis 5.0.0 releases notes

    Redis 5.0 release notes ======================= ---------------------------------------------------- ...

  5. LG5901 【模板】欧拉定理

    题意 题目描述 给你三个正整数,$a,m,b$,你需要求: $a^b \mod m$ 输入输出格式 输入格式: 一行三个整数,$a,m,b$ 输出格式: 一个整数表示答案 输入输出样例 输入样例#1: ...

  6. CH4912 Meteors

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

  7. 使用Intellij IDEA新建Web项目

    在学习Servlet的过程中,发现大多数的教程都是使用MyEclipse或者Eclipse来创建Web项目,这让一直使用高逼格的LZ很是不爽,于是自己配置了一下使用Intellij IDEA新建了We ...

  8. 02C++namespace命名空间

    一.C++命名空间基本常识 所谓namespace,是指标识符的各种可见范围.C++标准程序库中的所有标识符都被定义于一个名为std的namespace中. 1.<iostream>和&l ...

  9. Git中清除远程仓库HTTPS认证信息的方法

    Git远程仓库同步时用户认证有两种方式:HTTPS.SSH,对应的Git仓库上有两个不同的链接地址. https方式使用账号和密码授权,简单易用,便于进行权限细分管理,而且防火墙一般会打开 http ...

  10. Linux系统如何模拟Http的get或post请求？

    一.get请求: 1.使用curl命令: curl “http://www.baidu.com” 如果这里的URL指向的是一个文件或者一幅图都可以直接下载到本地 curl -i “http://www ...