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


Posted in Javascript onAugust 24, 2018

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

上篇文章给大家介绍了vue中如何使用ztree,大家可以点击查看。

之前博客介绍过怎么在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项目中使用并且带有搜索功能

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

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

总结

以上所述是小编给大家介绍的ztree在vue项目中使用并且带有搜索功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
Js四则运算函数代码
Jul 21 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
微信jssdk用法汇总
Jul 16 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
javascript实现简单留言板案例
Feb 09 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 #Javascript
element-ui 表格数据时间格式化的方法
Aug 24 #Javascript
vue select选择框数据变化监听方法
Aug 24 #Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 #Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 #jQuery
element-ui中的select下拉列表设置默认值方法
Aug 24 #Javascript
vue 登录滑动验证实现代码
Aug 24 #Javascript
You might like
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
php7 新增功能实例总结
2020/05/25 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
初学Python实用技巧两则
2014/08/29 Python
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
MySQL最常见的操作语句小结
2015/05/07 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
python实现飞机大战
2018/09/11 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
Form表单及django的form表单的补充
2019/07/25 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
python各层级目录下import方法代码实例
2020/01/20 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
写给女朋友的检讨书
2014/01/28 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
三年级学生评语
2014/04/23 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
长城的导游词
2015/01/30 职场文书
个园导游词
2015/02/04 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
个人收入证明格式
2015/06/24 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏