Smarttable 是 sap.ui.comp.smarttable中的控件。
SmartTable控件根据OData元数据和指定的配置创建一张表。
必须指定entitySet属性来使用控件。该属性用于从OData元数据获取字段,从中生成栏目;也可以用来获取实际的表数据。
根据tableType属性可以呈现一个标准,分析,树或响应表。
注意:
大多数属性都是非动态的,一旦初始化控制,就不能更改。
使用方式:
1.新建文件夹,在里面新建一个sapui5模版
next
next-->finish
完成后项目结构:
*2.使用smarttable需要odata数据,在此使用mock server模拟odata服务
(1)新建一个文件夹用于存放mockserver,在此新建metadata.xml和mockserver.js
直接复制,
到
index.html
复制过来
require表示mockserver.js的路径,namespace位置+文件位置,webapp为默认应用位置不用写。
方法中传入mockserver,mockserver初始化,name为Component.js的路径
修改后结果:
manifest.json
复制高亮部分到自己的manifest.json中,用于执行odata资源,和模拟路径;数据资源为双向绑定
metadata.xml
namespace自定义
EntityType 实体类 名字是Product
实体类中有key为主键
属性,数据类型,允许为空,可修改,最大长度,标签(显示的标签内容)
。。。
。。。
。。。
实体类容器,定义为默认实体类容器,支持的格式转换为json,实体类集合名字,实体类类型为namespace中创建的类
。。。
。。。
。。。
mockserver.js
init方法中:
创建一个mockserver(模拟服务器),rootUri的值为可自定义
与manifest.json中dataSource中uri的值一样
模拟服务器配置,自动响应,自动响应延迟1秒
假冒,spath为获取当前的路径,模拟服务器假冒(metadata.xml,json文件目录)
tips:oMockServer.simulate (第二个参数json数据的位置无值,则使用自动生成数据)
模拟服务器,开始运行
3.view中使用smarttable(content中)
4.运行-结果
属性:
tableType 指定要在SmartTable控件中创建的表格的类型。如果你在视图中添加一个表格到SmartTable的内容中,这个属性没有效果
AnalyticalTable 分析表
ResponsiveTable 响应表(可在移动设备上使用)
Table 应被创建为smarttable的内容
TreeTable 应被创建为smarttable的内容(树表)
设置属性:
显示效果:
entitySet 实体设置名称来获取数据并生成列。注意,这不是一个动态的UI5属性
enableAutoBinding 当设置为true时,这会使用tableBindingPath(如果存在的话)或entitySet属性自动绑定该表。这是在初始化事件被触发之后发生的。
header 指定smarttable中显示的标题文本
使用方式:
显示效果:
showRowCount default:true 显示数据行计数
使用:
效果:
useVariantManagement 变式管理,默认为true,使用前需要设置persistencyKey属性
persistencyKey 用于访问个性化数据的密钥
使用:
效果:
useTablePersonalisation 默认为true,使用个性化表设置(齿轮)
使用:
效果:
editable 默认false,可编辑
使用:
效果:
editTogglable 待完善。。。指定可编辑属性是否可以通过工具栏上的按钮进行调整
使用:
效果:
showFullScreenButton 默认为false,全屏显示按钮
使用:
效果:
enableCustomFilter 可以用来覆盖过滤行为,如果设置为true(默认),代替滤入器输入框。当按下这个按钮时,SmartTable控件会直接在表格个性化对话框中打开过滤器面板。
useExportToExcel 将数据导出到电子表格应用程序 tips:当发送请求来生成电子表格时,任何$扩建参数都会被删除。(只有当exportType为sap.ui.comp.smarttable.ExportType.GW)时才有效。
SmartTable和smartfilterbar使用,连接Odata
1.使用代理,下载Destinations到本地,配置
2.添加代理到neo-app.json
{
"path": "/destinations/QGW",
"target": {
"type": "destination",
"name": "QGW"
},
"description": "QGW Test"
}
路径为代理的路径,name要和下载的配置名相同,type为终点,描述任意
3.controller中的onInit方法,实例化odataModel(会有个参数,设置为false【不设不影响】),设置使用批处理(false),设置得到的model到当前view。
4.view中使用<smartFilterBar>需要配置id 和<smartTable>使用smartFilterId为smartfilterbar的id,两个就可以结合使用
最简单SmartTable连接Odata报错
报错:无数据,can not read property 'currentVariantSetModified' of undefined,找不到这个属性
原因:smarttable中添加 useVariantManagement="false"
大量数据时,smarttable加载时间较长,缩短加载时间:
1.在index.html中添加类库
data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.comp, sap.ui.table, sap.ui.unified"
data-sap-ui-preload="async"