实例详解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 相关文章推荐
js验证表单大全
Nov 25 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 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
openPNE常用方法分享
2011/11/29 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
PHP类型约束用法示例
2016/09/28 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
高考自主招生自荐信
2013/10/20 职场文书
师范大学毕业自我鉴定
2013/11/21 职场文书
网页设计个人找工作求职信
2013/11/28 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
挂靠协议书范本
2014/04/22 职场文书
见习报告怎么写
2014/10/31 职场文书
匿名检举信范文
2015/03/02 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
教师节校长致辞
2015/07/31 职场文书