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

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.搜全部的时候、初始化的时候

2.搜索的时候：

posted on 2018-04-12 23:01 有点懒惰的大青年阅读(762) 评论(1) 收藏举报