jquery ztree实现树的搜索高亮显示功能

添加搜索框：

<div class="ibox" style="margin-bottom: 0">      
	 <div>
	     <input type="text" class="empty" id="keyword" maxlength="50" placeholder="关键字搜索"
	            style="width: 180px;background: #223e4a">
	     <button class="btn" id="btn" onclick="searchNode('tree','name')"
	             style="background: #1e7894;padding: 3px 10px;font-size: 12px;"> 搜索
	     </button>
	 </div>
	 <div class="ibox-content" style="overflow: scroll;height: 28vw">
	     <div id="tree" class="ztree"></div>
	 </div>
</div>

var setting = {
	   async: {
	        enable: true, // 异步加载
	        url:ctx + "system/dept/treeData",
	        autoParam:["id", "name=n", "level=lv"]
	    },
	    data: {
	        key: {
	            title: "title"         // 节点数据保存节点提示信息的属性名称
	        },
	        simpleData: {
	            enable: true           // true / false 分别表示 使用 / 不使用 简单数据模式
	        }
	    },
	    callback: {
	        onRightClick: zTreeOnRightClick
	    },
	    view :{
	        showIcon: false,
	        fontCss: getFontCss
	    }
};
$(function () {
	  $.fn.zTree.init($("#tree"), setting);
});
function zTreeOnRightClick(event, treeId, treeNode) {
   if (treeNode.level && treeNode.level >= 4) {
        var selectedId = treeNode.id;
    }
}

搜索方法：

//使用搜索数据 加高亮显示功能，需要2步
//1.在tree的setting 的view 设置里面加上 fontCss: getFontCss 设置
//2.在ztree容器上方，添加一个文本框，并添加onkeyup事件，该事件调用固定方法 changeColor(id,key,value）
// id指ztree容器的id，一般为ul，key是指按ztree节点的数据的哪个属性为条件来过滤,value是指过滤条件，该过滤为模糊过滤
function searchNode(treeId,key){
    var value = $("#keyword").val();
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    // treeObj.expandAll(true);
    var nodeList = treeObj.getNodesByParamFuzzy(key, value);
    updateNodes(false);
    if(value != ""){
        if(nodeList && nodeList.length>0){
            updateNodes(true);
        }
    }
    function updateNodes(highlight) {
        if (highlight == false) {
            var nodes = treeObj.transformToArray(treeObj.getNodes());
            for( var i=0; i<nodes.length; i++) {
                nodes[i].highlight = highlight;
                treeObj.updateNode(nodes[i]);
            }
        }else{
            for( var i=0; i<nodeList.length; i++) {
                nodeList[i].highlight = highlight;
                treeObj.updateNode(nodeList[i]);
            }
        }
    }
}
function getFontCss(treeId, treeNode) {
    return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#fff", "font-weight":"normal"};
}