Axure中继器基础教程（增行、删当前、标记、全部、规则行） Mark

---恢复内容开始---

一、中继器的新增行

中继器所显示的列表项与中继器的数据集有关，默认情况下是一一对应的。也就是说，中继器数据集中有多少行数据，那么，列表项就有多少个。

那么，我们能不能通过新增数据行来增加列表项呢？

可以的。我们可以通过动作对中继器进行新增行的操作。

下面就以向默认状态下的中继器新增行举例，我们将一个文本框（命名为”Ipt”）和一个“新增”按钮放到编辑区。生成后的效果要求：点击“新增”按钮时，将文本框中输入的内容添加到中继器（命名为”Rpt”），显示出新的列表项。

具体实现步骤如下：

1、选中“新增”按钮，双击“鼠标单击时”事件名称，打开用例编辑器；

2、点击动作列表中：中继器>数据集>新增行；

3、在用例编辑器右侧，勾选要新增行的中继器；

4、点击“新增行”的按钮；（箭头指向的位置，被Fx的编辑框遮挡住了）

5、可以直接输入要新增的值，但是，因为我们是要将文本框的值添加到中继器，所以，这里我们点击“Fx”；

6、新增局部变量，并命名为”Ipt”，设置“Ipt”=文本框”Ipt”的元件文字；

7、点击变量函数列表，选择局部变量”Ipt”或者直接在编辑区输入[[Ipt]]。

8、通过“确定”每一个对话框，回到主窗口，完成编辑。

9、点击预览，或者生成Html文件（方法：发布-更多生成配置-HTML1文件—不在浏览器中打开，选择放入的文件夹-生成 。浏览器选择谷歌最好），并在浏览器中打开，查看效果。

二、中继器的删除行

是这样的，删除和新增不一样，因为删除，有很多种不同的方式，比如：

• 删除当前行；
• 删除全部；
• 删除标记行；
• 通过设置规则，删除满足条件的的行。

A删除当前行

首先，我们先来看怎么删除当前行。顾名思义，每一项要对应一个删除按钮。所以，我们要在中继器中添加一个“删除”按钮，通过点击“删除”按钮，来实现删除数据集中的数据。（注意：点击中继器界面，再放入删除按钮，在进行编辑，就会有“This”了）

然后，在点击这个“删除“按钮的时候，我们要删除当前的一行。步骤如下：

1、选中“删除”按钮，双击“鼠标单击时”事件名称，打开用例编辑器；

2、点击动作列表中：中继器>数据集>删除行；

3、在用例编辑器右侧，勾选要删除行的中继器；

4、选中“This“；

5、通过“确定”每一个对话框，回到主窗口，完成编辑。

6、点击预览，或者生成Html文件，并在浏览器中打开，查看效果。

B 全部删除

首先，要删除中继器的全部内容，我们还是通过一个删除按钮来实现。

我们在主页（不是中继器的主页哦）放一个圆角矩形当删除按钮。当点击这个删除按钮的时候，删除掉中继器中所有的内容。

接下来，我们在点击这个“删除全部”按钮的鼠标点击时事件中添加用例！步骤如下：

1、选中“全部删除”按钮，双击“鼠标单击时”事件名称，打开用例编辑器；

2、点击动作列表中：中继器>数据集>删除行；

3、在用例编辑器右侧，勾选要删除行的中继器；

4、勾选”规则“；（当前版本没有“全部“的选项，所以需要通过规则来删除全部）

5、规则中写入[[1==1]]或者true即可达到效果；

6、通过“确定”每一个对话框，回到主窗口，完成编辑。

7、点击预览，或者生成Html文件，并在浏览器中打开，查看效果。

C删除标记行

如果要删除标记行，当然要先标记后删除。那么怎么标记呢？

我们再放一个删除按钮，到我们的案例里面。这个按钮的文字是”删除已标记”。

假设，我们点击中继器中任意一行的之后，点击“删除已标记“这个按钮，就能把我们点击过得一项删除。

这个效果的实现步骤如下：

一、先进行标记

1、选中中继器中用于显示文字的矩形，双击“鼠标单击时”事件名称，打开用例编辑器；

2、点击动作列表中：中继器>数据集>标记行；

3、在用例编辑器右侧，勾选要添加标记行的中继器；

4、勾选”this“；（这样就标记了当前的数据行）

思考题：如果这里选择全部或者规则呢？

二、再执行删除

“删除已标记“的删除动作参考”删除全部“的截图，具体步骤如下：

1、选中“删除已标记”按钮，双击“鼠标单击时”事件名称，打开用例编辑器；

2、点击动作列表中：中继器>数据集>删除行；

3、在用例编辑器右侧，勾选要删除行的中继器；

4、勾选”已标记“；

5、通过“确定”每一个对话框，回到主窗口，完成编辑。

6、点击预览，或者生成Html文件，并在浏览器中打开，查看效果。

D通过设置规则，删除满足条件的的行。

下面我们来看如何根据规则，删除中继器中指定的内容。

案例效果：删除中继器中显示的文字内容与输入内容相同的行。

首先呢，我们还是添加一些元件来帮助我们实现效果，在主页中我们添加一个文本输入框，取名叫”Ipt2”，再添加一个删除按钮。

然后，按照下列步骤，完成按规则删除行。

1、选中“删除”按钮，双击“鼠标单击时”事件名称，打开用例编辑器；

2、点击动作列表中：中继器>数据集>删除行；

3、在用例编辑器右侧，勾选要删除行的中继器；

4、勾选”规则“；

5、“规则”输入框的右侧有个fx，点击打开编辑框；

6、新建一个局部变量“ipt2”来获取，文本输入框“ipt2”中输入的文字；

7、点击打开“变量与函数列表”，选择中继器的属性”TargetItem.column0”和局部变量“ipt2”并用布尔“==”进行连接。[[TargetItem.Column0==ipt2]]

8、通过“确定”每一个对话框，回到主窗口，完成编辑。

9、点击预览，或者生成Html文件，并在浏览器中打开，查看效果。

这里我们只是通过一种场景的模拟，来讲述通过规则删除中继器某一行的操作。其实，我们能通过规则来实现很多删除的效果。比如，我们之前讲过的删除全部。

思考：

能不能删除包含中文的行呢？

能不能删除第6行至第9行呢？

能不能删除单数行或双数行呢？

能不能删除前10行呢？

能不能删除没有被标记的行呢？

答案：都可以。只要我们结合不同的函数、属性等等，通过书写不同的规则，基本上各种能够想到的删除效果我们都能实现。当然，这些是建立在对函数、属性等知识非常熟悉的基础上。

中继器的应用部分案例：

http://www.iaxure.com/share/jddemo/

http://www.iaxure.com/share/bank/

http://www.iaxure.com/share/tabp/

http://www.iaxure.com/share/jhwz/

你能看出哪里使用了中继器吗？

原帖：http://www.iaxure.com/1858.html

---恢复内容结束---

一、中继器的新增行

中继器所显示的列表项与中继器的数据集有关，默认情况下是一一对应的。也就是说，中继器数据集中有多少行数据，那么，列表项就有多少个。

那么，我们能不能通过新增数据行来增加列表项呢？

可以的。我们可以通过动作对中继器进行新增行的操作。

下面就以向默认状态下的中继器新增行举例，我们将一个文本框（命名为”Ipt”）和一个“新增”按钮放到编辑区。生成后的效果要求：点击“新增”按钮时，将文本框中输入的内容添加到中继器（命名为”Rpt”），显示出新的列表项。

具体实现步骤如下：

1、选中“新增”按钮，双击“鼠标单击时”事件名称，打开用例编辑器；

2、点击动作列表中：中继器>数据集>新增行；

3、在用例编辑器右侧，勾选要新增行的中继器；

4、点击“新增行”的按钮；（箭头指向的位置，被Fx的编辑框遮挡住了）

5、可以直接输入要新增的值，但是，因为我们是要将文本框的值添加到中继器，所以，这里我们点击“Fx”；

6、新增局部变量，并命名为”Ipt”，设置“Ipt”=文本框”Ipt”的元件文字；

7、点击变量函数列表，选择局部变量”Ipt”或者直接在编辑区输入[[Ipt]]。

8、通过“确定”每一个对话框，回到主窗口，完成编辑。

9、点击预览，或者生成Html文件（方法：发布-更多生成配置-HTML1文件—不在浏览器中打开，选择放入的文件夹-生成 。浏览器选择谷歌最好），并在浏览器中打开，查看效果。

二、中继器的删除行

是这样的，删除和新增不一样，因为删除，有很多种不同的方式，比如：

• 删除当前行；
• 删除全部；
• 删除标记行；
• 通过设置规则，删除满足条件的的行。

A删除当前行

首先，我们先来看怎么删除当前行。顾名思义，每一项要对应一个删除按钮。所以，我们要在中继器中添加一个“删除”按钮，通过点击“删除”按钮，来实现删除数据集中的数据。（注意：点击中继器界面，再放入删除按钮，在进行编辑，就会有“This”了）

然后，在点击这个“删除“按钮的时候，我们要删除当前的一行。步骤如下：

1、选中“删除”按钮，双击“鼠标单击时”事件名称，打开用例编辑器；

2、点击动作列表中：中继器>数据集>删除行；

3、在用例编辑器右侧，勾选要删除行的中继器；

4、选中“This“；

5、通过“确定”每一个对话框，回到主窗口，完成编辑。

6、点击预览，或者生成Html文件，并在浏览器中打开，查看效果。

B 全部删除

首先，要删除中继器的全部内容，我们还是通过一个删除按钮来实现。

我们在主页（不是中继器的主页哦）放一个圆角矩形当删除按钮。当点击这个删除按钮的时候，删除掉中继器中所有的内容。

接下来，我们在点击这个“删除全部”按钮的鼠标点击时事件中添加用例！步骤如下：

1、选中“全部删除”按钮，双击“鼠标单击时”事件名称，打开用例编辑器；

2、点击动作列表中：中继器>数据集>删除行；

3、在用例编辑器右侧，勾选要删除行的中继器；

4、勾选”规则“；（当前版本没有“全部“的选项，所以需要通过规则来删除全部）

5、规则中写入[[1==1]]或者true即可达到效果；

6、通过“确定”每一个对话框，回到主窗口，完成编辑。

7、点击预览，或者生成Html文件，并在浏览器中打开，查看效果。

C删除标记行

如果要删除标记行，当然要先标记后删除。那么怎么标记呢？

我们再放一个删除按钮，到我们的案例里面。这个按钮的文字是”删除已标记”。

假设，我们点击中继器中任意一行的之后，点击“删除已标记“这个按钮，就能把我们点击过得一项删除。

这个效果的实现步骤如下：

一、先进行标记

1、选中中继器中用于显示文字的矩形，双击“鼠标单击时”事件名称，打开用例编辑器；

2、点击动作列表中：中继器>数据集>标记行；

3、在用例编辑器右侧，勾选要添加标记行的中继器；

4、勾选”this“；（这样就标记了当前的数据行）

思考题：如果这里选择全部或者规则呢？

二、再执行删除

“删除已标记“的删除动作参考”删除全部“的截图，具体步骤如下：

1、选中“删除已标记”按钮，双击“鼠标单击时”事件名称，打开用例编辑器；

2、点击动作列表中：中继器>数据集>删除行；

3、在用例编辑器右侧，勾选要删除行的中继器；

4、勾选”已标记“；

5、通过“确定”每一个对话框，回到主窗口，完成编辑。

6、点击预览，或者生成Html文件，并在浏览器中打开，查看效果。

D通过设置规则，删除满足条件的的行。

下面我们来看如何根据规则，删除中继器中指定的内容。

案例效果：删除中继器中显示的文字内容与输入内容相同的行。

首先呢，我们还是添加一些元件来帮助我们实现效果，在主页中我们添加一个文本输入框，取名叫”Ipt2”，再添加一个删除按钮。

然后，按照下列步骤，完成按规则删除行。

1、选中“删除”按钮，双击“鼠标单击时”事件名称，打开用例编辑器；

2、点击动作列表中：中继器>数据集>删除行；

3、在用例编辑器右侧，勾选要删除行的中继器；

4、勾选”规则“；

5、“规则”输入框的右侧有个fx，点击打开编辑框；

6、新建一个局部变量“ipt2”来获取，文本输入框“ipt2”中输入的文字；

7、点击打开“变量与函数列表”，选择中继器的属性”TargetItem.column0”和局部变量“ipt2”并用布尔“==”进行连接。[[TargetItem.Column0==ipt2]]

8、通过“确定”每一个对话框，回到主窗口，完成编辑。

9、点击预览，或者生成Html文件，并在浏览器中打开，查看效果。

这里我们只是通过一种场景的模拟，来讲述通过规则删除中继器某一行的操作。其实，我们能通过规则来实现很多删除的效果。比如，我们之前讲过的删除全部。

思考：

能不能删除包含中文的行呢？

能不能删除第6行至第9行呢？

能不能删除单数行或双数行呢？

能不能删除前10行呢？

能不能删除没有被标记的行呢？

答案：都可以。只要我们结合不同的函数、属性等等，通过书写不同的规则，基本上各种能够想到的删除效果我们都能实现。当然，这些是建立在对函数、属性等知识非常熟悉的基础上。

中继器的应用部分案例：

http://www.iaxure.com/share/jddemo/

http://www.iaxure.com/share/bank/

http://www.iaxure.com/share/tabp/

http://www.iaxure.com/share/jhwz/

你能看出哪里使用了中继器吗？

这一节，我们来讲一下如何对中继器的数据进行修改。

中继器数据的修改，也有几种不同的方式，比如：

l  修改当前行；

l  修改标记行；

l  修改满足条件的行。

这里，我们先了解一下如何修改当前行。

修改当前行的话，我们需要把触发修改动作的元件放到中继器里面，在这个案例中，我在中继器主页中添加了一个文本（Lable）作为触发修改动作的按钮。同时，添加了一个文本框用来输入内容，并设置为隐藏。然后，在中继器数据集（在Rpt页面中，直接点击新增行就可以了）中多添加几行，以方便演示。

我们将实现的效果是：

1、点击文本（“编辑”）的时候，显示文本框，文本框中显示旧的数据，并获取焦点。

2、同时，文本的文字从“编辑”变成”保存”；

3、当完成文本框内容编辑，点击文本(“保存”)时，当前行数据被更改。

实现步骤如下：

首先，我们需要对文本（Lable）的文字进行判断，如果它的文字是“编辑”，那么点击时，我们完成以下动作：

>>设置文本框的元件文字为当前数据行“neirong”列的值；

>>设置显示文本框；

>>设置文本框获取焦点；

>>设置文本（Lable）的文字为“保存”。

如果，它的文字是“保存”，那么点击时，我们对中继器的数据进行修改：

1、点击动作列表中：中继器>数据集>更新行；

2、在用例编辑器右侧，勾选要更新行的中继器；

3、勾选”this“，即对当前行数据进行修改；

4、选择要修改数据的列名，当前中继器数据集只有一列”neirong”，我们选择它，对他进行修改；如果数据集有多列，并且多列需要修改时，我们在这里则需要将所有要修改的列名都进行选择；

5、键入新的列值；这里我们需要把文本框输入的文字作为新的列值保存，所以需要点击“fx”，进行6、7两步操作；

6、新增局部变量，获取文本框输入的文字；

7、点击打开“变量与函数列表”，选择局部变量，或者直接键入[[局部变量名称]]，完成新列值的编辑。

8、通过“确定”每一个对话框，回到主窗口，完成编辑。

9、点击预览，或者生成Html文件，并在浏览器中打开，查看效果。

原帖：http://www.iaxure.com/1858.html