Axure 中继器

中继器结构与原理详解

文章来源:小楼一夜听春语

中继器这个元件,对很多人来说是个难点。

但实际上,只要理解它的结构和工作原理,使用起来非常简单。

首先,我们将中继器元件拖入画布,是下方这个样子。

看上去,这个元件由三个纵向排列的矩形组成。

这样的一个元件,怎么使用?

这里大家可以记住一句话:任何一个元件如果不会使用,先双击试试看。

当我们双击了中继器这个元件,在画布中,又打开了一个新的编辑区。

这个编辑区,是中继器内部内容的编辑区。

大家能够看到,在这个编辑区中,自带了一个矩形元件。

那么,这个矩形元件和我们刚才在页面中看到的中继器元件,有什么关联?

我们在这个编辑区中,我们把矩形随意挪动一下位置,并且再放入一个图片元件(或者其他元件),然后点画布上方的标签,切换回页面的编辑区。

这个时候,大家能够看到在页面中,之前的三个矩形矩形也移动了位置,并且新增了三个相同的图片元件。

看到这里,大家一定能够理解到,中继器内部的内容决定了页面中显示的内容。

不过,在页面中并不是一项内容,而是三项。

为什么在中继器中的一项内容,在页面中变成了三项?

这是由哪里控制的呢?

我们点中中继器这个元件,观察它的属性。

在它的属性中,有一个区域,好像表格。

这个区域叫“数据集”。

在这个区域中,大家能够看到,默认有一列三行的数据。

我给中继器的定义:中继器是一个重复列表项的元件。

如上图所示,默认情况下,中继器显示的列表项的数量与数据集中数据行的数量相一致。

所以,大家可以做一下尝试,在数据集中添加行或删除行的话,列表项也会相应的增加或减少。

另外,大家也能够注意到,中继器列表项的内容并不完全一样,上面显示的数字是不相同的。

不过,通过上图,大家也能够发现,列表项中矩形显示的数字,就是数据集中每一行“Column0”这一列的列值。

那么,这个列值是怎么关联到矩形上的呢?

如果要改变矩形的文字,我们就要通过【设置文本】的动作,去设置这个元件的文字。

不过,在什么时候,如何去设置这个矩形的文字为不同的列值?

我们可以在概要面板中,将中继器内部的矩形命名。例如:DefaultShape

然后,在中继器属性面板的顶部,大家能够看到默认有一些交互的设置。

这个设置是【每项加载时】,【设置文本】于矩形“DefaultShape”为“[[Item.Column0]]”。

首先,先来说说每项加载时这个触发事件,它体现了中继器的工作原理。

中继器这个元件,在页面中加载的时候,会读取数据集。

如果发现数据集存在数据,就将第一行数据读取出来,通过交互设置将数据与编辑区中的元件关联,生成列表项的第一项,

然后,再次读取数据集中的第二行,将数据通过交互设置与编辑区中的元件关联,生成列表项的第二项。以此类推,知道读取完所有的数据行后,停止列表项的生成加载。

所以,这个触发事件叫【每项加载时】。

那么,这个触发事件里面的动作,大家就能够理解是将数据集的数据与编辑区的元件进行关联。

不过,这个动作中有一个关键的内容就是“[[Item.Column0]]”。

Item是一个系统变量,中继器每个列表项加载时,所读取一行数据,都会存入这个系统变量。

Column0是列名。

Item.Column0就是指一行数据中Column0这一列的列值。

这个列值,在读取每一行数据时都是不同的。

所以,通过这样的交互,完成数据集数据与编辑区元件的关联,我们才看到了每一项中不同的内容。

最后,当我们在中继器数据集中添加新的行与列值的时候,中继器的列表项会随之增加。

这些列表项默认是垂直排列的。

那么,能不能让它水平排列,并且能够达到一定数量折行呢?

就好像某些商品列表一样,一排几个进行排布呢?

我们,点中中继器元件,然后在检视面板中,切换到样式的设置。

在这里,我们可以设置中继器列表的布局为【水平】布局。

勾选【网格排布】后,通过数量的设置,就能实现一定数量折行的效果。

另外,在这部分设置中,我们还可以设置列表项的背景色、交替背景色,列表项内容的多页显示,列表项之间的行间距、列间距等等。

综上所述,我们来总结一下中继器的基本组成,这也是中继器基础操作主要步骤。

1、内部编辑区

在中继器内部的编辑区中,我们要先创建列表项的模板内容。

这个模板内容决定每一个列表项中的元件组成结构。

2、数据集

在数据集中,我们要添加列表项的数据内容(含文字、图片以及引用页面)。

3、交互

在交互设置中,将数据集的内容与内部编辑区中模板元件建立关联。

4、样式

在样式设置中,我们可以对列表的布局、背景、分页以及列表项间距进行设置。

通过以上四部分内容以及相关的操作,才能够正确、完整的使用中继器这个元件。

备注:前三部分内容与步骤是必须的,样式的设置在某些应用中无需设置。

以上就是对中继器组成结构与工作原理的解析。

关于中继器的实际应用,大家可以查看本站中与中继器相关的案例教程。

例如【在线阅读】中的案例16-案例22,阅读地址:http://www.iaxure.com/menupage/book.html

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

中继器限制重复添加数据

文章来源:中继器限制重复添加数据

 

中继器能够模拟一些列表项添加、删除与修改的操作。

在一些添加的操作中,往往需要限制重复添加。

例如,添加用户数据,会包含用户的id和姓名。

姓名是允许重复的,因为可能出现同名同姓的人。

但是,id一般都是唯一的,不会允许重复。

这样在出现姓名相同的用户时,可以通过唯一的id进行区分。

当我们模拟添加数据的操作时,也要考虑到这种需求,验证新添加的数据是否与已有数据重复。

接下来的案例,就是在添加数据时,要保证id是唯一的。

所以,我们需要能够获取所有已有id,通过条件判断来验证新添加的id是否已存在,只有id不存在,才能添加新的数据。

第一步,我们准备元件。

页面中:

中继器“List”中:

第二步,为中继器“List”的数据集添加一些数据。

第三步,将中继器数据集中的数据和模板中的元件,通过交互进行关联。

注意:以上三步包含了中继器的基本操作,对中继器如果不熟悉,请先阅读《中继器结构与原理详解》。

第四步,为了能够知道中继器中都包含了哪些已有id,我们可以在中继器【每项加载时】,将当前一项的id增加到元件“AllStuId”的文本中,并且将id用花括号分隔开,以免混在一起无法分辨。

我们通过动作【设置文本】于元件“AllStuId”为“[[Target.text]]{[[Item.StuId]]}”,公式中“Target.text”为目标元件的现有文本,“Item.StuId”为中继器当前正在加载的某一项的学号列值(StuId)。

这一步操作完成之后,大家可以尝试预览,在元件“AllStuId”上会显示所有的已有学号(StuId)。

第五步,我们既然已经能够获取到所有的已有id,接下来我们只需要在添加按钮【鼠标单击时】,判断已有id不包含新增的id,满足这个条件,就可以进行添加数据的操作。另外,我们还可以添加一些对输入内容的限制,例如姓名不能为空,成绩必须是数字。

条件设置中,“{[[id]]}”是通过局部变量“id”获取到了文本框元件“IdInput”中输入的新id文本,然后,在两侧添加花括号,与元件“AllStuId”中现有的内容进行对比。

第六步,当我们完成条件的设置,我们先不急于添加新数据的操作。因为添加新数据时,会导致中继器列表刷新,也就是说,【每项加载时】中的交互还会再次执行。这样的话,元件“AllStuId”上的文本会变得很多。为了保持元件“AllStuId”上的id内容最新,我们先将这个元件的文本清空,待到下一步添加数据的操作时,通过【每项加载时】的交互,所有id数据会重新添加到这个元件中。

第七步,我们进行添加数据的交互设置,通过【添加行】的动作设置为中继器“List”添加文本框中新输入的各项数据。

上图中的“id”、“n”、“c”以及“m”都是局部变量,分别获取到文本框元件“IdInput”、“NameInput”、“ChineseInput”以及“MathInput”上的文本内容。

注意:此步骤中局部变量设置并未提供相关截图,不做设置直接输入(例如:“[[id]]”),起不到任何作用。如果不了解局部变量操作,请先阅读AxureRP制作原型中变量的使用(1)AxureRP制作原型中变量的使用(2)

以上为添加按钮上设置的交互。

第八步,我们为删除按钮“Delete”添加交互。(此按钮设置名称,是为了方便部分同学理解该按钮所在的位置)

双击中继器,打开编辑区,点中删除按钮,先添加清空元件“AllStuId”文字的交互。

原因及相关设置参考第六步。

第九步,继续上一步,为删除按钮添加【删除行】的交互,删除中继器“List”中的当前行“This”。

也就是说,点击中继器项目列表中哪一项的删除按钮,就把这一个列表项对应的数据行删除。

以上为删除按钮“Delete”上设置的交互。

以上就是中继器限制重复添加数据的方法。

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

源文件下载:http://downloads.iaxure.com/no_repeat.rp

 

 

使用中继器实现添加标签的交互

文章来源:使用中继器实现添加标签的交互

 

 

这篇教程我们通过中继器实现添加标签的交互效果。

阅读这篇文章之前,请先阅读《中继器结构与原理详解》

先来看看最终要实现的效果。

上面这张图,不足以表达要实现的所有交互。

我来具体描述一下:

1、最后的矩形是一个输入框,当内容输入完毕,光标离开这个输入框的时候,自动出现新的标签;

2、在添加标签时,白色的矩形输入框始终在最后的位置;

3、每个标签上都有删除按钮,点击时删除当前的标签。

接下来,我们来看详细的令人发指的实现步骤。

1、先放入一个中继器,做一下样式的设置,布局设置为【水平】,并且为每个标签之间设置列的【间距】。如果允许输入的标签很多的话,还可以通过【网格排布】来设置每排项的数量,让标签每到达一定数量折行显示。

2、双击中继器元件,进入中继器的内容编辑区。为中继器中自带的矩形设置样式,将填充颜色设置为黑色,文字颜色设置成白色;同时,设置元件的文字左对齐;并且为元件添加左侧文字与边界间的填充。

3、在编辑区中再放入一个文本标签元件,然后输入一个乘号(×),将文字的字号设置为28号字,字体颜色设置成白色,并将元件的文字进行水平与垂直方向的居中对齐。

4、上面的两步,我们完成了模板内容的制作。接下来,我们进行数据集的内容编辑。

首先,修改数据集的列名为“TagText”,这个名称建议和模板中黑色矩形的名称保持一致。

然后,因为标签列表默认情况下只有一个输入框,所以删除数据集中原有的数据,保留一个空行。

完成上面的操作之后,因为我们在模板中使用的矩形是中继器自带的,所以在交互设置中默认的交互依然有效。

并且,因为我们为矩形添加了名称以及为数据集编辑了列名,大家能够在默认的交互中看到这些名称。

5、我们进行点击删除按钮时删除标签的交互设置。这个设置很简单,只需要在删除按钮【鼠标单击时】添加【删除行】的动作设置,删除当前行。

具体动作设置如下图:

6、把编辑区中的内容全选,然后在内容上点击鼠标右键,选择【转换为动态面板】的选项。然后双击动态面板,为其命名为“TagPanel”,并且新增一个状态,将之前的状态名称修改为“Show”,新增的状态名称修改为“Input”。

为什么要进行这一步操作呢?因为在中继器中不但能够显示标签,还要能够输入标签,这是两部分不同的内容。

所以,我们通过动态面板的两个状态,分别存放显示标签和输入标签的元件内容。在之后的操作中,我们进一步实现只有中继器最后一个列表项显示状态“Input”,也就是输入标签的元件内容。

7、双击上图中的状态“Input”,打开这个状态的编辑区。

在这个状态中,我们放入一个矩形作为边框,注意这个矩形要与状态“Show”中的矩形尺寸保持一致。

然后,我们继续放入一个文本框元件,将其命名为“TagInput”,用于输入标签内容。

8、在上图中,大家能够看到,文本框还有自己的边框,这样影响美观。

所以,我们在元件的属性中勾选【隐藏边框】的选项。

这样设置之后,看上去就是一个矩形的输入框。

9、当我们输入标签,光标离开文本框的时候,要让中继器保存标签的内容,并且新增一项。

这里大家注意,在我们输入完标签之后,实际上是对当前列表项的内容进行了更新,并且添加了一个新的列表项。

在数据集中的表现就是,将标签内容保存到了当前行,并且添加了一个新行。

所以,我们为文本框添加【失去焦点时】【更新行】的动作,为中继器“TagList”更新当前行“Tagtext”列的列值。

这个列值的内容,我们需要获取到文本框中输入的内容。

我们点击“fx”按钮,进入编辑值的界面进行获取。

编辑值的界面打开之后,我们添加一个局部变量“tag”,把文本框“TagInput”的元件文字保存到这个局部变量中,并且添加到值的编辑区。

完成上面的操作之后,我们点击确定按钮,保存设置,并且回到添加动作的界面中。

10、继续在用例编辑的界面中添加【添加行】的动作,

添加的行对应的是中继器最后一项,这一项显示标签的输入框,无需显示标签内容。

所以,在添加行的动作中,新增行的列值内容我们可以任意输入,但不能为空。

11、如果需要限制标签的添加数量,在这一步我们也可以添加条件进行限制。

例如,只允许输入4个标签(实际为5个列表项,包含输入标签的列表项),我们就可以添加条件:【值】“[[Item.Repeater.itemCount]]”【<】【值】“5”。

“[[Item.Repeater.itemCount]]”能够获取当前项所在中继器的列表项数量。

完成上述的操作之后,文本框“TagInput”的交互设置如下:

12、当列表项为最后一项时,要显示标签输入框。

我们需要先判断列表项是否最后一项。

在中继器的交互中,我们为【每项加载时】的交互再添加一个用例,设置条件:【值】“[[Item.isLast]]”【==】【值】“true”。

“[[Item.isLast]]”能够获取真值(true)或者假值(false),如果当前加载的项是最后一项,则获取到真值,否则获取到假值。

当获取到真值的时候,我们就可以通过动作【设置动态面板状态】,将动态面板“TagPanel”的状态切换到“Input”,从而将输入框显示出来。

不过,大家要注意,当我们完成上面的操作之后,中继器加载时最后一项并没有切换到输入框。

这是因为,当我们添加新的用例时,软件会自动让新的用例和前一个用例形成条件的关联。

我们需要在新的用例上点击鼠标右键,在菜单中选择【切换为<If>或<Else If>】的选项,来取消这个关联。

 

通过以上的步骤,我们就完成了这个案例的制作。惊不惊喜?开不开心?

不过,这个案例还存在一些不足之处,例如:

1、输入标签内容不能为空值;

2、输入标签的长度限制;

3、输入标签后按回车键添加标签;

4、标签达到数量后隐藏输入框。

这里我简单说一下这些不足的解决方案,大家可以自己去尝试解决:

1、不能添加空标签:在文本框“TagInput”的用例上添加条件,判断该文本框的元件文字不等于空。

2、字符限制:在文本框“TagInput”的属性中设置【最大长度】。

3、输入后按回车键添加标签:在文本框“TagInput”的【按键按下时】添加条件判断,判断【按下的键】等于键值<Enter>,设置的动作与【失去焦点时】相同。或者,设置动作【触发事件】,目标元件选择文本框“TagInput”,事件列表中勾选【失去焦点时】,这种方法也能够实现。

4、标签达到数量后隐藏输入框:在中继器的每项加载时继续添加用例,判断如果是最后一项并且中继器列表项的数量等于5,添加动作【隐藏】动态面板“TagPanel”。

源文件下载:http://downloads.iaxure.com/add_tags.rp

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

中继器信息获取与分页条的实现

文章来源:中继器信息获取与分页条的实现

首先提醒一下,这个很长,有些人可能会受不了!

先来看看要实现的内容。

这是一个学生成绩的表格。

我来介绍一下,需要做的内容:

1、使用中继器实现表格,设置每页显示数量和交替背景颜色;

2、表格中首列序号自动生成,且不受翻页影响;

3、表格加载时,顶部显示表格相关信息,包括可见项数量、加载项数量、当前页面以及页面总数;

4、点击分页条按钮能够翻到相应页面;

5、点击分页条按钮时,列表信息要跟随发生变化;

6、列表翻页时,对应的翻页按钮文字加粗显示。

特别提醒:对中继器不了解的同学,去看《中继器结构与原理详解》,否则,在学习本教程过程中,出现恶心、呕吐、发热以及妊娠反应,本站概不负责!

接下来,我们就根据上面罗列的实现目标,逐一完成各项功能。

第一步,放入一个中继器,双击打开,先完成中继器的基本操作(纯属套路,此处简述,看图理解)。

1、创建模板

2、添加数据

3、添加交互

这一步需要特别说明一下。

【每项加载时】添加【设置文本】这个动作时,其他几项照常操作,序号这一项要将“StuIndex”的值设置为“[[(Item.Repeater.pageIndex-1)*12+Item.index]]”。

其中:Item.Repeater.pageIndex是当前项所在中继器的当前页码;item.index是当前项的序号,但是这个序号翻页后会依然从1开始;所以,我们通过页码减1乘以12(每页项目数量)再加上项的序号就能够计算出正确的序号。

4、设置样式

这一步也要注意,模板中的所有矩形都要取消填充颜色或者设置不透明为0%,否则,会遮挡中继器添加的背景颜色和交替背景色。

经过以上几步设置,我们现在能够看到这样的效果。

第二步,表格上面的X要变成相应的数值。

我们先给显示信息的元件命名为“ListInfo”

页面打开后,这些数值就要呈现出来,所以,在这个元件的【载入时】(在更多事件中)我们添加【设置文本】于“当前元件”的动作,然后点击fx按钮,进行值的设置。

在值的设置界面,我们先创建局部变量获取到【元件】“List”,然后通过系统变量调用它的各个属性,添加到信息文本中。

通过这一步,在预览时我们就能够看到列表信息了。

第三步,为分页条按钮添加翻页的交互。

翻页的交互很简单,都是通过【鼠标单击时】添加【设置当前显示页面】的动作来实现,区别在于上一页、下一页和尾页是在列表中选择,其它的是指定页码。

1、尾页

2、上一页

3、下一页

4、首页

5、各个翻页按钮

各个翻页按钮上的文字即是页码,所以可以通过[[This.text]]获取到当前被点击翻页按钮上的文字填入。这样设置完毕后,可以将交互复制给其他翻页按钮,无需再重复设置。

第四步,点击翻页按钮时,列表信息要跟随发生变化。

我们需要给分页条中每一个按钮【鼠标单击时】都继续添加一个,通过【触发事件】重新触发信息元件“ListInfo”的【载入时】事件。

这里以首页按钮为例。

添加完这个动作后,复制给其它翻页按钮,这样,在翻页的同时列表信息也会被重新加载。

第五步,列表翻页时,对应的翻页按钮文字加粗显示。

翻页按钮的文字样式发生变化,我们首先该想到的是需要设置【选中】时的交互样式。

并且,给这些翻页按钮添加相同的选项组名称,以保证只有一个按钮文字变粗。

提示:关于选项组效果,请到《Axure RP 8入门手册》的在线阅读的相关文章中了解。

这些带有页码的翻页按钮命名为“Tag01”~“Tag06”,为什么到6呢?

因为,我的中继器数据集中共有69条数据,每页12条,共6页。那为什么是69呢?

我就喜欢69,管得着么?

接下来,我们需要考虑的是什么时候选中。

很显然,每个带有页码的翻页按钮【鼠标单击时】,都应该【选中】当前这个按钮,从而文字变成选中时的粗体。

提示:当然也可以设置其他样式,只是对于我来说粗点就行了。

这一个动作也只需要给一个带有页码的翻页按钮设置,然后复制给其它按钮。

另外,还要给首页按钮【鼠标单击时】【选中】“Tag01”的动作;

并且,给尾页按钮添加【鼠标单击时】【选中】“Tag06”的动作。

最后,还有上一页和下一页按钮需要进行处理。

而且,页面刚刚打开时也需要选中一个带有页码的翻页按钮。

那么,我们就在每一个带有页码的翻页按钮【载入时】都添加一个交互。

首先,在条件设置中,我们可以通过局部变量“l”获取中继器“List”这个元件,然后通过“l.pageIndex”获取到当前列表显示页面的页码;如果这个页码【==】“当前元件”的【元件文字】,就执行【选中】“当前元件”的动作。

提示:局部变量“l”的设置,参考第二步中类似的设置;选中当前元件的动作设置,参考上一步中类似的设置。

当为每一个带有页码的翻页按钮设置完载入时的交互之后,我们为上一步和下一步按钮添加交互,这个交互是【鼠标单击时】通过【触发事件】重新执行每一个带有页码翻页按钮的【载入时】交互。

以上一页按钮为例。

因为之前添加过【触发事件】这个动作,我们就在这个动作上继续编辑。

完成这一步后,点击上一页和下一页按钮时,就能根据中继器当前页面的页面选中对应的页码按钮。

以上,就是整个案例的实现过程,是不是长?但是能够弄出来很爽?

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

源文件下载:http://downloads.iaxure.com/repeater_page.zip

 

中继器实现某一行前后插入行的操作

文章来源:中继器实现某一行前后插入行的操作

提示1:本篇教程不适合新手,以及未掌握中继器、动态面板、全局变量、局部变量、系统变量等使用的...新手。

提示2:本篇教程中,动作设置的具体细节,请参考文末源文件。

我们知道中继器可以实现列表,对于平常所见到的表格可以非常容易的实现。

并且,还可以通过中继器的一些交互动作实现添加、删除、更新、筛选与排序的操作。

但是,没有插入行的操作。

偶尔会在某些群里看到有人提出这样的需求:我要插入啊!我要在中间那个地方插入啊!

好吧!

我教你怎么插入。

先看一下插入的效果。

提示:因为AxureRP8没有在右键触发交互时屏蔽浏览器菜单(Axure RP 7是可以的),所以需要点一下屏幕中菜单以外的位置,才能看到自己的菜单。

接下来,我们来实现这个交互效果。

这里涉及到一些功能,我先来做一下描述:

  • 实现中继器列表每行包含显示状态和编辑状态;
  • 实现选项菜单;
  • 实现点击编辑按钮时,转为编辑状态;
  • 实现点击保存按钮时,更新当前行数据;
  • 实现点击删除按钮时,删除当前行数据;
  • 实现中继器某一行中点击鼠标右键时,在鼠标指针所在位置显示菜单;
  • 实现点击菜单中前面插入选项时,在行前插入新行并为编辑状态;
  • 实现点击菜单中后面插入选项时,在行后插入新行并为编辑状态。

根据上方的描述,我们来分步实现每一个功能。

一、实现中继器列表每行包含显示状态和编辑状态。

1、放入中继器并命名为“List”,双击打开中继器,在中继器的编辑区放入5个矩形并命名;

2、将前面的4个矩形全选,点鼠标右键,选择转换为动态面板,命名为“RowPanel”;

3、双击动态面板将“State1”名称改为“Show”,点中这个状态后,点击“重复”;

4、将新出现的状态命名为“Edit”,并且将状态中的所有矩形的命名去除,再添加三个文本框到前3个矩形上,分别命名。

现在中继器中所有元件组成如下:

5、在属性中为中继器“List”添加一些数据。

提示:上图中能够看到,数据集中有一列名为“IndexText”的数据,这是实现插入效果的关键,用途在后面说明。

6、在【每项加载时】为中继器添加基本交互,让列表能够显示中继器中的数据。

提示:看不懂交互的同学请去学习《中继器结构与原理详解》,不会设置交互的同学...改天再来玩儿啊!

7、在页面编辑区中,添加4个矩形作为表头,此时,已经正常显示了列表内容。

二、实现选项菜单。

添加两个矩形,作为菜单选项,并转换为动态面板(也可以组合);命名为“MenuPanel”后隐藏。

到这里所有的元件,准备完毕。

三、实现点击编辑按钮时,转为编辑状态。

编辑按钮添加【鼠标单击时】为“MenuPanel”【设置面板状态】为“Edit”,并且通过【获取焦点】的动作,将光标进入姓名输入框“NameInput”。

四、实现点击保存按钮时,更新当前行数据。

五、实现点击删除按钮时,删除当前行数据。

六、实现中继器某一行中点击鼠标右键时,在鼠标指针所在位置显示菜单。

为中继器中的动态面板“RowPanel”添加【鼠标右击时】的交互,设置动作为【移动】选项菜单“MenuPanle”【到达】鼠标指针所在的位置;并且,【显示】选项菜单“MenuPanle”。

不过,这里为了能够在当前行的前后进行插入,我们需要通过全局变量“Temp”记录一下当前行的编号,也就是前面提到的数据集中的“IndexText”。

七、实现点击菜单中前面插入选项时,在行前插入新行并为编辑状态。

提示:此处为前面插入的关键步骤。

我们思考一下:在某一行的前面插入一个新行,从编号的角度来说,当前行的编号和新插入行的编号应该是什么样的呢?

我想是这样:插入位置以及之后每一行的编号都要增加1,而新插入行的编号为插入位置的行编号。

所以,在这里,我们需要处理行的编号,将所有大于等于插入位置行编号的行,现有编号都增加1。

这个处理,通过按【条件】【更新行】动作来实现。

提示:还记得我们将插入位置的行编号存入到了“Temp”变量中吗?

然后,通过【添加行】添加一个编号为插入位置行编号的行。

最后,别忘了【隐藏】选项菜单“MenuPanel”。

八、实现点击菜单中后面插入选项时,在行后插入新行并为编辑状态。

提示:此处为后面插入的关键步骤。

后面插入和前面插入的过程差不多。

区别在于改变编号的逻辑。

后面插入时,插入位置自身编号不变,所以是将行编号大于插入位置编号的行进行编号增加1的操作。

然后,将变量中保存的编号也需要增加1,和新插入行的编号保持一致。

并且,插入的行的编号也是插入位置行编号增加1之后的编号,即变量中的新编号。

不过,到这里,大家会发现插入的行,还是在列表最下方出现。

九、添加排序

我们还需要对列表按编号升序排列,这个排序效果应该是中继器加载时就能够生效的。

十、设置插入的行为编辑状态

【添加行】动作会导致中继器列表刷新,所有行都变为正常显示状态。

如果想在插入行之后,新行为编辑状态,我们需要在中继器【每项加载时】,如果行编号是变量中保存的行编号(即新插入行的行编号),将动态面板“RowPanel”的状态设置为“Edit”。

这里要注意,因为是新增了一个用例,“Case2”会自动为“Else If”,需要在用例名称上点击鼠标右键,选择【转换为IF...】的选项进行转换。

十一、清空变量

当完成插入行的数据编辑,点击保存按钮时,中继器列表也会刷新,此时需要清空变量,以免因变量中存有编号,将对应的行转为编辑状态。

到这里,所有的交互全部设置完毕。

 

插完之后很累吧?快去好好休息吧!

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

源文件下载:http://downloads.iaxure.com/repeater_insert.rp

中继器中单行选中变色的实现方法

文章来源:中继器中单行选中变色的实现方法

 

图例:

al

思路与实现步骤:

1、点击一行时整行变色,需要在元件属性中预先设置一行中所有矩形元件【选中】时的【交互样式】。

2、点击一行时整行变色,还要添加点击时的交互,选中这一行所有的元件;我们可以把一行元件全选,通过快捷键<Ctrl+G>组合,为组合添加【鼠标单击时】选中【当前元件】的交互。

3、多行表格,多次点击时,仅当前一行变色,需要为所有的行在属性中【设置选项组名称】;因为中继器是把一行元件重复成多行,所以只需要给步骤2中的组合设置选项组名称;进行着一步操作时,务必注意,在属性中有多个【设置选项组名称】,只需为组合进行设置,其他无需设置。

4、完成以上3步,会发现没有得到想要的效果,这时,还是多行能被选中。因为在中继器的属性中有一个【取消选项组效果】的选项,默认是选中的;将这个选项取消选中,就能够实现想要的效果了。

图解:

bz

源文件下载地址:http://downloads.iaxure.com/AxureRP8_case001.rp

标签:
赞  0