实例详解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获取页面上某个元素的代码
Mar 13 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
Rust中的Struct使用示例详解
Aug 14 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
一些常用的php简单命令代码集锦
2007/09/24 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
php发送邮件的问题详解
2015/06/22 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
Python实现点云投影到平面显示
2020/01/18 Python
pandas中ix的使用详细讲解
2020/03/09 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
详解Python中的文件操作
2021/01/14 Python
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
工程班组长岗位职责
2013/12/30 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
网络管理专业求职信
2014/03/15 职场文书
公司运动会策划方案
2014/05/25 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
李强优秀员工观后感
2015/06/16 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript