基于Axure中继器的模糊查询

本文介绍如何使用Axure的中继器实现数据模糊查询,包括创建中继器、数据绑定及多条件查询设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

基于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即可。

以上即为中继器模糊查询实现的对应内容,若实现不了,可以留言我会及时进行回复,感谢观看。

<think>好的,我现在需要帮助用户解决在Axure RP9中如何实现中继器的模糊查询的问题。首先,我需要回忆一下用户提供的引用内容,看看有没有相关的信息。根据引用[2]、[3]、[4],里面提到了使用中继器进行多条件模糊查询,包括设置筛选事件、局部变量以及使用indexOf方法来判断是否包含输入内容。 首先,用户的需求是根据输入框的内容动态过滤中继器中的数据,这属于模糊查询。Axure中继器组件可以通过设置筛选条件来实现这一点。根据引用[3]中的例子,当输入框内容改变时,中继器的C1列需要根据输入内容进行模糊查询。这里的模糊查询通常指的是检查某个字段是否包含输入的关键词,而不仅仅是完全匹配。 接下来,我需要整理实现步骤。首先,用户需要在页面上放置输入框和中继器组件。然后,中继器需要加载数据,可能是在中继器的数据集里预先填入数据。之后,给输入框添加交互事件,当输入内容变化时触发筛选。这里的关键是筛选条件的设置,比如使用indexOf方法来判断是否包含输入文本,并且不区分大小写。例如,引用[4]中的条件表达式[[(Item.name.indexOf(name))>-1]],其中name是局部变量,这里可能需要将输入内容和项目名称都转换为小写或大写,以实现不区分大小写的搜索。 另外,引用[2]提到在查询按钮上建立单击事件并添加筛选,但用户的需求是输入时实时查询,所以应该使用输入框的文本改变事件,而不是按钮的单击事件。同时,设置局部变量来获取输入框的当前值,这是关键步骤。 需要注意的是,Axure的筛选条件可能需要正确的语法,比如使用双括号和正确的变量引用。例如,将输入框的值存入局部变量,然后在筛选条件中使用Item.字段名和局部变量进行比较。同时,处理空值的情况,当输入框为空时显示所有数据,这可以通过条件判断来实现。 可能还需要考虑中继器的分页和刷新,确保在筛选后正确显示结果。此外,如果有多个条件需要组合查询,可以使用逻辑运算符如&&来连接多个条件,如引用[4]中的例子,结合了姓名和性别的筛选。 总结一下,步骤大致如下: 1. 添加输入框和中继器。 2. 设置中继器的数据集。 3. 给输入框添加文本改变时的交互事件。 4. 在事件中添加筛选,使用indexOf方法检查是否包含输入内容,并处理大小写。 5. 处理空输入的情况,显示全部数据。 6. 测试原型,确保筛选正确工作。 用户可能遇到的问题包括筛选条件语法错误,或者没有正确处理大小写,导致查询不准确。这时候需要检查筛选条件的表达式是否正确,以及是否将双方都转换为相同的大小写。此外,局部变量的设置是否正确,是否绑定了正确的输入框组件。 最后,根据用户的示例问题,生成相关的进一步问题,比如如何实现多条件查询、如何优化性能或者如何添加排序功能。这些可以帮助用户更深入地了解中继器的其他应用场景。</think>### Axure RP9 中继器模糊查询实现方法 #### 步骤说明 1. **添加组件** - 在画布上放置**文本框**(用于输入查询内容)和**中继器**组件 - 在中继器内设置需要筛选的字段(如`name`字段) 2. **设置中继器数据** ```javascript // 中继器数据集示例(支持中文) Item.name = "张三" Item.name = "李四科技" Item.name = "王五TEST" ``` 3. **绑定交互事件** - 选中文本框,添加「文本改变时」的交互事件 - 添加「筛选」动作,选择目标中继器 4. **配置筛选规则** 使用以下表达式实现模糊查询: ```javascript [[Item.name.toLowerCase().indexOf(LVAR1.toLowerCase()) >= 0]] // [^3] ``` - `LVAR1`为文本框值的局部变量 - `toLowerCase()`实现不区分大小写 - `indexOf()`检测包含关系 5. **空值处理** 添加条件判断: ```javascript if: [[LVAR1.length > 0]] else: 移除筛选[^4] ``` #### 完整交互流程 ```javascript // 文本框文本改变时 设置局部变量LVAR1=元件文字 if LVAR1非空: 筛选中继器:[[Item.name.toLowerCase().indexOf(LVAR1.toLowerCase()) >= 0]] else: 移除所有筛选 ``` #### 注意事项 1. **特殊字符处理**:输入内容包含`*`等符号时需转义 2. **动态面板联动**:结合动态面板可实现带滚动条的查询结果展示[^4] 3. **性能优化**:超过100条数据建议增加防抖处理(延迟300ms执行)
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

非极限码农

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值