Axure的多状态复选树

大家好，欢迎来到IT知识分享网。

本文将详细介绍如何在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 协议

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