在一个页面实现两个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 相关文章推荐
js计数器代码
Nov 04 Javascript
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
JavaScript 异步调用
Oct 25 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 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 前一天或后一天的日期
2008/06/28 PHP
php 引用(&)详解
2009/11/20 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
return false;和e.preventDefault();的区别
2010/07/11 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
python队列queue模块详解
2018/04/27 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
HTML5实现预览本地图片
2016/02/17 HTML / CSS
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
策划主管的工作职责
2013/11/24 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
周年庆典答谢词
2015/01/20 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
python四种出行路线规划的实现
2021/06/23 Python
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技