jquery zTree搜索高亮的例子

思路：

搜索的时候发请求到后台，后台根据关键字找到匹配的节点，并将这些节点添加一个标志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搜索高亮的例子的更多相关文章

jquery zTree异步搜索的例子--搜全部节点
参考博客: https://segmentfault.com/a/1190000004657854 https://blog.csdn.net/houpengfei111/article/detail ...
jquery zTree异步搜索的例子--搜叶子节点
参考博客:https://www.cnblogs.com/henuyuxiang/p/6677397.html 前台代码 <%@ page language="java" c ...
jquery zTree异步加载的例子
下面是使用zTree异步加载的一个例子: 1)初始化树的时候是ajax请求,返回nodes列表来初始化树的:如果一开始就异步的话,$.fn.zTree.init($("#zTree" ...
jquery ztree异步搜索
一.初始异步加载树初始化默认给出一个根结点,再结合异步加载的方式手动触发默认加载第一层,如图: 代码如下: var treeSetting = { async: { enable: true, ur ...
【zTree】 zTree使用的小例子
使用zTree树不是第一次了但是还是翻阅着之前做的对照着使用起来比较方便这里就把小例子列出来总结一下使用步骤这样方便下次使用起来方便一点使用zTree树的步骤: 1.首先在 ...
Jquery zTree结合Asp.net实现异步加载数据
zTree结合Asp.net实现异步加载数据实现简单操作 zTree 下载 api 访问 :http://www.ztree.me/v3/main.php 例子中用到json数据转化 newtons ...
自写 zTree搜索功能 -- 关键字查询 -- 递归无限层
唠叨一哈前两天朋友跟我说要一个ztree的搜索功能,我劈头就是一巴掌:这种方法难道无数前辈还做少了?自己去找,我很忙~然后我默默地蹲着写zTree的搜索方法去了.为什么呢?因为我说了句“找不到是不可 ...
zTree搜索
自写 zTree搜索功能 -- 关键字查询 -- 递归无限层唠叨一哈前两天朋友跟我说要一个ztree的搜索功能,我劈头就是一巴掌:这种方法难道无数前辈还做少了?自己去找,我很忙~然后我默默地蹲着写 ...
jQuery+zTree
0 zTree简介树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 ...

随机推荐

linux报错jar包时出现“Exception in thread "main" java.lang.SecurityException: Invalid signature file digest for Manifest main attributes”
linux安装zip命令: yum install zip zip -d demo.jar META-INF/*.RSA META-INF/*.DSA META-INF/*.SF
Django项目的创建和设计模式
1.安装django pip install django 2.创建项目进入到项目文件夹的根目录下 django-admin startproject <project_name ...
【状压DP】【HDOJ1074】
http://acm.hdu.edu.cn/showproblem.php?pid=1074 Doing Homework Time Limit: 2000/1000 MS (Java/Others) ...
【liunx】linux后台执行命令：&和nohup
当我们在终端或控制台工作时,可能不希望由于运行一个作业而占住了屏幕,因为可能还有更重要的事情要做,比如阅读电子邮件.对于密集访问磁盘的进程,我们更希望它能够在每天的非负荷高峰时间段运行(例如凌晨).为 ...
LG5901 【模板】欧拉定理
题意题目描述给你三个正整数,$a,m,b$,你需要求: $a^b \mod m$ 输入输出格式输入格式: 一行三个整数,$a,m,b$ 输出格式: 一个整数表示答案输入输出样例输入样例#1: ...
LVS简介及使用
一.LVS是什么? LVS的英文全称是Linux Virtual Server,即Linux虚拟服务器.它是我们国家的章文嵩博士的一个开源项目.在linux内存2.6中,它已经成为内核的一部分,在此之 ...
Commons工具包的使用
使用步骤: 1.Java Project下新建Folder文件夹,命名lib 2.lib文件夹下把Commons-io-2.4jar包复制进去 3.右键Commons-io-2.4jar包,点击Bu ...
js中获取当前url参数值的一个方法
var $_GET = (function(){ var url = window.document.location.href.toString();//获得当前url地址并 ...
线性代数及其应用 (David C.Lay, Steven R.Lay 著)
第1章线性代数中的线性方程组 (已看) 介绍性实例经济学与工程中的线性模型 1.1 线性方程组 1.2 行化简与阶梯形矩阵 1.3 向量方程 1.4 矩阵方程Ax=b 1.5 线性方程组的解集 1 ...
FastAdmin Git 开发更新流程
更加简洁的流程 FastAdmin 使用 Git 更新的新用法 https://www.cnblogs.com/F4NNIU/p/9120365.html

jquery zTree搜索高亮的例子

jquery zTree搜索高亮的例子的更多相关文章

随机推荐

热门专题