Smarttable使用

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"