在一个页面实现两个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 相关文章推荐
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
vue如何从接口请求数据
Jun 22 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
OpenLayers3实现地图显示功能
Sep 25 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 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入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
javascript 单选框,多选框美化代码
2008/08/01 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
《跨越百年的美丽》教学反思
2014/02/11 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
师德师风整改措施
2014/10/24 职场文书
公司承诺函范文
2015/01/21 职场文书
观看《信仰》心得体会
2016/01/15 职场文书