ztree在vue项目中使用并且带有搜索功能

之前博客介绍过怎么在vue里展示以及获取点击元素的内容,此文章之介绍搜索功能

html

< el-form-item label= "机构" class= "ztree-par">
< i class= "icon_org">i>
< input type= "text" placeholder= "请输入机构" id= "ser" v-model=" ruleForm. mechanism" @ keyup. enter=" search_ztree( 'treeDemo', 'ser')" @ click. stop = " control()" class= "login-input">
< el-button icon= "el-icon-arrow-down" @ click. stop=" control()">el-button>
< div class= "ztree-z" v-show="ztreeCon">
< ul id= "treeDemo" class= "ztree">ul>
div>
el-form-item>

main.js需要单独引入

import "./../static/ztree/js/jquery.ztree.exhide-3.5.min.js";

如果不单独引入这个会获取不到很多元素,在input回车事件或者点击事件的时候直接执行此事件即可

代码部分

expand_ztree( treeId) {
       var treeObj = $. fn. zTree. getZTreeObj(treeId);
       treeObj. expandAll( true);
    },
close_ztree( treeId) {
       var treeObj = $. fn. zTree. getZTreeObj(treeId);
       var nodes = treeObj. transformToArray( treeObj. getNodes());
       var nodeLength = nodes. length;
       for ( var i = 0; i < nodeLength; i ++) {
         if (nodes[i]. id == '0') {
           //根节点:展开
           treeObj. expandNode(nodes[i], true, true, false);
        } else {
           //非根节点:收起
           treeObj. expandNode(nodes[i], false, true, false);
        }
      }
    },
search_ztree( treeId, searchConditionId) {
       this. searchByFlag_ztree(treeId, searchConditionId, "");
    },
searchByFlag_ztree( treeId, searchConditionId, flag) {
       //<1>.搜索条件
       var searchCondition = $( '#' + searchConditionId). val();
       //<2>.得到模糊匹配搜索条件的节点数组集合
       var highlightNodes = new Array();
       if (searchCondition != "") {
         var treeObj = $. fn. zTree. getZTreeObj(treeId);
        highlightNodes = treeObj. getNodesByParamFuzzy( "name", searchCondition, null);
      }
       //<3>.高亮显示并展示【指定节点s】
       this. highlightAndExpand_ztree(treeId, highlightNodes, searchCondition, flag);
    },
highlightAndExpand_ztree( treeId, highlightNodes, tx, flag) {
       var treeObj = $. fn. zTree. getZTreeObj(treeId);
       //<1>. 先把全部节点更新为普通样式
       var treeNodes = treeObj. transformToArray( treeObj. getNodes());
       for ( var i = 0; i < treeNodes. length; i ++) {
        treeNodes[i]. highlight = false;
         treeObj. updateNode(treeNodes[i]);
      }
       //<2>.收起树, 只展开根节点下的一级节点
       this. close_ztree(treeId);
       //<3>.把指定节点的样式更新为高亮显示,并展开
       if (highlightNodes != null) {
         for ( var i = 0; i < highlightNodes. length; i ++) {
           if (flag != null && flag != "") {
             if (highlightNodes[i]. flag == flag) {
               //高亮显示节点,并展开
              highlightNodes[i]. highlight = true;
               treeObj. updateNode(highlightNodes[i]);
               //高亮显示节点的父节点的父节点....直到根节点,并展示
               var parentNode = highlightNodes[i]. getParentNode();
               var parentNodes = this. getParentNodes_ztree(treeId, parentNode);
               treeObj. expandNode(parentNodes, true, false, true);
               treeObj. expandNode(parentNode, true, false, true);
            }
          } else {
               treeObj. updateNode(highlightNodes[i]);
             var parentNode = highlightNodes[i]. getParentNode();
             var parentNodes = this. getParentNodes_ztree(treeId, parentNode);
             treeObj. expandNode(parentNodes, true, false, true);
             treeObj. expandNode(parentNode, true, false, true);
          }
        }
      }
    },
getParentNodes_ztree( treeId, node) {
       if (node != null) {
         var treeObj = $. fn. zTree. getZTreeObj(treeId);
         var parentNode = node. getParentNode();
         return this. getParentNodes_ztree(treeId, parentNode);
      } else {
         return node;
      }
    }

展示

ztree在vue项目中使用并且带有搜索功能_第1张图片

这没有高亮显示的功能,如果需要高亮显示可以查看原文

原文链接:https://www.jianshu.com/p/edcffa22d2cd

这个有个小小的bug,就是做键盘按下或者抬起的时候会有问题,https://yq.aliyun.com/articles/308489,这个文章就解决了这个问题ztree在vue项目中使用并且带有搜索功能_第2张图片

你可能感兴趣的:(vue小插件)