基于Axure中继器的模糊查询
日常根据用户需求有的axure原型中需要实现尽可能的高保真,那么针对后台管理方面的有的图表要实现针对数据的模糊查询,即根据输入框内的内容在图表中进行查询,并显示对应的内容,废话不多下面开始讲解:
一、创建一个中继器图表
1.1选择中继器控件拖拽到目标区域即创建完成。
1.2下一步向中继器中添加内容。
拖拽后出现1区域内容,点击1中图表,出现2区域内容,紧接着点击3区域中属性。然后出现图二区域内容
1.3下一步开始向其中添加内容,中继器支持excel复制粘贴来对内容批量导入。
1.4下一步开始数据绑定到表格中,双击图表。弹出新的页面,上面会有一个表格,因为我中继器中添加的内容有4列,所以应该复制粘贴4个表格,并将其命名1、2、3、4、5
1.5点击回之前的页面,同时点击【属性】,开始对1、2、3、4、5进行数据绑定。
1.6点击对应的矩形后绑定对应的数据图中column0、column1、column2、column3、column4对应的之前图表中填入的数据。在对应的矩形中点击对应的column进行数据绑定,搞定后如图2。
那么初步的中继器数据绑定就结束了。(上面1.4、1.5截图中落了一个表格,见谅)
二、做对应的多条件模糊查询。
2.1创建一个输入框,并命名search。再创建一个按钮,并命名select。
2.2点击按钮,点击属性。点击【鼠标单击时】,弹出页面。即图中点击1,点击2,弹出3。
在3中滑动滚轮寻找中继器,并点击,然后再勾选中继器。
2.3点击调剂后面的【fx】,弹出页面【编辑值】,点击下方【添加局部变量】将输入框中值进行引用。出现图1、2、3中内容,首先点击1进行下拉选择元件文字,再点击2选择之前命名的search输入框,其次点击3对输入框内文字进行命名,我命名的是word,可以随意命名。最后在4区域输入:[[(Item.Column0.indexof(word)+Item.Column1.indexof(word)+Item.Column2.indexof(word)+Item.Column3.indexof(word)+Item.Column4.indexof(word))>-5]]后点击确定即可。(忽略图中4的内容,以上面提供的为准)
全部都结束后点,在输入框内输入模糊字段,点击查询按钮,就会在表格中显示对应的内容了。
三、讲解
3.1在2.3中的输入[[(Item.Column0.indexof(word)+Item.Column1.indexof(word)+Item.Column2.indexof(word)+Item.Column3.indexof(word)+Item.Column4.indexof(word))>-5]]主要由对个部分组成。
其中(Item.Column0.indexof(word)、Item.Column1.indexof(word)、Item.Column2.indexof(word)、Item.Column3.indexof(word)、Item.Column4.indexof(word)分别代表用输入框中输入数据与表格中对应列进行比较,对应的比较返回值大于-1即返回对应的结果,因为我们有5列,所以返回-5即可。
以上即为中继器模糊查询实现的对应内容,若实现不了,可以留言我会及时进行回复,感谢观看。