在数据可视化与交互开发场景中,为含 URL 的表格每行配置查看按钮并实现点击跳转,是提升页面交互性与数据实用性的常见需求。本文将详细讲解如何为表格每行添加查看按钮,并实现点击按钮跳转至对应 URL 页面的完整实现思路与操作步骤,帮助开发者快速落地这一实用功能。
1.在左侧组件库添加“基础数据表格”组件至项目中。
接着勾选含有URL数据至数据表格中。
2.选中基础数据表格,在右侧“样式”配置面板中,调整“内容列”的“列宽”与“字体”样式,使数据展示更清晰、便于查看。
接着选择操作列,调整其“列宽”与“字体”样式,并对“操作项列表”进行美化设置。此处可将操作项模拟为按钮样式展示,以提升界面美观度;由于数据表格不支持直接添加按钮组件,该方式可在不使用组件的前提下实现等效视觉效果。
3.在左上角点击“项目”,选择“项目设置”,即可添加“项目参数”,通过 URL 的参数传递的方式修改项目参数。
4.选择基础数据表格,在右侧配置栏中,添加“交互”,触发“点击操作按钮”事件,执行“空动作”,此操作旨在通过触发交互获取结果,步骤简洁易上手。
接着在右下角,点击“调试面板”,选择“系统信息输出”即可查看对应参数信息。
5.继续添加交互,触发“点击操作按钮”事件,执行“修改项目参数”动作,选择上述添加的参数名称,点击标识,将其修改为“自定义公式”,这里的公式参考如下:{:payload.row.网页},详细使用方法可以参考此教程:动态值传递(交互) - 项目制作 - 数字孪生开发教程-可视化大屏制作教程 - 山海鲸可视化
6.继续添加“交互”,触发“点击操作按钮”事件,执行“打开链接”动作,打开方式为“在新标签打开”,此处的链接对应上文已配置的项目参数。
展示效果如下:
更多数字孪生可视化干货内容等你发现
了解更多内容
评论0