zTree模糊搜索

来源：互联网发布：bilibili视频下载 mac 编辑：程序博客网时间：2024/05/17 13:45

根据搜索的值重新显示整个zTree

1、输入框：

<div class="input-group" style="float: left; width: 200px; margin-left: 50px;"><input id="inputChatGroupName" type="text" class="form-control" placeholder="请输入群名称"><span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span></div>

2、js代码：

$("#chatGroupSerarchBtn").click(function() {    var searchValue = $("#inputChatGroupName").val();    doQueryAlg4Name(searchValue);});function doQueryAlg4Name(value) {    var treeObj = $.fn.zTree.getZTreeObj("leftTree"); // leftTree 为树的ID    var allNode = treeObj.transformToArray(treeObj.getNodes()); // 获取所有节点    treeObj.hideNodes(allNode); // 隐藏掉所有节点        // 根据节点数据的属性搜索，获取条件模糊匹配的节点数据 JSON 对象集合    // 下面是查询属性为name中模糊匹配到值value的节点    nodeList = treeObj.getNodesByParamFuzzy("name", value, null);    nodeList = treeObj.transformToArray(nodeList); // 将 zTree 使用的标准 JSON 嵌套格式的数据转换为简单 Array 格式。    for(var n in nodeList){       findParent(treeObj,nodeList[n]);    }    treeObj.showNodes(nodeList); // 指定被显示的节点 JSON 数据集合    if (value == "") { // 如果查询的值为空，则以不展开形式显示整棵树        treeObj.expandAll(false);    }}// 若该节点匹配，则同时递归显示其父节点function findParent(treeObj,node){    treeObj.expandNode(node,true,false,false); // 展开 / 折叠 指定的节点    var pNode = node.getParentNode();    if(pNode != null){        nodeList.push(pNode);        findParent(treeObj,pNode);    }}

3、需要加上下面的js引用：

<script type="text/javascript" src="/js/jquery.ztree.core-3.5.min.js"></script><script type="text/javascript" src="/js/jquery.ztree.exhide-3.5.min.js"></script>

第一个js没有引用，则不会生成zTree。

第二个js不引用，会报像 hideNodes 不是函数的错误。

阅读全文

0 0