在一个页面实现两个zTree联动的方法


Posted in Javascript onDecember 20, 2017

简介

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件

  • 兼容 IE、FireFox、Chrome 等浏览器
  • 在一个页面内可同时生成多个 Tree 实例
  • 支持 JSON 数据
  • 支持一次性静态生成 和 Ajax 异步加载 两种方式
  • 支持多种事件响应及反馈
  • 支持 Tree 的节点移动、编辑、删除
  • 支持任意更换皮肤 / 个性化图标(依靠css)
  • 支持极其灵活的 checkbox 或 radio 选择功能
  • 简单的参数配置实现 灵活多变的功能

引言

今天开发的时候,因为需求需要实现同一个页面左右两棵树,如果选中某一棵树的某一个节点,相应的另一颗树的该节点也被选中。(两棵树是有关联的。当然可以根据自己需要改变联动条件和方式)。

此处不再粘贴实现树的代码,仅仅展示实现联动的方法。

效果如图:

在一个页面实现两个zTree联动的方法
效果图

代码:

function linkageTreeClick(event, treeId, treeNode) {
  var param = treeNode.id; //获得点击树的ID
  var otherTree = $.fn.zTree.getZTreeObj(treeId);
  // 选取树的所有节点
  var nodes = otherTree.getNodesByParam(param);
  //遍历树的节点
  for (var i in nodes) {
   if(param==nodes[i].id){
    otherTree.selectNode(nodes[i]);
    return;
   }
  }
 }

其中treeId为你想与之联动的树的ID,将该方法在zTree的onclick方法中进行调用,根据自己情况,传入参数,然后实现联动。

方法selectNode()参数为树的节点,作用为:使该节点被选中。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery实现公告翻滚效果
Feb 27 Javascript
JavaScript运算符小结
Jun 03 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 #Javascript
Angular2+如何去除url中的#号详解
Dec 20 #Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 #Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 #Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 #Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 #Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 #Javascript
You might like
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
Python多线程编程(一):threading模块综述
2015/04/05 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
keras的三种模型实现与区别说明
2020/07/03 Python
html5时钟实现代码
2010/10/22 HTML / CSS
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
经典优秀个人求职信分享
2013/12/12 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
低碳生活倡议书
2014/04/14 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
团队精神口号
2014/06/06 职场文书
节约粮食标语
2014/06/18 职场文书
优秀教师个人材料
2014/12/15 职场文书