Axure的多状态复选树

yund56 2025-06-25 21:09 53 浏览

本文将详细介绍如何在Axure中实现一种增强型的多状态复选树组件，它不仅支持全选、半选和未选等状态，还具备动态加载、关键字筛选等高级功能。

多状态复选树（Multi-State Checkbox Tree）是一种增强型树形选择组件，在传统复选树的基础上扩展了节点的交互状态，通常包括全选、半选、未选三种状态，并可能支持更多自定义状态（如禁用、部分禁用等）。半选状态表示该节点的子节点仅被部分选中，能够清晰反映层级选择的中间态。该组件适用于需要精细控制层级选择的场景（如权限管理、分类配置），通过状态可视化提升操作的准确性和用户体验，同时支持动态加载、异步更新等高级功能。

演示地址：

设计原则

1）清晰的层级结构

使用缩进、连接线或图标直观展示父子关系。
提供展开/折叠功能

2）合理的复选框状态

选中状态（Checked）：节点及其所有子节点均被选中。
半选中状态（Intermediate）：部分子节点被选中（难点！！！：需循环计算父节点子节点状态）。
未选中状态（Unchecked）：节点及其子节点均未被选中。

3）关键字筛选

可以通过关键字搜索，高亮对应行并展开。

先决知识：

首先，你已经学会《Axure无限级导航菜单（基础树TREE组件）》里面的导航组件的制作，另外，最好还能掌握《如何在Axure中使用“循环”》和《Axure监听器之中继器监听器》两个基本技巧。

教程：

还是先看一下元件结构：

元件说明

(动态面板) check：选中状态（i-部分选中，c-选中，u-未选中）
(文本框) path：用来做循环用的
(文本框) search：关键字检索功能
(形状) x：清除关键字(文本框) search
(矩形) [[Item.text]]：既是节点文字，又是监听器

中继器数据（第一行为列名）：

字段说明：

id：唯一标识符
text：显示文本
path：路径层级信息（斜杠分隔）
level：层级
order：排序序号
expand：是否展开（t-是，f-否）
check：选中状态（i-部分选中，c-选中，u-未选中）
leaf：是否为叶子节点（t-是，f-否）
hide：是否隐藏（t-是，f-否）

中继器交互如下：

动态面板check的交互如下

(文本框) path的交互如下：

这样，一个多状态的复选树就完成了，接下来我们加上关键字检索功能。

(形状) x的交互如下：

(文本框) search的交互如下：

(矩形) [[Item.text]]监听器交互如下：

这样，关键字检索功能也做好了。

优化

从以上交互可以看出，每次更改check节点，都会对中继器进行多次交互，层级越低，循环次数越多，非常影响效率，所以可以直接用(文本域) tree做为状态的存贮，然后在中继器内部新建一个监听去动态调整，不再反复更新中继器，操作就流畅许多。可以自己试着做一下。

本文由 @Jorkin 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

textbox控件属性

上一篇：办公小技巧:PPT中控件图表巧联动
下一篇：Office 2016滚动文本框顺手就来

Axure的多状态复选树

设计原则

先决知识：

教程：

优化

相关推荐

django留言板_留言板html好看的模板

你还在手动筛选吗?filter函数才是多条件筛选的yyds!

一次分享给你29个PHP基础常用类助力你快速提升

一篇文章轻松掌握VLookup、XLookup与Filter函数

软件工程培训，选择线上还是线下呢?

连南举办2024年软件正版化工作联席会议暨正版软件培训班

初学ThinkPHP(一):用TP6+LayUI实现数据表格

新函数FILTER函数_filter函数的作用

营商在上海_营商上海数字科技有限公司

Excel筛选也智能?一个FILTER函数就搞定!