【ztree系列】树节点的模糊查询

大家好，又见面了，我是你们的朋友全栈君。

       以前设计模糊查询的功能，一般都是针对表格来做的，还真没考虑过对tree进行模糊查询，也可能是因为遇到的数据量还没到头疼的程度吧。为了完美的实现模糊查询的效果，搞了半天css，对输入框显示效果的设置更是修改了n多次，什么半圆角、边框、光影。。。真佩服我这颗屡试屡换的小心脏啊

一、页面设计

        对于搜索功能，首先要有输入框，用于接收输入内容；然后就是显示搜索结果用的标签，控制焦点用的上移下动按钮。其实，也没必要这么复杂，单纯一个输入款也ok的，但是这么简陋的搜索真的有点不太好。。。

<div class="col-md-3 sidebar">
    <div class="row">
        <div>
            <input type="text"  id="key" class="empty form-control" placeholder="Search..." οnkeyup="callNumber()">
        </div>
        <div>
            <label type="text"  id="resultKey" class="form-control"οnclick="changeFocus()" >
                <div>
                    <a id="clickUp" class="glyphicon glyphicon-menu-up" οnclick="clickUp()"></a>
                    <a id="clickDown" class="glyphicon glyphicon-menu-down" οnclick="clickDown()"></a>
                </div>
                <label id="number"></label>
            </label>
        </div>
    </div>
    <ul id="tree" class="ztree"></ul>
</div>

二、搜索结果的显示

       关于搜索结果的显示，刚开始考虑了两种：只显示结果，对于这种，当有搜索结果时我们就看不到树结构了，没有树结构则会显得信息凌乱，所以放弃了这种方式；第二种是高亮所有搜索信息，如果搜索结果所在的父节点是关闭的，则自动打开。

       在页面加载时，给搜索框再绑定一些事件

$(document).ready(function(){
    $.fn.zTree.init($("#tree"), setting, zNodes);
    document.getElementById("key").value = ""; //清空搜索框中的内容
    //绑定事件
    key = $("#key");
    key.bind("focus", focusKey)
        .bind("blur", blurKey)
        .bind("propertychange", searchNode) //property(属性)change(改变)的时候，触发事件
        .bind("input", searchNode);
});

       为了让搜索功能使用起来更省事，我把真正对树执行搜索功能的操作放在了搜索框的“键盘释放”事件上，在这里用了ztree的一个函数来得到搜索的结果，并赋给一个数组变量

var lastValue = "", nodeList = [], fontCss = {};
//键盘释放：当输入框的键盘按键被松开时，把查询到的数据结果显示在标签中
function callNumber(){
    var zTree = $.fn.zTree.getZTreeObj("tree");

    //如果结果有值，则显示比例；如果结果为0，则显示"[0/0]"；如果结果为空，则清空标签框；
    if(nodeList.length){
        //让结果集里边的第一个获取焦点（主要为了设置背景色），再把焦点返回给搜索框
        zTree.selectNode(nodeList[0],false );
        document.getElementById("key").focus();

        clickCount=1; //防止重新输入的搜索信息的时候，没有清空上一次记录

        //显示当前所在的是第一条
        document.getElementById("number").innerHTML="["+clickCount+"/"+nodeList.length+"]";

    }else if(nodeList.length == 0){
        document.getElementById("number").innerHTML="[0/0]";
        zTree.cancelSelectedNode(); //取消焦点
    }

    //如果输入框中没有搜索内容，则清空标签框
    if(document.getElementById("key").value ==""){
        document.getElementById("number").innerHTML="";
        zTree.cancelSelectedNode();
    }
}
function focusKey(e) {
    if (key.hasClass("empty")) {
        key.removeClass("empty");
    }
}
function blurKey(e) {
    if (key.get(0).value === "") {
        key.addClass("empty");
    }
}
//搜索节点
function searchNode(e) {
    var zTree = $.fn.zTree.getZTreeObj("tree");
    var value = $.trim(key.get(0).value);
    var keyType = "name";

    if (key.hasClass("empty")) {
        value = "";
    }
    if (lastValue === value) return;
    lastValue = value;
    if (value === ""){
        updateNodes(false);
        return;
    };
    nodeList = zTree.getNodesByParamFuzzy(keyType, value); //调用ztree的模糊查询功能，得到符合条件的节点
    updateNodes(true); //更新节点
}

       获得搜索的节点信息后，再对ztree执行更新操作，即修改搜索结果中节点的文字样式

//高亮显示被搜索到的节点
function updateNodes(highlight) {
    var zTree = $.fn.zTree.getZTreeObj("tree");
    for( var i=0, l=nodeList.length; i<l; i++) {
        nodeList[i].highlight = highlight; //高亮显示搜索到的节点(highlight是自己设置的一个属性)
        zTree.expandNode(nodeList[i].getParentNode(), true, false, false); //将搜索到的节点的父节点展开
        zTree.updateNode(nodeList[i]); //更新节点数据，主要用于该节点显示属性的更新
    }
}

       修改文字样式，主要调用的是ztree的ztree.setting.view.fontCss所定义的函数来实现，想换用其它颜色的修改这个函数就行了，主要用了一个三目运算

//设置颜色
function getFontCss(treeId, treeNode) {
    return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
}

三、上下移动按钮

       在树结构较大，且搜索数量过多时，单纯的高亮搜索结果就不太能满足我们的要求了，所以这里提供了上下移动按钮，且提供标签框来动态的显示搜索结果的数据

//点击向上按钮时，将焦点移向上一条数据
function clickUp(){
    var zTree = $.fn.zTree.getZTreeObj("tree");
    //如果焦点已经移动到了最后一条数据上，就返回第一条重新开始，否则继续移动到下一条
    if(nodeList.length==0){
        alert("没有搜索结果！");
        return ;
    }else if(clickCount==1) {
        alert("您已位于第一条记录上！");
        return;
        //让结果集里边的下一个节点获取焦点（主要为了设置背景色），再把焦点返回给搜索框
        //zTree.selectNode(nodeList[clickCount], false)
    }else{
        //让结果集里边的第一个获取焦点（主要为了设置背景色），再把焦点返回给搜索框
        zTree.selectNode(nodeList[clickCount], false);
        clickCount --;
    }
    document.getElementById("key").focus();
    //显示当前所在的是条数
    document.getElementById("number").innerHTML = "[" + clickCount + "/" + nodeList.length + "]";
}
//点击向上按钮时，将焦点移向下一条数据
function clickDown(){
    var zTree = $.fn.zTree.getZTreeObj("tree");
    //如果焦点已经移动到了最后一条数据上，则提示用户（或者返回第一条重新开始），否则继续移动到下一条
    if(nodeList.length==0){
        alert("没有搜索结果！");
        return ;
    }else if(nodeList.length==clickCount)
    {
        alert("您已位于最后一条记录上！")
        return;
    }else{
        //让结果集里边的第一个获取焦点（主要为了设置背景色），再把焦点返回给搜索框
        zTree.selectNode(nodeList[clickCount], false)
        clickCount ++;
    }
    document.getElementById("key").focus();
    //显示当前所在的条数
    document.getElementById("number").innerHTML = "[" + clickCount + "/" + nodeList.length + "]";
}

        当搜索“巴”时，自动展开节点，默认第一个搜索结果呈选中状态；点击上下移动按钮时，树上的焦点自动更换，显示搜索条数比例的标签框中的内容也自动更换。当没有搜索结果时，显示的搜索条数比例为[0/0]；当输入框为空时，显示搜索条数比例的标签框自动清空。

小结：

        对页面上数据的查询有很多种，现在最常用的就是模糊查询，原理都差不多，所以上边只选择了这种，用ztree自带的模糊查询就可以实现了。这里主要做的优化是针对搜索结果的显示效果，以及对开始执行搜索操作的触发事件的调整。