Fiori2.0学习笔记-UI5 of Table & List_fiori 在controller.js中找到list的customlistitem

List

List是很常用的一个组件，无论是在Desk还是在移动设备上。

我们需要引用sap.m.list库

最外层是一个ListItem的容器，包含所有的Items

官方推荐，移动设备推荐最多加载100条记录

多的话推荐使用growing属性，加载大量数据

List常用属性
selectionChange 点击每一个Item的时候会触发一个事件并进行处理
itemPress 也是事件处理
mode 单选多选
noDataText 没数据的情况
items 绑定要加载的数据model，是一个数据路径这样的数据绑定
enableBusyIndicator 没绑定会有一个提示busy的Loading，完全显示以后，Loading会消失
modeAnimationOn 动画处理
growingThreshold 第一次加载10条，我们就可以让其等于10
growingDirection 可以设置向上或向下加载更多
headerText&footerText 设置标题
showUnread 是否显示一个未读状态

List分类

因为List是一个容器，所以里面必定存在很多ListItem，我们要介绍的这个就比较厉害了，ObjectListItem，他是一个固定的格式，写死的。主要用于展示一个概要信息，包括标题，描述，图标，状态等等。

再介绍一个ActionListItem，这个列表更倾向于一个事件操作类的列表，你一看就能感觉出来是好几个按钮点击的效果。

DisplayListItem。左边一个label，右边一个value。简单直观粗暴。如果没有额外的需求，数据一绑就完事了。

FeedListItem。这兄弟有点像论坛。可以显示头像，事件。支持最大字符数量的缩放显示，可以显示html标签。

inputListItem更贴合移动设备的设备页面，labelvalue，输入框的显示

StandardListItem 标准的通用信息展示，头像，标题，描述，也支持onpress

CustomListItem 自定义布局

小结

ObjectListItem 概要信息
ActionListItem按钮事件操作
DisplayListItem 左label右value
FeedListItem 论坛 i
nputListItem 移动设备的设备
StandardListItem 固定信息展示
CusListItem 自定义

<List mode="SingleSelectMaster" delete="onDelete" headerText="Products" 
    items="{ path: '/PurchaseOrderCollection' }" growing="true" growingThreshold="4"
    growingScrollToLoad="true" noDataText="No Data">
    <--!mode是选择方式 目前的类型SingleSelectMaster是最常用的，选中会有一个高亮 除此之外还有Delete、MultiSelect、NoneDefault、SingleSelect、SingleSelectLeft、SingleSelectMaster-->
    <headerToolbar>
        <Toolbar>
            <Title text="Products" level="H2"/>
            <ToolbarSpacer />
            <Button icon="sap-icon://settings" press="onPress"/>
            <Button icon="sap-icon://person-placeholder" press="onPress"/>
            <Button icon="sap-icon://drop-down-list" press="onPress"/>
        </Toolbar>
    </headerToolbar>
    <items>
        <CustomListItem>
            <HBox>
                <core:Icon size="2rem" src="sap-icon://attachment-photo"
                class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom"/>
                <VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom">
                    <Link text="{ID}" target="{ProductId}" press="onPressLink"/>
                    <Label text="{LifecycleStatusDesc}" />
                </VBox>
            </HBox>
        </CustomListItem>
    </items>
    <swipeContent>
        <!--移动设备上常用的属性 向左滑动单条item会出现一个Delete的按钮-->
        <Button text="Delete" type="Reject" press="onDelete"/>
    </swipeContent>
</List>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Table

List与Table的区别其实很明显，那就是Table可以显示多列，List就不行
常用的table

• sap.m.Table 支持响应式的一个Table，实际工作中最长用到的一个Table
• sap.ui.table.TreeTable 支持展开树形结构的Table
• sap.ui.table.Table 用于大量数据列表的展示，不适用于移动设备
• sap.ui.comp.smarttable.SmartTable 用于OData数据获取，其实以上三种也都可以获取到，但是这个SmartTable更为智能

需要引入sap.ui.table库

他这是以列为单位的，每一列可以写一个Label，再写一个template，里面再用text包裹一个数据

visibleRowCount默认显示多少条数据 selectionBehavior选中之后的样式

<Table id="table" visibleRowCount="8" selectionBehavior="RowOnly" enableSelectAll="true"
    columnHeaderVisible="true" editable="false" 
    columnSelect="rowSelectionChange" rowSelectionChange="rowSelectionChange"
    showColumnVisibilityMenu="true" rows="{ path: '/d/results' }" enableBusyIndicator="true" ariaLabelledBy="title">
    <noData>
        <m:BusyIndicator class="sapUiMediumMargin"/>
    </noData>
    <columns>
        <Column sortProperty="Name" filterProperty="Name" autoResizable="true" width="11rem">
            <m:Label text="Name"/>
            <template>
                <m:Text text="{Name}"/>
            </template>
        </Column>
        <Column sortProperty="ProductID" filterProperty="ProductID" autoResizable="true" width="6rem">
            <m:Label text="ProductID"/>
            <template>
                <m:Text text="{ProductID}"/>
            </template>
        </Column>
        <Column sortProperty="Category" filterProperty="Category" autoResizable="true" width="11rem">
            <m:Label text="Category"/>
            <template>
                <m:Text text="{Category}"/>
            </template>
        </Column>
        <Column sortProperty="SupplierName" filterProperty="SupplierName" autoResizable="true" width="12rem">
            <m:Label text="SupplierName"/>
            <template>
                <m:Text text="{SupplierName}"/>
            </template>
        </Column>
        <Column filterProperty="Price" width="9rem">
            <m:Label text="Price"/>
            <template>
                <u:Currency value="{ path: 'Price', type: 'sap.ui.model.type.String' }" currency="{CurrencyCode}"/>
            </template>
        </Column>
        <Column hAlign="End" autoResizable="true">
            <m:Label text="End"/>
            <template>
                <m:Text text="{Width}x{Height}x{Depth} {DimUnit}"/>
            </template>
        </Column>
    </columns>
</Table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46