用 SAP UI5 Select 控件(下拉列表),来驱动表格控件(Table)刷新的一个实战例子试读版

简介: 用 SAP UI5 Select 控件(下拉列表),来驱动表格控件(Table)刷新的一个实战例子试读版

有朋友学习了本教程第 95 篇文章后:


SAP UI5 应用开发教程之九十五 - SAP UI5 下拉菜单(Select) 控件的使用方式

提出了这个问题:


Hello, Jerry, 目前遇到一个需求。 界面上面是一个select控件,下面是一个List。select控件下拉数据的来源是cds view group之后的结果,当选择一条后,list里的数据为当前group的数据。这个sap提供的标准的method可以做到吗?


这其实就是一个典型的 SAP UI5 控件联动的需求,即控件 A 产生的某一事件(在本文需求中是 Select 下拉列表选中的记录发生变化)后,触发控件 B 去刷新。


本教程之前介绍过类似的控件联动需求的实现:


SAP UI5 应用开发教程之七十五 - 如何采用SAP UI5 主从表格的联动技术显示复杂表格内容


SAP UI5 应用开发教程之一百零五 - SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍


笔者做了一个实际的例子,先看一下效果。我在 SAP UI5 项目文件夹里维护了一个 JSON 文件 books.json,里面是一个 JavaScript 数组,每个元素描述了图书的 id,名称和作者名称——笔者是金庸和古龙两位大师的粉丝。


image.png


访问本例开发的 SAP UI5 应用后,在屏幕上方能看到一个下拉列表,默认显示金庸,然后下方是一个 Table 控件,里面显示的是 books.json 文件里所有作者为金庸的图书 id 和图书名称。


image.png


当我们点击 Select 下拉列表,选择古龙之后:


image.png


表格就会显示古龙的对应作品:

image.png


我们可以查看下面这个 gif 的动画效果。


image.png

下面是这个需求的详细实现。



相关文章
|
JSON JavaScript 前端开发
用 SAP UI5 Select 控件(下拉列表),来驱动表格控件(Table)刷新的一个实战例子试读版
用 SAP UI5 Select 控件(下拉列表),来驱动表格控件(Table)刷新的一个实战例子试读版
element ui 上传图片之后跳转、刷新、保存,预览和删除丢失问题
这问题困惑了我好久,在官方的element ui 的组件库中,直接拿来使用的话,只有当前显示效果,一旦刷新页面或者保存之后,就会丢失,预览和删除功能。当保存后,保存到后端接口,再次查看,图片是能渲染出来,但是由于保存页面刷新,随之整个上传过程失败,而查看所拿到的图片只是一张静态图片,要想再次预览和查看,需要重新选中上传
219 0
|
机器学习/深度学习 人工智能 自然语言处理
两位谷歌华人研究员发布首个纯视觉「移动UI理解」模型,四大任务刷新SOTA
两位谷歌华人研究员发布首个纯视觉「移动UI理解」模型,四大任务刷新SOTA
153 0
|
Android开发 容器
Android VSYNC (Choreographer)与UI刷新原理分析
Android VSYNC (Choreographer)与UI刷新原理分析
473 0
Android VSYNC (Choreographer)与UI刷新原理分析
Cloud for Customer UI Designer里embedded component刷新的讨论
Cloud for Customer UI Designer里embedded component刷新的讨论
Cloud for Customer UI Designer里embedded component刷新的讨论
|
Web App开发 JavaScript
在Chrome console里修改Vue界面元素,更新如何刷新回UI?
在Chrome console里修改Vue界面元素,更新如何刷新回UI?
264 0
在Chrome console里修改Vue界面元素,更新如何刷新回UI?