Axure的多状态复选树（无限分级）

前言：

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

设计原则：

1. 清晰的层级结构
   • 使用缩进、连接线或图标直观展示父子关系。
   • 提供展开/折叠功能
2. 合理的复选框状态
   • 选中状态（Checked）：节点及其所有子节点均被选中。
   • 半选中状态（Intermediate）：部分子节点被选中（难点！！！：需循环计算父节点子节点状态）。
   • 未选中状态（Unchecked）：节点及其子节点均未被选中。
3. 关键字筛选
   • 可以通过关键字搜索，高亮对应行并展开。

演示地址：

https://dtcagw.axshare.com/#id=je1z0x&g=1

先决知识：

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

教程：

还是先看一下元件结构：

• 元件说明
  1. (动态面板) check：选中状态（i-部分选中，c-选中，u-未选中）
  2. (文本框) path：用来做循环用的
  3. (文本框) search：关键字检索功能
  4. (形状) x：清除关键字(文本框) search
  5. (矩形) [[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做为状态的存贮，然后在中继器内部新建一个监听去动态调整，不再反复更新中继器，操作就流畅许多。可以自己试着做一下。

演示地址：https://dtcagw.axshare.com/#id=l49qju&g=1

购买地址：https://www.axureshop.com/a/2327848.html

如果觉得我的教程做的不错呢，欢迎关注、收藏、转发、捐赠，谢谢。

原文链接：Axure的多状态复选树（无限分级）

转载请注明：最InのAxure » Axure的多状态复选树（无限分级）