SAPUI5和OpenUI5都为数据表提供了两种完全不同的控件:它们在Fiori样式指南中称为“网格表”(sap.ui.table.Table)和“响应表”(sap.m.Table)。顾名思义,一个是响应式的,更适合移动应用程序,而另一个更面向桌面。但是还有很多不同之处!麻烦的是,从一张桌子切换到另一张桌子的努力非常高,所以在做出选择时要仔细考虑!
特征
响应表
网格表
控制名称
sap.m.Table
sap.ui.table.Table
响应性:在小屏幕上折叠列
✔
响应性:在小屏幕上隐藏列
✔
通过脚本
动态列宽(与内容成比例)
✔
可调整大小的列(拖动列边框)
✔
通过单击标题进行列排序
✔
列标题菜单(如在Excel中)
✔
列标题自定义单击操作
✔
列分组(标题范围,多标题)
✔
列冻结
✔
列页脚/总行数
✔
粘头
✔
顶部/行冻结的行
✔
✔
滚动
整行
只有数据
自动高度(填写整页)
✔
单元格中的自定义小部件
任何
有限
单元格中的输入
✔
✔
多排电池
✔
行分组
✔
有限
自定义组标题(例如小计,计数)
✔
可折叠的行组
✔
行详细信息(可扩展行)
通过TreeTable
行单击操作
✔
试验
行双击动作
通过浏览器事件
通过浏览器事件
行右键单击操作(例如上下文菜单)
通过浏览器事件
✔
行选择
✔
✔
行多选
✔
✔
行多选与复选框
✔
✔
单元格合并/行跨度/合并重复
✔
通过按钮分页
弃用
弃用
通过无限滚动分页
只有oData
只有oData
自定义滚动操作
✔
拖放
✔
✔
标题工具栏
✔
✔
页脚工具栏
✔
结构化数据/树
通过面包屑
通过TreeTable
SAP本身sais:选择适合您需求的表格。关于在Fiori指南中选择正确的控制,有一整章。我建议你阅读它,因为它比较了数据表示所有控件:列表,表格,树木等也有短的功能概述 这里。简而言之,ui-table(sap.ui.table.Table
)建议用于较大的数据集(> 1000行),而响应式m-table(sap.m.Table
)则用于所有其他情况 - 它应该看起来更好,更灵活,等等
从技术上讲,两个表格控件非常不同。虽然ui-table是具有行和列的典型数据表,但m-table实际上是一个列表(基于sap.m.ListBase),每个列表项被拆分为列。
API也完全不同。没有办法快速从一个表切换到另一个表,所以如果你发现自己需要另一个表的功能 - 它基本上是再次编写所有代码。
对于我来说,m-table确实看起来更好 - 就像Fiori风格指南所暗示的那样。它也感觉更自然,因为整个表格滚动而不仅仅是数据。但是,它并不是真正的互动。您所能做的就是滚动或选择项目 - 默认情况下不进行排序,过滤等。
我们期望从数据表中获得所有舒适功能,例如标题排序,列过滤器,列大小调整等,仅在ui-table中可用。列标题菜单非常棒!另一方面,没有列宽优化器,因此基本上所有列都太宽或太窄。反过来,此功能仅在m表中可用。另一方面,您无法在此处手动调整列宽。从某种意义上说,它既可以舒适地处理,也可以是一个很好的概述 - 从不同时进行。
滚动实际上是表之间的巨大差异。ui-table使用虚拟滚动:当数据从一行跳到另一行时,网格保持放置状态。这对于单元格中的图像不起作用,如果多行具有相似的数据,则看起来也很奇怪。另一方面,ui-table可以自动调整它的高度以适应容器,m-table不能。
当涉及到诸如列,单元格或行分组等更高级的功能时,事情会变得复杂。出于某种原因,行分组仅在m表中正确支持,而不是在ui表中,理论上这应该是复杂数据的选择。合并细胞也是如此。另一方面,对列进行分组仅适用于ui表(尽管非常有限)。
在任何情况下,列总数都是一个问题:虽然m表只是不支持它们,但是ui-table至少有一个粘性底行,你可以用脚本放置总数。不幸的是,这些固定行受到所有内置排序和过滤功能的影响,因此使用for totals实际上并不是一件容易的事。然而,两个表都有页脚栏,所以如果你只需要一个总值,那么将它放在那里相当容易。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章