实现一个页面中两个zTree的联动

作者: 黑码不黑 | 来源:发表于2017-12-14 20:01 被阅读0次

今天开发的时候,因为需求需要实现同一个页面左右两棵树,如果选中某一棵树的某一个节点,相应的另一颗树的该节点也被选中。(两棵树是有关联的。当然可以根据自己需要改变联动条件和方式)。此处不再粘贴实现树的代码,仅仅展示实现联动的方法。
效果如图:


效果图

代码:

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()参数为树的节点,作用为:使该节点被选中。

相关文章

  • 实现一个页面中两个zTree的联动

    今天开发的时候,因为需求需要实现同一个页面左右两棵树,如果选中某一棵树的某一个节点,相应的另一颗树的该节点也被选中...

  • Flutter 下拉刷新上拉加载更多

    基础页面实现 TabBar + TabBarView 实现页面切换联动(类似Android tablayout +...

  • zTree.js

    zTree简介 树形控件的使用是应用开发过程中不可少的,zTree是一个依靠jQuery实现的多功能“树插件”,优...

  • 自定义ScrollView和TabLayout联动(二)

    前言:在上一篇文章中我们通过自定义ScrollView实现和TabLayout的联动实现了页面滚动切换Tab的功能...

  • 深度理解React底层实现原理

    索引: props, state与render函数关系 – 数据和页面是如何实现互相联动的? React中的虚拟D...

  • zTree.js的使用

    zTree.js的使用 zTree学习笔记一:实现checkbox、全选、取消全选功能

  • 前端小白——二级联动

    这种联动在网页中很常见,直接上图(本篇主要涉及jQuery) 页面的布局很简单,就是采用一个简单的table来实现...

  • 一个UIView中的两个UICollectionView如何实现

    原理利用监听的方法来实现一个UIView中的两个UICollectionView的联动效果。 实现方法1.先在第一...

  • ZTree 树

    ZTree zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合...

  • openlayers入门开发系列之图层控制

    本篇的重点内容是利用openlayers实现地图图层控制功能,效果图如下: 部分核心代码如下: 页面引用ztree...

网友评论

    本文标题:实现一个页面中两个zTree的联动

    本文链接:https://www.haomeiwen.com/subject/rgllwxtx.html