SAP之FIORI(4)-列表

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

	
		
		

		demo

		
		

		

		
			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");
			});
		
	

	
	

view.view.xml

view.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";

	return Controller.extend("newDemo.controller.view", {

	});
});

listDemo.view.xml

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
			}
		}
	}
}

效果