IT虾米网

SAP UI5数据表进行了比较:sap.m.Table与sap.ui.table.Table

SAPUI5和OpenUI5都为数据表提供了两种完全不同的控件:它们在Fiori样式指南中称为“网格表”(sap.ui.table.Table)和“响应表”(sap.m.Table)。顾名思义,一个是响应式的,更适合移动应用程序,而另一个更面向桌面。但是还有很多不同之处!麻烦的是,从一张桌子切换到另一张桌子的努力非常高,所以在做出选择时要仔细考虑!

 

功能比较

特征 响应表 网格表
控制名称 sap.m.Table sap.ui.table.Table
响应性:在小屏幕上折叠列  
响应性:在小屏幕上隐藏列 通过脚本
动态列宽(与内容成比例)  
可调整大小的列(拖动列边框)  
通过单击标题进行列排序  
列标题菜单(如在Excel中)  
列标题自定义单击操作  
列分组(标题范围,多标题)  
列冻结  
列页脚/总行数  
粘头  
顶部/行冻结的行
滚动 整行 只有数据
自动高度(填写整页)  
单元格中的自定义小部件 任何 有限
单元格中的输入
多排电池  
行分组 有限
自定义组标题(例如小计,计数)  
可折叠的行组  
行详细信息(可扩展行)   通过TreeTable
行单击操作 试验
行双击动作 通过浏览器事件 通过浏览器事件
行右键单击操作(例如上下文菜单) 通过浏览器事件
行选择
行多选
行多选与复选框
单元格合并/行跨度/合并重复  
通过按钮分页 弃用 弃用
通过无限滚动分页 只有oData 只有oData
自定义滚动操作  
拖放
标题工具栏
页脚工具栏  
结构化数据/树 通过面包屑 通过TreeTable

Fiori指南

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实际上并不是一件容易的事。然而,两个表都有页脚栏,所以如果你只需要一个总值,那么将它放在那里相当容易。


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

UI5-培训篇-Fiori培训