UI5 table的三种工作模式:VisibleRowCountMode, Fixed, Auto和Interactive

简介: UI5 table的三种工作模式:VisibleRowCountMode, Fixed, Auto和Interactive

Background

This issue is written for Li Ke’s issue on CBA customer report support.

When creating instance of sap.ui.Table instance, you can specify three different kinds of RowCountMode:


image.pngFixed mode

In the runtime, the number of visible row in UI is ONLY determined by property VisibleRowCount.

For example I have 100 records but VisibleRowCount set as 2,


image.pngIf you use this mode, best practice is to bind the property VisibleRowCountMode to the length property of your OData/JSON model.


Auto mode

In this mode, the height of the container which holds the table instance will be automatically set according to your actual data records volume. In this mode, do not bind VisibleRowCount property.

For example if I have 100 records:


image.pngIf I have 1 record: ( compare the difference with Fixed mode )

image.pngInteractive mode

Almost the same as Fixed model, except the fact that customer can drag the grip to make more rows displayed, this is what “Interactive” means.

See this video for detail.

Why my Auto mode does not work? I only see 5 rows although I have far more records than that. I expect more table rows are displayed instead of 5 rows.

Logic: The number of visible rows is determined by table parent container’s height.


image.pngIf no height of parent container is identified, the number of visible rows is property MiniAutoRowCount. If this property is not specified by developer either, default and hard coded 5 is used.


image.pngSee this stackoverflow question for more detail: http://stackoverflow.com/questions/22510073/sap-ui-table-table-visiblerowcountmode-auto-mode-does-not-work

and this SCN question: https://scn.sap.com/thread/3395286

Tested on this UI5 version:


image.png

相关文章
|
5月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
|
12月前
|
JavaScript
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
问题原因:多个tabs共用一个实体,动态显示隐藏列 出现了固定在右侧的列(fixed="right")错位 【解决方案】 表格的重新布局,只要table数据发生变化的时候就重新渲染表格 ```js this.$nextTick(() => { this.$refs.formname.doLayout() }) ``` 参考element官方文档 ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231030-e40
210 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
|
5月前
|
前端开发
使用element-ui中的table时,当有多选又有翻页功能时,点击翻页后之前选中的数据丢失
使用element-ui中的table时,当有多选又有翻页功能时,点击翻页后之前选中的数据丢失
160 0
|
23天前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
3月前
|
设计模式 编解码 API
Flutter UI设计模式与实现:深入探索与实践
【7月更文挑战第20天】Flutter以其独特的声明式UI模式和丰富的UI组件库,为移动应用开发提供了强大的支持。通过深入理解Flutter的UI设计模式和实现技巧,开发者可以构建出高性能、可维护性强的UI界面。同时,随着Flutter生态的不断完善和发展,相信未来Flutter将在移动应用开发领域发挥更加重要的作用。
|
2月前
|
JavaScript 前端开发 Shell
Element-ui Table表格导出功能的实现
Element-ui Table表格导出功能的实现
32 0
|
5月前
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
313 1
|
资源调度
SAP Spartacus UI 服务器端渲染的调试启动方式 - debug 模式
SAP Spartacus UI 服务器端渲染的调试启动方式 - debug 模式
|
11月前
HMI-34-【运动模式】实现运动模式的UI上电逻辑控制
今天这界面上没有实际的增加,仅仅是实把运动模式UI上电控制逻辑实现了一下,其实到这个模块的时候,就会发现之前在写舒适模式的时候的一些问题了,有好内容可以抽象出来了,不用每次都实现一遍了。不过现在还比较懒,还是先以实现为主,和面的内容放在优化里面。废话不多说,开始搞事情。不过为了吸你们开下去,现在把目前进度放在了。
|
11月前
Element UI 中table的验证
Element UI 中table的验证
下一篇
无影云桌面