思路：

搜索的时候发请求到后台，后台根据关键字找到匹配的节点，并将这些节点添加一个标志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. Thinkphp的知识内容

    详细的介绍内容:https://baike.so.com/doc/5504725-5740469.html

  2. Maven 整理总结（一）

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

  3. ionic1实现热更新以版本检测更新安装包的方法

    1.需要下载热更新插件:插件名称是cordova-hot-code-push 首先打开cli,执行命令 npm install -g cordova-hot-code-push-cli 此功能主要是为 ...

  4. Go Example--通道方向

    package main import "fmt" func main() { pings := make(chan string, 1) pongs := make(chan s ...

  5. Python知识点整理，基础2 - 列表操作

  6. adx-desc-adtype统计

    数据分析脚本: filepath="request.log.2017-12-01-15" File.open("#{filepath}").each do |l ...

  7. centos7上部署vnc服务器并实现远程桌面

    centos7上进行一下操作 [root@localhost ~]# yum install tigervnc-server -y#安装vnc服务器 Loaded plugins: fastestmi ...

  8. debezium sql server 集成

    debezium 是一个方便的cdc connector 可以帮助我们解决好多数据实时变更处理.数据分析.微服务的数据通信 从上次跑简单demo到现在,这个工具是有好多的变更,添加了好多方便的功能,支 ...

  9. ksonnet 一个简化编写以及部署kubernetes的工具

    ksonnet 是一个基于jsonnet的快速简化kubernetes yaml 配置的工具,可以实现配置的复用 同时也包含一个registry 的概念,可以实现可复用组件的分发,同时支持helm 环 ...

  10. C# to IL 2 IL Basics(IL基础)

    This chapter and the next couple of them will focus on and elicit a simple belief of ours,that if yo ...