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

之前博客介绍过怎么在vue里展示以及获取点击元素的内容，此文章之介绍搜索功能html<el-form-item label="机构" class="ztree-par"><i class="icon_org"></i><input type=

前端小白16

3836人浏览 · 2018-04-24 09:22:11

前端小白16 · 2018-04-24 09:22:11 发布

之前博客介绍过怎么在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; 
 
         } 
 
       }

展示

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

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

这个有个小小的bug，就是做键盘按下或者抬起的时候会有问题，https://yq.aliyun.com/articles/308489，这个文章就解决了这个问题

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^