Axure 8 怎么给树结构节点添加右键菜单

可以实现

方法可能有点贱，我是这样做的：

选添加一个20*16的矩形，然后设置其边框为“无”，填充色为透明。

设置页面动做：

设置刚添加的矩形右击动作：

这样就能实现你的要求了，唯一不好的就是那个右击出来的菜单会被浏览器的右击菜单覆盖，最好移动的cursor.x减去一个this.width；另外单击事件要先隐藏矩形再实现单击，移动鼠标时再显示矩形

classification: 实战axure

title: 使用repeater实现一个复杂的树状结构

author: BigPolo

Date: 2020年12月1日

这个树状结构是Jeecg Boot架构中的一个树状结构，具体需求为：

4.5.6.三个需求因为实现起来比较复杂，对于原型阶段实现的投入产出比不高，所以本文主要讨论前三个需求，另外当树状结构的节点级别太多，需要遍历算法，实在是有些为难axure和原型设计人员（作者）了，为了少死脑细胞，本文的树形结构只实现三级树状结构，也没有用复杂的算法。

整个树状结构的组件如下图所示：

组件的摆放如图所示：

其中repeater内的组件摆放如下图：

箭头组件我采用动态面板中加载图形的方式。

动态面板分为两个状态：down和right，分别代表展开模式和收起模式。

1.2. checkbox组件

同样checkbox用图片设计，之所以没有用axure自带的checkbox，主要是因为个人认为axure的checkbox有点丑，难以达到界面要求。

根据需求设置三种样式效果：

1.3. label组件

label组件可以直接用axure自带的组件，根据需求设置字体大小颜色等。

同样设置两种样式效果：

在树状结构中有一个命名为pnl-control的动态面板，它是作为repeater外部的控制组件存在，根据需求设计了五个状态，可以实现三级节点的 *** 作，如果需要更多节点的 *** 作，需要添加更多的状态。各个状态的作用及如何设置事件请接着往下看。

在树形结构中有两个label组件，它们的作用主要是为repeater传递控制参数，两个参数主要是当前的节点名称和节点级别（不要纠结命名）。

step1.

设置repeater的数据结构和 Item Loaded 事件，实现树状结构布局。

前三个参数主要是节点名称，我采用了笨办法，对各级节点需要将它的所有上级节点列出；

level 字段代表当前节点的级别；

icn_sta 字段代表当前节点的箭头组件状态，其中 d 代表展开状态，箭头向下； r 代表收起状态，箭头向右； n 代表隐藏箭头不显示。初始化的数据我默认为树状结构是展开状态，所以所有的icn_sta字段都是 d 或者 n ，没有 r 状态。

isshown 字段代表是否隐藏当前节点。

事件由四部分组成，第一部分根据节点级别加载节点文字并设置文字label的尺寸

第二部分根据节点级别进行缩进

第三部分设置箭头组件的状态

第四部分则确定是否应该显示该节点

step2.

设置repeater的控制组件（动态面板）的panel state changed事件，通过外部组件实现对repeater的数据更新，实现树状结构的展开收起效果。

在step1中只是初始化树状结构，这一步则是为树状结构制造一个开关，当触发这个开关的时候，树状结构实现展开/收起样式的变化。

在准备组件中我们创建了一个名为pnl-control的动态面板，我们就通过这个动态面板状态的改变，来实现展开/收起 *** 作。

为pnl-control创建panel state changed事件，当动态面板的状态发生改变时更新repeater的数据并重新加载。

其中两个局部变量LVAR1和LVAR2分别代表当前节点级别和当前节点名称两个label组件的文字值。

step3.

设置repeater组件中箭头组件的click or tap事件，实现树状结构的展开收起 *** 作。

前两步实现了树状结构的展示方式和开关，这一步就用以实现什么时候，怎么去触发开关。

分别定义repeater中的展开/收起动态面板中的（两个！）图片的click or tap事件。

down状态下箭头图片点击 *** 作：

同理，设置right状态下箭头图片的点击事件。

现在可以预览设计的树状结构，看看它的展开、收起 *** 作了！

复选框的多选 *** 作很简单，只要设置好checkbox的样式效果，设置click or tap事件

文字的单选 *** 作稍微复杂一些，在设置好label的样式效果和click or tap事件后，还需要为label创建selection group:

⚠️：最重要的是要在repeater交互属性中取消掉isolate radio groups和isolate selection groups两个选项的勾选，不然无法实现单选 *** 作！

我不会录屏，只能截图，其中食堂颜色变化是因为鼠标悬停在上边。

在实现过程中遇到不少问题，一开始想不出解决方案，所以在制作的原型中最终选择了最原始的树状结构设计，就是采用传统的组件的show/hide方法逐个在原型增加组件，所以一个像模像样的树状结构要非常大量的组件才能实现，最后对axure的repeater组件深入思考后才在给客户交付原型后想明白，最终实现了这个树形结构的设计。

问题一. 为什么不在repeater内的箭头组件的click or tap事件中直接实现展开收起 *** 作？

问题二. 为什么要在控制组件中的每个数据 *** 作状态后都增加一个跳转到空状态的方法实例？

其实这个树状结构还是有缺陷的，比如当进行选中 *** 作后紧接着进行展开/收起 *** 作，所有的选中状态都会被清除，其实也能够解决这个问题，增加repeater的控制数据就可以，但是觉得作为给甲方演示的组件，关键部分的设计展示出来就完全可以了。

当然，这个树状结构还可以不断完善，实现诸如展开时向下推下方的组件，收起时拉下方的组件，或者将树状结构限定在一定显示范围等等，这需要根据 *** 作需求进行进一步设计。

---