4.5 表格搜索数据
案例描述
本实例根据性别去搜索，在搜索栏中选择“男”选项时，单击“搜索”按钮，表格中展示性别为“男”的列表信息；当选择“女”选项时，单击“搜索”按钮，表格中展示性别为“女”的信息，如图4-37所示。
图4-37 表格搜索数据
思路分析
- ▷ 表格用中继器来实现。
- ▷ 根据“性别”来搜索，添加“男”“女”列表项。
- ▷ 为“按钮”元件添加“鼠标单击时”事件，实现通过中继器来进行筛选。
操作步骤
（1）按Ctrl+N快捷键，新建一个Axure的文档。
（2）将“元件库”面板中的“中继器”元件拖入编辑区中，在工具栏中设置x为50，y为95，在右侧“检视：中继器”区域设置名称为repeater，如图4-38所示。
图4-38 拖入“中继器”元件
（3）在“属性”面板中的“中继器”区域双击Column0单元格输入id，在后面添加列并输入名称，如图4-39所示。
图4-39 添加列并输入名称
（4）用同样的方法为其他单元格输入相应的内容，如图4-40所示。
图4-40 输入内容
（5）在编辑区中双击“中继器”元件，进入repeater（index）编辑区，选择“矩形”元件，按住Shift+Ctrl快捷键拖动复制5个“矩形”元件，并调整大小，如图4-41所示。
图4-41 复制“矩形”元件
（6）按Ctrl+A快捷键全选所有“矩形”元件，在工具栏中设置“线段颜色”为灰色（#D7D7D7），y为-1，并依次设置其名称为id、name、sex、age、email、tel，如图4-42所示。
图4-42 设置“矩形”元件
（7）单击index标签切换至index编辑区，选择“中继器”元件，在右侧“属性”面板中的“交互”区域双击“每项加载时”下方的case1选项，弹出“用例编辑<每项加载时>”对话框，在左侧“添加动作”区域选择“设置文本”选项，在右侧“配置动作”区域选中“name（矩形）”复选框，在“设置文本为：”区域单击fx按钮，弹出“编辑文本”对话框，插入函数[[Item.name]]，如图4-43所示。单击“确定”按钮返回至“用例编辑<每项加载时>”对话框。
图4-43 插入函数
（8）用同样的方式为其他文本插入函数，如图4-44所示。单击“确定”按钮返回至编辑区中。
图4-44 插入函数
（9）将“元件库”面板中的“矩形1”元件拖入编辑区中，在工具栏中设置x为50，y为65，“宽度”为100，“高度”分别30，“填充颜色”为灰色（#D7D7D7），“线段颜色”为深灰色（#BCBCBC），如图4-45所示。
图4-45 设置“矩形”元件
（10）复制5个“矩形1”元件，调整其大小和位置，双击“矩形”元件，分别输入相应的内容，如图4-46所示。
（11）将“元件库”面板中的“文本标签”元件拖入编辑区中，双击使其呈编辑状态，输入内容“性别：”，在工具栏中设置x为240，y为28，如图4-47所示。
图4-46 复制“矩形”元件并输入内容
图4-47 拖入“文本标签”元件
（12）将“元件库”面板中的“下拉列表框”元件拖入编辑区中，在工具栏中设置x为290，y为25，“宽度”为105，“高度”为22，如图4-48所示。
图4-48 拖入“下拉列表框”元件
（13）在右侧“属性”面板中的“下拉列表框”区域单击“列表项”超链接，弹出“编辑列表选项”对话框，单击两次“添加”按钮添加两个列表项，并分别输入“男”和“女”，如图4-49所示。单击“确定”按钮返回至编辑区中。
（14）将“元件库”面板中的“按钮”元件拖入编辑区中，在工具栏中设置x为413，y为22，“宽度”为71，“高度”为26，双击“矩形”元件输入“搜索”，如图4-50所示。
（15）在“属性”面板中的“交互”区域双击“鼠标单击时”选项，弹出“用例编辑<鼠标单击时>”对话框，在左侧“添加动作”区域展开“中继器”选项，选择“添加筛选”选项，在右侧“配置动作”区域选中“repeater（中继器）”复选框，如图4-51所示。
图4-49 添加列表项
图4-50 设置搜索按钮
图4-51 添加动作
（16）在下方取消选中“移除其他筛选”复选框，设置“名称”为searchbysex，单击“条件”右侧的fx按钮，弹出“编辑值”对话框，单击“添加局部变量”超链接，在第一个文本框中输入sex，第二个选项为“被选项”，第三个选项为“（下拉列表框）”，如图4-52所示。
图4-52 添加局部变量
（17）单击“插入变量或函数”超链接，在弹出的下拉列表框中选择sex，并修改函数为[[Item.sex==sex]]，如图4-53所示。单击“确定”按钮返回至“用例编辑<鼠标单击时>”对话框。
图4-53 插入函数
（18）按Ctrl+S快捷键，以“4.5”为名称保存该文件，然后按F5键预览效果，如图4-54所示。
图4-54 最终效果