axure 如何设置选项联动_Axure多级下拉列表框联动V1.5

Axure实现多下拉列表框数据联动

原型：[download title=”Axure实现多下拉窗口联动V1.5.rp”]https://www.taohuadongle.com/wp-content/uploads/2018/07/Axure实现多下拉窗口联动V1.5.rp_.zip[/download]

明确业务背景

数据范围

明确数据范围、格式等必要信息，明确前后主键关联信息。原数据如下(中国省市区信息)：

由原数据可知，需要三个下拉元件，按元件不同，对数据进行整理、去重。整理后数据如下：

数据约束

1数据按级别递归显示；

2如果高级别数据发现变动，其他低于其级别的数据需要重新选择；

3要求按顺序填写，不可越级。

效果要求

1以下拉列表框模式进行展现；

2数据量多时，采用滚动条模式显示。

进行过程实现

建立下拉组合

下拉列表框元件无法实现我们的需求，这里使用文本框加矩形图组合实现需求要求及下拉视觉效果。

拉出文本框和矩形图3，只将文本框命名为“省”，便于识别；

双击文本框，填入“– 请 选 择 –”，并设置为只读(输入的文字不允许前面带有空格)；

对矩形图3进行形状修改、缩小尺寸，对调图形等，处理成下拉三角放在文本框右侧；

选择它们，将其设置为组合，并命名为省。

建立动态面板、中继器

下拉列表框元件无法实现我们的需求，这里使用中继器实现。

新建动态面板，并命名为“省”；

双击动态面板打开，为其添加中继器，并将中继器命名为“省”；

修改组合“省”的点击为显示动态面板“省”；

修改动态面板“省”默认隐藏，且鼠标移出它时隐藏；

修改动态面板“省”使用滚动条模式显示。

填充中继器数据

修改中继器列名，并粘贴数据。

配置中继器与下拉组合关联

这里要注意，配置中继器与下拉组合联动需要双击中继器，对里面的矩形进行调整。

调整中继器列宽与动态面板一致；

调整中继器被点击时，将选中的值赋予组合“省”中的文本框“省”(注意这里我使用的是全局变量)；

–设置变量

–赋值

点击后，还要隐藏动态面板。

复制

复制全部元件，来创建“市”、“区”，并修改全部的元件名称；

并对“市”、“区”的中继器进行数据填充，填充时，需要自己新加数据列，用于与上一级进行对应；

并对“市”、“区”的中继器加载时所显示使用的列，进行调整处理。

配置全面联动

中继器“省”发生点击时，将中继器“市”、“区”设置为“——请 选 择——”；

修改中继器“省”点击时，移除中继器“市”、“区”原有筛选条件，并添加筛选条件，只显示选中省份的数据；

–可以指定移除

–也可以增加时移除

修改中继器“市”，方法与中继器“省”有细小差异，要将所选“省”、“市”都传给“区”。此方法的目的，是为了避免“市”数据重复导致的查询出来的“区”数据错误。同时还要注意，只给一次移除筛选就够了；

修改中继器“区”，只要修改赋予文本框的这些东西即可；

设置如果前一级没有选择，不能直接选择下级数据。

至此，联动配置完成