利用 Axrue9 中继器实现表格数据的查询

查询数据

查询需要实现能够根据一条提示查询或者是多条提示查询

下拉列表单一条件筛选

首先,为元件命名,避免因为元件太多导致找不到要实现交互的元件。

为查询按钮设置交互,设置在鼠标单击时添加筛选。

注意:按照以上操作在无论设备类型选择哪一个类型的数据,点击查询之后都只会保留笔记本电脑设备类型的数据。

这是因为在规则部分我们就已经把查询的数据固定了,无论如何都没有办法改变。

可以创建局部变量,设置被选中项强调一下,在选择元件的时候一定要是筛选项的设备类型

此时,当设备类型无论选择什么数据,表格都能够查询到对应的数据类型并在页面中显示出来。

下拉列表复合筛选

这个时候不可以在之前添加筛选的基础上再添加条件,需要再创建一个添加筛选。

新增的添加筛选为所属部门。

点击fx设置规则,方式与按设备类型一样,创建局部变量并引用。

注意看移除筛选部分。

  • 勾上表示只能显示对应此筛选的条件
  • 取消勾选才能实现复合筛选

文本框筛选

模糊查询是文本框筛选的一大难点。

为方便实现文本框的模糊查询效果,需要先将前面两个下拉框的交互移除。

那么此时可以先复制出原有的新增按钮,防止后续还需将之前的步骤再创建一遍。

为实现模糊查询,我们需要考虑item.name里面是否包含输入的数据。

使用indexOf()函数判断item.name里面是否包含输入的数据。

方框内部可以翻译成:[[中继器.设备名称.是否包含(输入框)]]

利用[[item.name.indexOf(LVAR1)]]是否等于-1的方式来判断输入的数据是否包含在item.name当中。

如果indecOf(LVAR1)不包含在item.name当中的话那么等于-1,如果包含那么就不等于-1。

最后,将三个筛选交互事件合并在一起,查询功能就已全部实现。

重置

为重置按钮新增一个交互,把之前所设置的筛选全部移除,就可以重置表单控件。

查询效果整体预览

查询功能可以根据三个表单控件的内部信息进行查询,并且拥有模糊查询的效果。

到目前为止,利用Axure 9中继器实现的原型图设计的增删改查已学习。

相关推荐
alibli16 小时前
一文学会设计模式之结构型模式及最佳实现
c++·设计模式
电子科技圈20 小时前
SiFive车规级RISC-V IP获IAR最新版嵌入式开发工具全面支持,加速汽车电子创新
嵌入式硬件·tcp/ip·设计模式·汽车·代码规范·risc-v·代码复审
七月丶21 小时前
Cloudflare 🌏 中国大陆网络访问优化 - 0元成本
人工智能·react.js·设计模式
xfchsjh21 小时前
展厅展馆如何超越陈列?2025探寻深圳河北上海科技创意设计公司的不同逻辑
科技·设计·艺术·展厅设计·展馆设计·科技展厅设计·数字展厅设计
筏.k1 天前
C++ 设计模式系列:单例模式
c++·单例模式·设计模式
__万波__1 天前
二十三种设计模式(十二)--代理模式
java·设计模式·代理模式
郝学胜-神的一滴1 天前
Linux线程编程:从原理到实践
linux·服务器·开发语言·c++·程序人生·设计模式·软件工程
我爱学习_zwj1 天前
前端设计模式:轻量级实战指南
设计模式·前端框架·状态模式
还是大剑师兰特1 天前
前端设计模式:详解、应用场景与核心对比
前端·设计模式·大剑师
平凡之路无尽路2 天前
智能体设计模式:构建智能系统的实践指南
人工智能·设计模式·自然语言处理·nlp·aigc·vllm