数据容器实现搜索功能

易知微创新技术团队

| 2024-10-10 10:04 82 0 0

一、预览效果

二、实现逻辑

通过【搜索框】发出回调到【轮播表格】，与【数据容器】内置的数据进行比对，筛选出的结果通过【过滤器】在【文字组件】上进行呈现，实现数据搜索。

三、操作步骤

3.1 数据容器操作

点击【组件】→【其他】→添加【数据容器】。

选中【数据容器】→点击【数据】→在【数据接口处】修改数据。本文以行政区划的静态数据为例，数据如下。

[  {    "name": "北京市",    "adcode": "110000"  },  {    "name": "上海市",    "adcode": "310000"  },  {    "name": "江苏省",    "adcode": "320000"  },  {    "name": "浙江省",    "adcode": "330000"  },  {    "name": "广东省",    "adcode": "440000"  }]

点击【交互】→设置【数据回调】→【回调字段】设置为 source。设置数据回调是使数据容器发出回调信号，其目的是为了让其他组件能够调用容器内部的数据。

3.2 搜索框操作

点击【组件】→【交互】→添加【搜索框】。

选中【搜索框】→【交互】→添加【回调参数】→匹配动作【实时回调】→变量名【searchInput】。本次回调是使搜索框发出回调信号，其目的是为了让其他组件能够调用用户输入搜索框中的数据。

3.3 轮播表格接收回调

点击【组件】→【文字】→添加【轮播表格】。本次使用轮播表格来接收上述【数据容器】和【搜索框】发出的回调信号。

选中【轮播表格】→点击【样式】→【列设置】→点击右边眼睛标识关闭【序号列】→展开【列】→右边垃圾桶删除到一列即可→【字段名】设置为name→【显示名】删除即可。

点击【数据】→清空默认表格数据，只剩下“[ ]”即可→点击“+”添加【数据过滤器】。

重命名【过滤器】为“搜索结果”（可选）→设置回调字段【source】【searchInput】→填写【过滤器代码】→点击【保存】。

点击【交互】→添加【回调参数】→添加【回调1】，设置匹配动作为【点击行内容】，字段值与变量名都设置为【name】。

点击【交互】→添加【回调2】，设置匹配动作为【点击行内容】，字段值与变量名都设置为【adcode】→添加【自定义事件】→事件类型设置为【鼠标点击】→组件设置为当前【轮播表格】→动作设置为【隐藏】。

点击【组件】→【文本】→添加两个【标题】。

选中文字组件→点击【数据】→“text”修改为“名称：”。

选中文字组件→点击【数据】→“text”修改为“编码：”。

选中【名称】→开启过滤器→重命名过滤器名称（可选）→回调字段【name】→填入【过滤器代码】→【保存】。

const { name = "" } = callbackArgs;
return [{  text: data[0].text + name}];

选中【编码】→开启过滤器→重命名过滤器名称（可选）→回调字段【adcode】→填入【过滤器代码】→【保存】。

const { adcode = "" } = callbackArgs;
return [{  text: data[0].text + adcode}];

调整一下【编码】文字组件的宽度即可。

如需教程Demo，请关注公众号【易知微产品帮助中心】，发送“搜索功能”即可获得~

数据过滤器 轮播表格 轮播表格接收回调 过滤器 数据容器实现搜索功能

赞同 0

: 微信

: 链接

全部 0条评论

易知微创新技术团队

135

文章

1.09K

人气

粉丝

关注

关注我们

扫码获取

更多数字孪生可视化干货内容