两个zTree怎样互相联动

这次给大家带来两个zTree怎样互相联动,两个zTree互相联动的注意事项有哪些,下面就是实战案例,一起来看一下。

简介

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

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

怎样用webpack写jquery的环境配置

jQuery的Validate插件怎样验证输入值

ajax请求后台数据成功后无反映应该如何处理

jQuery EasyUI 折叠面板的使用

以上就是两个zTree怎样互相联动的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2782489.html

(0)
上一篇 2025年3月8日 16:31:16
下一篇 2025年2月19日 02:02:30

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • zTree异步加载时添加子节点总是重复怎么解决

    这次给大家带来zTree异步加载时添加子节点总是重复怎么解决,解决zTree异步加载时添加子节点总是重复的注意事项有哪些,下面就是实战案例,一起来看一下。 zTree 是一个依靠 jQuery 实现的多功能 “树插件”。下面通过本文给大家分…

    编程技术 2025年3月8日
    200
  • 实现无刷新下拉联动的Ajax+Servlet(附代码)

    这次给大家带来实现无刷新下拉联动的Ajax+Servlet(附代码),实现实现无刷新下拉联动的Ajax+Servlet的注意事项有哪些,下面就是实战案例,一起来看一下。 下拉联动的功能可以说非常的常用,例如在选择省、市等信息的时候;或者在选…

    编程技术 2025年3月8日
    200
  • ajax实现三级联动最基本的概念

    这次给大家带来ajax实现三级联动最基本的概念,ajax实现三级联动的注意事项有哪些,下面就是实战案例,一起来看一下。 本文实例为大家分享了ajax实现三级联动的具体代码,供大家参考,具体内容如下 1.首先在一个页面上布置一个p 方便日后引…

    编程技术 2025年3月8日
    200
  • Ajax+mysq实现省市区三级联动列表

    这次给大家带来Ajax+mysq实现省市区三级联动列表,Ajax+mysq实现省市区三级联动列表的注意事项有哪些,下面就是实战案例,一起来看一下。 实现Ajax实现省市区三级级联,需要Java解析json技术 整体Demo下载地址如下: 点…

    编程技术 2025年3月8日
    200
  • 怎么实现Ajax的三级联动商品分类

    这次给大家带来怎么实现Ajax的三级联动商品分类,实现Ajax的三级联动商品分类的注意事项有哪些,下面就是实战案例,一起来看一下。 思路分析: 效果:当页面加载时,利用ajax异步向后台请求数据,加载一级商品类别,当选择一级商品时加载二级商…

    2025年3月8日
    200
  • mint-ui实现选择三级联动的实现

    这次给大家带来mint-ui实现选择三级联动的实现,mint-ui实现选择三级联动的注意事项有哪些,下面就是实战案例,一起来看一下。 项目是基于vue2 的移动端项目,供大家参考,具体内容如下 1、实际效果 地址三级联动 mint-ui p…

    2025年3月8日
    200
  • zTree树形菜单交互选项卡教程

    这次给大家带来zTree树形菜单交互选项卡教程,zTree树形菜单交互选项卡的注意事项有哪些,下面就是实战案例,一起来看一下。 1、 添加自定义属性 page 2、 为 ztree 每个树形节点,添加点击事件 ztree树形菜单的使用 //…

    编程技术 2025年3月8日
    200
  • zTree的树形菜单使用步奏详解

    这次给大家带来zTree的树形菜单使用步奏详解,zTree树形菜单使用的注意事项有哪些,下面就是实战案例,一起来看一下。 在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 …

    编程技术 2025年3月8日
    200
  • React-Native实现左右联动(附代码)

    这次给大家带来React-Native实现左右联动(附代码),React-Native实现左右联动的注意事项有哪些,下面就是实战案例,一起来看一下。 React Native的使用对于一些从事React Native开发的人来说也是非常重要…

    2025年3月8日
    200
  • jQuery zTree在异步过程中重复添加子节点

    这次给大家带来jquery ztree在异步过程中重复添加子节点,处理jquery ztree在异步过程中重复添加子节点的注意事项有哪些,下面就是实战案例,一起来看一下。 zTree 简介     zTree 是一个依靠 jQuery 实现…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论