jquery zTree搜索高亮的例子

思路:

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

后面就根据这个light为true就高亮,false就不高亮;

后台将这些节点返回到前台,前台展示;

 

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

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

 

代码:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>






Ztree搜索高亮显示


    

Ztree搜索高亮显示

 

     

    后台代码:

    仅仅是模拟,很简单。实际根据业务查询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 getAllNodes() throws Exception{
            //初始化的时候不高亮,所以light为false
            List nodeList = new ArrayList();
            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 searchNodesByName(String id, String pid, String name) throws Exception{
            //假设搜索单板,将这些nodes返回
            List nodeList = new ArrayList();
            //搜索的时候,对于包含"单板"这个关键字的,设置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;
        }
    }
    View Code

    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;
        }
        
        
        
    }
    View Code

     

    效果:

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

    jquery zTree搜索高亮的例子_第1张图片

    2.搜索的时候:

    jquery zTree搜索高亮的例子_第2张图片

     

    转载于:https://www.cnblogs.com/tenWood/p/8811102.html

    你可能感兴趣的:(jquery zTree搜索高亮的例子)