Axure: 多级多选可交互树状列表

本列表的交互已由代码实现,数据由中继器记录。使用者不必添加事件等操作,只需要在中继器中录入数据即可实现多级多选可交互的树状列表。效果如下视频:

0003_多级多选树状列表

本组件商品链接https://item.taobao.com/item.htm?ft=t&id=980050851158

1、组件介绍

2、填写列表数据

3、添加列表图片

4、制作并添加状态图标

4.1、制作状态图标

4.2、添加状态图标

5、设置节点默认是否展开

如下图"is_spread"字段用于控制节点默认是否展开,填写为"1"表示展开,不写或填写为"0"表示不展开。

注意:若父节点设置为不展开,即使子节点设置为展开,但子节点会受父节点影响默认为不展开。

6、设置节点默认是否选中

如下图"is_selected"字段用于控制节点默认是否选中,填写为"1"表示选中,不写或填写为"0"表示不选中。

如果需要选中某个节点下的所有子节点,则只需要将此节点的"is_selected"字段设置为"1"即可。

7、修改配置数据

  • 默认列宽(px)

默认列宽是指若是列表中的列没有设置指定的宽度,则列会使用"默认列宽"设置的值。

  • 默认对齐方式

默认对齐方式是指若是列表中的列没有设置指定的对齐方式,则列会使用"默认对齐方式"设置的对齐方式。1表示左对齐,2表示居中对齐,3表示右对齐。

  • 节点是否全选

1表示全选,0表示非全选。

若是设置为1,则数据中继器的is_selected字段设置无效。

若是设置为0,则列表节点默认是否选中由数据中继器的is_selected字段设置决定。

  • 节点是否全部展开

1表示全选展开,0表示非全选展开。

若是设置为1,则数据中继器的is_spread字段设置无效。

若是设置为0,则列表节点默认是否展开由数据中继器的is_spread字段设置决定。

  • 第一列是否悬浮

1表示悬浮,0表示不悬浮。

若是设置为1,则第一列始终固定在视图的左侧,不随水平滚动条滚动。

若是设置为0,则第一列随水平滚动条滚动。

  • 最后一列是否悬浮

1表示悬浮,0表示不悬浮。

若是设置为1,则最后一列始终固定在视图的右侧,不随水平滚动条滚动。

若是设置为0,则第一列随水平滚动条滚动。

8、为状态图标添加交互事件

相关推荐
轻口味10 小时前
[鸿蒙2025领航者闯关]HarmonyOS 6.0 云台、机械臂等机械体设备与手机交互能力Mechanic Kit介绍
智能手机·交互·harmonyos
麒qiqi10 小时前
HTML 基础 + SQLite3 数据交互
sqlite·html·交互
普通网友1 天前
用 Next.js 15 做图片查看网站:图片双击放大的交互坑与修复
开发语言·javascript·交互
Xiaobaiforgod1 天前
产品 & UI/UX
ui·产品经理·ux
招风的黑耳2 天前
Web系统原型设计:架构复杂信息,赋能高效工作
axure·原型·web·元件库·系统原型
chilavert3182 天前
技术演进中的开发沉思-276 AJax : Menu
javascript·ajax·交互
灰灰勇闯IT2 天前
鸿蒙智能体框架(HMAF)开发指南:如何快速接入 AI 交互能力
人工智能·交互·harmonyos
想学后端的前端工程师3 天前
【CSS高级技巧与动画实战指南:打造炫酷的用户体验】
前端·css·ux
chilavert3183 天前
技术演进中的开发沉思-274 AJax :Button
前端·javascript·ajax·交互
lingzhilab3 天前
零知IDE——零知ESP32-S3部署 AI小智 2.0版发布!调整界面UI,新增LED、舵机和风扇外部设备和控制
ide·交互