4.5　表格搜索数据

案例描述

本实例根据性别去搜索，在搜索栏中选择“男”选项时，单击“搜索”按钮，表格中展示性别为“男”的列表信息；当选择“女”选项时，单击“搜索”按钮，表格中展示性别为“女”的信息，如图4-37所示。

思路分析

• ▷　表格用中继器来实现。
• ▷　根据“性别”来搜索，添加“男”“女”列表项。
• ▷　为“按钮”元件添加“鼠标单击时”事件，实现通过中继器来进行筛选。

操作步骤

（1）按Ctrl+N快捷键，新建一个Axure的文档。

（2）将“元件库”面板中的“中继器”元件拖入编辑区中，在工具栏中设置x为50，y为95，在右侧“检视：中继器”区域设置名称为repeater，如图4-38所示。

（3）在“属性”面板中的“中继器”区域双击Column0单元格输入id，在后面添加列并输入名称，如图4-39所示。

（4）用同样的方法为其他单元格输入相应的内容，如图4-40所示。

（5）在编辑区中双击“中继器”元件，进入repeater（index）编辑区，选择“矩形”元件，按住Shift+Ctrl快捷键拖动复制5个“矩形”元件，并调整大小，如图4-41所示。

（6）按Ctrl+A快捷键全选所有“矩形”元件，在工具栏中设置“线段颜色”为灰色（#D7D7D7），y为-1，并依次设置其名称为id、name、sex、age、email、tel，如图4-42所示。

（7）单击index标签切换至index编辑区，选择“中继器”元件，在右侧“属性”面板中的“交互”区域双击“每项加载时”下方的case1选项，弹出“用例编辑<每项加载时>”对话框，在左侧“添加动作”区域选择“设置文本”选项，在右侧“配置动作”区域选中“name（矩形）”复选框，在“设置文本为：”区域单击fx按钮，弹出“编辑文本”对话框，插入函数[[Item.name]]，如图4-43所示。单击“确定”按钮返回至“用例编辑<每项加载时>”对话框。

（8）用同样的方式为其他文本插入函数，如图4-44所示。单击“确定”按钮返回至编辑区中。

（9）将“元件库”面板中的“矩形1”元件拖入编辑区中，在工具栏中设置x为50，y为65，“宽度”为100，“高度”分别30，“填充颜色”为灰色（#D7D7D7），“线段颜色”为深灰色（#BCBCBC），如图4-45所示。

（10）复制5个“矩形1”元件，调整其大小和位置，双击“矩形”元件，分别输入相应的内容，如图4-46所示。

（11）将“元件库”面板中的“文本标签”元件拖入编辑区中，双击使其呈编辑状态，输入内容“性别：”，在工具栏中设置x为240，y为28，如图4-47所示。

（12）将“元件库”面板中的“下拉列表框”元件拖入编辑区中，在工具栏中设置x为290，y为25，“宽度”为105，“高度”为22，如图4-48所示。

（13）在右侧“属性”面板中的“下拉列表框”区域单击“列表项”超链接，弹出“编辑列表选项”对话框，单击两次“添加”按钮添加两个列表项，并分别输入“男”和“女”，如图4-49所示。单击“确定”按钮返回至编辑区中。

（14）将“元件库”面板中的“按钮”元件拖入编辑区中，在工具栏中设置x为413，y为22，“宽度”为71，“高度”为26，双击“矩形”元件输入“搜索”，如图4-50所示。

（15）在“属性”面板中的“交互”区域双击“鼠标单击时”选项，弹出“用例编辑<鼠标单击时>”对话框，在左侧“添加动作”区域展开“中继器”选项，选择“添加筛选”选项，在右侧“配置动作”区域选中“repeater（中继器）”复选框，如图4-51所示。

（16）在下方取消选中“移除其他筛选”复选框，设置“名称”为searchbysex，单击“条件”右侧的fx按钮，弹出“编辑值”对话框，单击“添加局部变量”超链接，在第一个文本框中输入sex，第二个选项为“被选项”，第三个选项为“（下拉列表框）”，如图4-52所示。

（17）单击“插入变量或函数”超链接，在弹出的下拉列表框中选择sex，并修改函数为[[Item.sex==sex]]，如图4-53所示。单击“确定”按钮返回至“用例编辑<鼠标单击时>”对话框。

（18）按Ctrl+S快捷键，以“4.5”为名称保存该文件，然后按F5键预览效果，如图4-54所示。