實例詳解ztree在vue項目中使用并且?guī)в兴阉鞴δ?/h1>

 更新時間：2018年08月24日 10:42:07   作者：前端小白16  

zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”。這篇文章主要介紹了ztree在vue項目中使用并且?guī)в兴阉鞴δ?需要的朋友可以參考下

zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點。

上篇文章給大家介紹了vue中如何使用ztree，大家可以點擊查看。

之前博客介紹過怎么在vue里展示以及獲取點擊元素的內(nèi)容，此文章之介紹搜索功能

html

<el-form-item label="機構(gòu)" class="ztree-par">
<i class="icon_org"></i>
<input type="text" placeholder="請輸入機構(gòu)" 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回車事件或者點擊事件的時候直接執(zhí)行此事件即可

代碼部分

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') {
   //根節(jié)點：展開
   treeObj.expandNode(nodes[i], true, true, false);
  } else {
   //非根節(jié)點：收起
   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>.得到模糊匹配搜索條件的節(jié)點數(shù)組集合
  var highlightNodes = new Array();
  if (searchCondition != "") {
  var treeObj = $.fn.zTree.getZTreeObj(treeId);
  highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
  }
  //<3>.高亮顯示并展示【指定節(jié)點s】
  this.highlightAndExpand_ztree(treeId, highlightNodes, searchCondition, flag);
 },
highlightAndExpand_ztree(treeId, highlightNodes, tx, flag) {
  var treeObj = $.fn.zTree.getZTreeObj(treeId);
  //<1>. 先把全部節(jié)點更新為普通樣式
  var treeNodes = treeObj.transformToArray(treeObj.getNodes());
  for (var i = 0; i < treeNodes.length; i++) {
  treeNodes[i].highlight = false;
  treeObj.updateNode(treeNodes[i]);
  }
  //<2>.收起樹, 只展開根節(jié)點下的一級節(jié)點
  this.close_ztree(treeId);
  //<3>.把指定節(jié)點的樣式更新為高亮顯示，并展開
  if (highlightNodes != null) {
  for (var i = 0; i < highlightNodes.length; i++) {
   if (flag != null && flag != "") {
   if (highlightNodes[i].flag == flag) {
    //高亮顯示節(jié)點，并展開
    highlightNodes[i].highlight = true;
    treeObj.updateNode(highlightNodes[i]);
    //高亮顯示節(jié)點的父節(jié)點的父節(jié)點....直到根節(jié)點，并展示
    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;
  }
 }

展示

這個有個小小的bug，就是做鍵盤按下或者抬起的時候會有問題，https://yq.aliyun.com/articles/308489，這個文章就解決了這個問題

總結(jié)

以上所述是小編給大家介紹的ztree在vue項目中使用并且?guī)в兴阉鞴δ?，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

• vue el-select與el-tree實現(xiàn)支持可搜索樹型
• vue封裝tree組件實現(xiàn)搜索功能

• vue
• 搜索
• ztree

相關文章

• 

  詳解Vue基于 Nuxt.js 實現(xiàn)服務端渲染（SSR）

  直接使用 Vue 構(gòu)建前端單頁面應用，頁面源碼時只有簡單的幾行 html，這并不利于網(wǎng)站的 SEO，這時候就需要服務端渲染，本篇文章主要介紹了詳解Vue基于 Nuxt.js 實現(xiàn)服務端渲染（SSR），具有一定的參考價值，感興趣的小伙伴們可以參考一下

  2018-04-04
• 

  在 Vue 3 中上傳 KML 文件并在地圖上顯示的實現(xiàn)方法

  KML 文件作為一種標準的地理數(shù)據(jù)格式,廣泛應用于地理信息系統(tǒng)（GIS）中,通過 OpenLayers 和 Vue 3 的組合,您可以方便地實現(xiàn)地圖數(shù)據(jù)的可視化和交互,本文介紹在 Vue 3 中上傳 KML 文件并在地圖上顯示的實現(xiàn)方法,感興趣的朋友一起看看吧

  2024-12-12
• 

  Vue+Element UI 實現(xiàn)視頻上傳功能

  這篇文章主要介紹了Vue+Element UI 實現(xiàn)視頻上傳功能,前臺使用Vue+Element UI中的el-upload組件實現(xiàn)視頻上傳及進度條展示，后臺提供視頻上傳API并返回URL，具體實現(xiàn)代碼及效果展示跟隨小編一起看看吧

  2022-01-01
• 

  el-input輸入校驗不能為空格以及不能輸入全部為空的內(nèi)容

  這篇文章主要給大家介紹了關于el-input輸入校驗不能為空格以及不能輸入全部為空的內(nèi)容的相關資料,el-input驗證規(guī)則主要是為了確保輸入的內(nèi)容符合特定的要求,需要的朋友可以參考下

  2023-10-10
• 

  Vue全局共享數(shù)據(jù)之globalData,vuex,本地存儲的使用

  這篇文章主要介紹了Vue全局共享數(shù)據(jù)之globalData,vuex,本地存儲的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

  2023-10-10
• 

  vue.js指令v-for使用以及下標索引的獲取

  今天小編就為大家分享一篇關于vue.js指令v-for使用以及下標索引的獲取，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧

  2019-01-01
• 

  Vue使用vux-ui自定義表單驗證遇到的問題及解決方法

  這篇文章主要介紹了Vue使用vux-ui自定義表單驗證遇到的問題及解決方法,需要的朋友可以參考下

  2018-05-05
• 

  vue混入mixin的介紹及理解

  混入(mixin)提供了一種非常靈活的方式，來分發(fā)vue組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項

  2022-08-08
• 

  VUE3中watch監(jiān)聽使用實例詳解

  watch函數(shù)用來偵聽特定的數(shù)據(jù)源,并在回調(diào)函數(shù)中執(zhí)行副作用,下面這篇文章主要給大家介紹了關于VUE3中watch監(jiān)聽使用的相關資料,需要的朋友可以參考下

  2022-06-06
• 

  Vue側(cè)滑菜單組件——DrawerLayout

  本文介紹一個簡單的DrawerLayout（類似Android的DrawerLayout）布局組件的實現(xiàn)，基于Vue.js側(cè)滑菜單組件的實現(xiàn)代碼大家通過本文一起學習吧

  2017-12-12

最新評論