在一个页面实现两个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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
JavaScript 私有成员分析
Jan 13 Javascript
Jquery之美中不足小结
Feb 16 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
js中this的用法实例分析
Jan 10 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
浅谈基于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
数字转英文
2006/12/06 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
javascript的函数
2007/01/31 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
js实现下一页页码效果
2017/03/07 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
简单了解python的内存管理机制
2019/07/08 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
Python程序慢的重要原因
2020/09/04 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
心理健康教育制度
2014/01/27 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
铲车司机岗位职责
2014/03/15 职场文书
庆祝儿童节标语
2014/10/09 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
2015年春节标语口号
2014/12/09 职场文书
借钱欠条怎么写
2015/07/03 职场文书
运动会宣传语
2015/07/13 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
python如何获取网络数据
2021/04/11 Python
redis配置文件中常用配置详解
2021/04/14 Redis
python 中的jieba分词库
2021/11/23 Python