思路：

搜索的时候发请求到后台，后台根据关键字找到匹配的节点，并将这些节点添加一个标志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. 1px的实现方法

    1.用伪元素实现 .border_1px_top{ position:relative;} .border_1px_top:before{ content: ""; positio ...

  2. Apache 启动失败没有错误信息的解决办法

    在cmd命令行 进入到apache安装bin目录 执行以下 httpd.exe -w -n "apache2.2" -k start 注意apache2.2是你安装的apache服 ...

  3. mvc core2.1 Identity.EntityFramework Core 实例配置 (四）

    https://docs.microsoft.com/zh-cn/aspnet/core/security/authentication/customize_identity_model?view=a ...

  4. 【Wannafly挑战赛22A计数器】【裴蜀定理】

    https://www.nowcoder.com/acm/contest/160/A 题目描述 有一个计数器,计数器的初始值为0,每次操作你可以把计数器的值加上a1,a2,...,an中的任意一个整数 ...

  5. priority_queue的基本用法

    #include<bits/stdc++.h> using namespace std; int main() { ]; ;i<=;i++) a[i]=i; sort(a+,a++, ...

  6. Maven 整理总结（一）

    使用maven来,今天对maven的使用进行一下总结.总经过程中,参考到的资料,我会尽量列举在下面,如果有涉及侵权的问题,挺联系我,我立即改正. 孤傲苍狼博客 http://www.cnblogs.c ...

  7. mysql插入操作跳过(ignore)、覆盖(replace into)、更新(on duplicate key)

    原帖地址:http:.html .insert ignore into 当插入数据时,如出现错误时,如重复数据,将不返回错误,只以警告形式返回.所以使用ignore请确保语句本身没有问题,否则也会被忽 ...

  8. day 47 html 学习 css 学习

    前端基础之CSS CSS实例 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS(Cascading Style Sheet,层叠样式表)定义如何显示 ...

  9. oracle-网络

    e10835 net reference /u01/app/oracle/diag/tnslsnr/oracle1/listener/trace/listener.log TIMESTAMP * CO ...

  10. What happens to our code? JavaScript 代码是怎样执行的

    1. 我们的代码第一步会被parser 语法分析程序分析. 如果没有报错之后 2. 生产SyntaxTree, 我们的代码会转换成machine code 3. 最终 我们的代码会被运行出来. 下面的 ...