在一个页面实现两个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 18 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
浅谈基于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提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
Angularjs单选框相关的示例代码
2017/08/17 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
进一步探究Python中的正则表达式
2015/04/28 Python
python分割列表(list)的方法示例
2017/05/07 Python
python复制文件到指定目录的实例
2018/04/27 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
PHP面试题及答案二
2015/05/23 面试题
实习自我鉴定模板
2013/09/28 职场文书
医学专业自荐信
2014/06/14 职场文书
授权委托书公证
2014/09/14 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书