【Axure教程】用中继器制作能增删改的树形结构

简介: 【Axure教程】用中继器制作能增删改的树形结构

Hello,今天教大家用做一个高保真的增删改树

【原型预览】

用电脑点击左下方阅读原文或复制打开下面的原型预览地址

https://axhub.im/ax9/b3db3743977d8b2e/#g=1

【原型下载】

方式2:https://weidian.com/item.html?itemID=3665109057

【交互效果】

展开/收起:点击箭头,可以展开或收起子节点。

640.gif

添加子节点:点击添加子节点按钮,可添加子节点,并在本节点自动生成箭头,如果本节点下方有内容,自动打开内容。

640.gif

添加同级节点:点击添加同级节点按钮,可添加同级节点。

640.gif

删除节点:点击删除节点按钮:删除该节点和该节点的子节点,如果该节点父节点只有该子节点,父节点箭头自动消失。

640.gif

修改节点内容:点击文字可以修改内容。

640.gif

选中:选中当前节点和该节点的子节点,如果同级节点全部选中,同时选中父节点。

取消选中:取消选中当前节点和该节点的子节点,同时取消选中父节点。

640.gif

修改添加默认提示语:enter text……可在原型内的”提示语”文本框,修改内容即可。

编辑默认树列表:在中级器内填写即可,简单实用。

【使用方法】

在中继器中编辑:

  • no:第n个一级内容就写a00000000,例如第一个一级内容:100000000;第a个一级内容下的第b个二级内容就写a0b000000(n>9时,mn000000);以此类推,6级内容为小数点后面的数。
  • column:几级内容就在几级column里填写。
  • jiantou:左边的展开箭头,1代表显示,其他代表隐藏。
  • see:1代表显示,其他代表隐藏。
  • xuan:箭头的方向,1代表向下,其他代表向右。
  • xuanzhong:代表多选框是否选中,1代表选中,其他代表未选中。

640.jpg

修改添加默认提示语:enter text…可在原型内的”提示语”文本框,修改内容即可。

【制作教程】

树形结构的制作,请参考我上一篇文章——可增删改的树形结构

今天主要讲一下如何将树形结构制作成多选树。

(1)逻辑思路

中继器内增加一列选中,当值为1是,选中多选框;否则,取消选中多选框。

选中当前节点时,不仅要选中当前节点,还要选中该节点的所有子节点,如果同级节点全部选中,同时选中父节点。

取消选中节点是,不仅要取消当前的节点,还要取消该节点的子节点,同时取消选中父节点。

我们通过更新中继器xuanzhong的值,来控制选中和取消选中

(2)中继器内材料

在原有的树形结构里加一个多选框,可以使用系统默认的,也可以使用自己制作的美化多选框。

(3)具体交互

选中:

640.png

取消选中:

640.png

640.png

该原型非常实用,但制作相对复杂,新手不容易完成。

制作完成后,以后使用方便,仅需简单填写树中继器的内容,即可拥有完美的效果,所以强烈推荐给各位使用。

作者:梓贤vigo;


微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容


本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载

相关文章
【每日教程】用中继器做一个三级菜单(含标签)
【每日教程】用中继器做一个三级菜单(含标签)
|
前端开发 JavaScript API
Axure实战22:使用Axure和CSS实现渐变色背景
Axure实战22:使用Axure和CSS实现渐变色背景
1068 0
Axure实战22:使用Axure和CSS实现渐变色背景
|
XML 移动开发 API
微信支付开发(7) H5支付
关键字:微信支付 微信支付v3 H5支付 wap支付 prepay_id 作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/wxpayv3_h5.html    本文介绍微信支付下的H5支付实现流程。
3922 1
|
4月前
|
Prometheus 监控 Java
Java 17 异步多线程视频上传实战
本文基于Java 17实现了企业级的异步多线程视频上传方案,核心是自定义IO密集型线程池 + CompletableFuture异步编程 + 分片上传优化,并扩展了阿里云OSS集成、进度回调、断点续传、分布式锁、日志监控等关键特性。
388 2
|
8月前
|
测试技术 API 开发者
Postman下载与安装全攻略:简单几步,高效上手!
本文介绍了如何从官方渠道下载并安装Postman,详细列出了安装步骤与注意事项,同时对比了国产工具Apifox的优势,探讨了API工具的发展趋势。
|
SQL 分布式计算 数据挖掘
《智能数据建设与治理 Dataphin》的最佳实践
本文介绍了使用Dataphin进行离线数仓搭建的实操教程,涵盖从创建数据板块到数据分析的完整流程。内容包括登录控制台、配置计算源、创建离线管道、生成SQL语句、运行任务及验证数据等步骤。通过详细的操作指南和截图,帮助用户快速上手Dataphin,体验其强大的数据治理能力。总结中提到教程存在部分陈旧问题,建议加深对产品逻辑的理解以更好地掌握工具使用。
601 1
|
人工智能 Apache 流计算
Flink Forward Asia 2024 上海站|探索实时计算新边界
Flink Forward Asia 2024 即将盛大开幕!11 月 29 至 30 日在上海举行,大会聚焦 Apache Flink 技术演进与未来规划,涵盖流式湖仓、流批一体、Data+AI 融合等前沿话题,提供近百场专业演讲。立即报名,共襄盛举!官网:https://asia.flink-forward.org/shanghai-2024/
1516 33
Flink Forward Asia 2024 上海站|探索实时计算新边界
|
算法 网络协议 数据挖掘
阿里云通用算力型U1实例性能、适用场景、与经济型e区别、收费标准参考
在阿里云目前的活动中,通用算力型u1实例是一款价格相对较低且性价比较高的实例规格,通用算力型Universal实例(U实例)能提供均衡的计算、内存和网络资源,支持多种处理器和多种处理器内存配比。该类型实例依托阿里云资源池化技术和智能调度算法进行动态资源管理,为您的应用提供持续的算力保障、稳定性保障、供应及弹性保障,可以满足大多数场景下的应用需求,是一款具有高性价比的企业级实例。本文为大家介绍通用算力型U1实例的性能、适用场景、收费标准,以及和经济型e实例的区别,以供参考。
|
SQL 运维 数据可视化
阿里云实时计算Flink版产品体验测评
阿里云实时计算Flink基于Apache Flink构建,提供一站式实时大数据分析平台,支持端到端亚秒级实时数据分析,适用于实时大屏、实时报表、实时ETL和风控监测等场景,具备高性价比、开发效率、运维管理和企业安全等优势。
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
1012 2

热门文章

最新文章