SAP之FIORI(4)-列表
List的属性
growing：设置运行请求更多的条目
growingThreshold:每次请求的数据条数
mode list的模式 “None” "SingleSelect" "MutiSelect" "Delete" "noDataText"
List的事件
delete 删除按钮点击时候触发
itemPress 点击条目触发
selectionChange :选择的条目变化的时候触发
updateFinished 绑定的数据被更新或者处理后触发
updateStarted 绑定的数据被更新或者处理前触发
StandardListItem属性
info 条目的标题
infoState:条目的附加信息的状态 Error、Warning、Success、None
description:条目标题的附加信息
highlight :将条码高亮显示 取值Error、Warning、Success、Information、None
type : 条目的类型 默认值为Inactive Active 条目点击时可触发press事件，
Detail 条目中显示详细信息按钮并可触发detailPress事件
DetailAndActive 同时使条码可点击并显示详细信息按钮，点击条目可触发press事件，点击详情触发detailPress事件
Inactive：条目点击时无作用
Navigation 条目可浏览额外信息，显示">"按钮，并可触发press事件
unread:未读
visible:是否可见
StandardListItem事件
detailPress 点击条目详情信息触发
press 点击条目触发
项目名
newDemo
manifest.json
"sap.ui5": {
"rootView": {
"viewName": "newDemo.view.view",
"type": "XML"
}index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>demo</title>
<script id="sap-ui-bootstrap"
src="../../resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"newDemo":"","sap.ui.demo.mock":"mockdata"}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
sap.ui.getCore().attachInit(function() {
/*new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "demo"
})*/
//input demo
//demo为项目名
new sap.m.App({
pages : [
new sap.m.Page({
title : "SAP UI5",
enableScrolling:true,
content:[
new sap.ui.core.ComponentContainer({
name:"newDemo",
settings:{
id:"newDemo"
}
})
]
})
]
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>view.view.xml
<mvc:View controllerName="newDemo.controller.view"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<l:VerticalLayout
class="sapUiContentPadding"
width="100%">
<l:content>
<mvc:XMLView viewName="newDemo.view.listDemo"/><!--加载 demo项目的view文件夹下的inputDemo文件-->
</l:content>
</l:VerticalLayout>
</mvc:View>view.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("newDemo.controller.view", {
});
});listDemo.view.xml
<mvc:View controllerName="newDemo.controller.list"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Panel>
<content>
<List headerText="Products" width="600px"
items="{path:'/ProductCollection',
sorter:{
path:'Name'
}}">
<items><StandardListItem title="{Name}" description="{ProductId}" info="Category" infoState="Success"/></items>
</List>
<List width="600px" headerText="Products" footerText="footer text" growingThreshold="3" growing="true"
items="{path:'/ProductCollection',
sorter:{
path:'Name'
}}" growingTriggerText="More" growingDirection="Downwards">
<items><StandardListItem title="{Name}" highlight="Information" description="{ProductId}" info="Category" infoState="Success"/></items>
</List>
<List width="600px" headerText="Products"
items="{path:'/ProductCollection',
sorter:{
path:'Name'
}}" mode="MultiSelect">
<items><StandardListItem title="{Name}" type="DetailAndActive" detailPress="handleItemDetailPressEvent" press="handleItemPressEvent"/></items>
</List>
<List width="600px" headerText="Products"
items="{path:'/ProductCollection',
sorter:{
path:'Name'
}}" mode="Delete" delete="handleListDeleteEvent">
<items><StandardListItem title="{Name}" type="DetailAndActive" detailPress="handleItemDetailPressEvent" press="handleItemPressEvent"/></items>
</List>
</content>
</Panel>
</mvc:View>list.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function(Controller,JSONModel) {
"use strict";
return Controller.extend("newDemo.controller.list", {
onInit:function(evt){
//List中的内容从json文件中获取
var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
this.getView().setModel(oModel);
},
handleItemDetailPressEvent:function(evt){
alert(this.getView().getModel().getProperty("ProductId",evt.getSource().getBindingContext()));
},
handleItemPressEvent:function(evt){
alert(this.getView().getModel().getProperty("ProductId",evt.getSource().getBindingContext()));
},
handleListDeleteEvent:function(evt){
alert(evt.getParameter("listItem").getTitle());
}
});
});webapp/mockdata/products.json
{
"ProductCollection":[
{
"ProductId":"HT-1002",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 2",
"Description":"otebook Basic 2 80 GHz",
"ProductPicUrl":"img/timg.jpg",
"Quantity":10
},
{
"ProductId":"HT-1003",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 3",
"Quantity":11
},
{
"ProductId":"HT-1005",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 5",
"Quantity":12
},
{
"ProductId":"HT-1006",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 6",
"Quantity":13
},
{
"ProductId":"HT-1007",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 7"
},
{
"ProductId":"HT-1001",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 1",
"Quantity":14
},
{
"ProductId":"HT-1008",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Description": "Notebook Basic 15 with 2,80GHz",
"ProductPicUrl":"img/1.jpg",
"Name":"Notebook Basic 8",
"Quantity":15
},
{
"ProductId":"HT-1009",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 9",
"Quantity":16
}
],
"ProductCollectionStats":{
"Counts":{
"Total":123,
"Weight":{
"Ok":53,
"Heavy":51,
"Overweight":19
}
},
"Groups":{
"Category":{
"Accessproes":34
}
}
}
}效果
