在一个页面实现两个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 相关文章推荐
Javascript 入门基础学习
Mar 10 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
微信小程序手动添加收货地址省市区联动
May 18 Javascript
Vue 请求传公共参数的操作
Jul 31 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
PHP汉字转换拼音的函数代码
2015/12/30 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
使用Python生成url短链接的方法
2015/05/04 Python
Python fileinput模块使用实例
2015/05/28 Python
Python中取整的几种方法小结
2017/01/06 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
python版百度语音识别功能
2019/07/09 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
Django REST framwork的权限验证实例
2020/04/02 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
Python如何批量生成和调用变量
2020/11/21 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
倡议书范文
2014/04/16 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
优秀党员申报材料
2014/12/18 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
同事欢送会致辞
2015/07/31 职场文书
职工培训工作总结
2015/08/10 职场文书
世界文化遗产导游词
2019/08/07 职场文书
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers