Ztree 实现搜索节点高亮显示,重置功能

来源:互联网 发布:淘宝如何引流量 编辑:程序博客网 时间:2024/05/17 08:18

上一篇博客是artDialog+Ztree,想看基本实现的请拐弯左转,这篇就直接将搜索的实现了

<input type="text" id="searchTreeText"><button type="submit" id="searchBtnTree">搜索</button><button type="submit" id="reset">重置</button>

下面的实现是我从网上各个地方找的掺杂到一起的

//搜索节点并高亮显示$("#searchBtnTree").on("click", function() {    var key = $("#searchTreeText").val();    if (key != null) {        var hidenode = ztree.transformToArray(ztree.getNodes());//将 zTree 使用的标准 JSON 嵌套格式的数据转换为简单 Array 格式        ztree.hideNodes(hidenode);//隐藏所有节点        nodeList = ztree.getNodesByParamFuzzy("name", key, null);//模糊查询        if (nodeList && nodeList.length > 0) {            for ( var i = 0; i < nodeList.length; i++) {                nodeList[i].highlight = true;//设置高亮                findParent(ztree, nodeList[i]);                ztree.updateNode(nodeList[i]);                ztree.expandNode(nodeList[i], true, true, false);//展开节点            }        }    }else{        alert("请输入搜索条件");    }});//找到其父亲节点function findParent(ztree, node) {    ztree.expandNode(node, true, false, true);//展开节点    ztree.showNode(node);//显示该节点    var pNode = node.getParentNode();    if (pNode != null) {        findParent(ztree, pNode);    }}//设置字体颜色function setFontCss(treeId, treeNode) {    if (treeNode.id == 1) {//根节点        return {            color : "black"        };    }    if (treeNode.highlight) {//如果符合模糊查询条件则高亮显示        return {            color : "red"        };    }else{        return {            color : "black"        };    }}//重置$("#reset").on("click",function(){    treeNode.highlight=false;所有节点取消高亮    $("#searchTreeText").val('');//搜索框重置    $.windowbox.treeInit();//树初始化    ztree.expandNode(treeNode,true,true,true);    ztree.refresh();});

这样就实现了搜索并高亮显示,重置的功能,下面是效果图
这里写图片描述

转载请说明地址并告知我,谢谢~