实例详解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 相关文章推荐
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
基于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
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
JavaScript toFixed() 方法
2010/04/15 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
webpack优化的深入理解
2018/12/10 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
python中实现控制小数点位数的方法
2019/01/24 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
酒店人事专员岗位职责
2013/12/19 职场文书
2014全国两会心得体会
2014/03/17 职场文书
个人课题方案
2014/05/08 职场文书
企业管理标语
2014/06/10 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
毕业证代领委托书
2014/09/26 职场文书
母亲节寄语大全
2015/02/27 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL