如何为每个SAPUI5在皂表( listItem )中显示嵌套的JSON
如何为每个SAPUI5在皂表( listItem )中显示嵌套的JSON
提问于 2014-08-22 11:46:35
我有一个sap.m splitApp，在这里我有一个课程概述。通过显示课程，您可以获得详细信息，如该课程的参与者列表。目前，只能显示所有课程的同一(一个)课程的参与者。如何显示每个课程的适当参与者。
如果有人有一个很棒的主意:)谢谢。
这是我的Details.view
sap.ui.jsview("tem_trainer.Details", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf tem_trainer.Details
*/
getControllerName : function() {
return "tem_trainer.Details";
},
onBeforeFirstShow: function(oEvent){
this.getController().onBeforeFirstShow(oEvent);
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf tem_trainer.Details
*/
createContent : function(oController) {
function dateDiffInDays(a, b) {
// Discard the time and time-zone information.
var utc1 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
var utc2 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
return Math.floor((utc2 - utc1) / (1000 * 60 * 60 * 24));
}
var oTimestamp = new sap.m.ObjectAttribute({
text: '{start} - {end}, {starttime} - {endtime}',
});
var oRoom = new sap.m.ObjectAttribute({
text: "{room}",
});
var oHeader = new sap.m.ObjectHeader({
title: "{name}",
number: "{start}",
numberUnit: "Start Date",
attributes: [
oTimestamp, oRoom
]
});
var oTable = new sap.m.Table("idRandomDataTable", {
headerToolbar : new sap.m.Toolbar({
content : [ new sap.m.Label({
text : "Participant List"
}), new sap.m.ToolbarSpacer({}), new sap.m.Button("idPersonalizationButton", {
icon : "sap-icon://person-placeholder"
}) ]
}),
columns : [
new sap.m.Column({
width : "2em",
header : new sap.m.Label({
text : "Firstname"
})
}),
new sap.m.Column({
width : "2em",
header : new sap.m.Label({
text : "Lastname"
})
}),
new sap.m.Column({
width : "2em",
header : new sap.m.Label({
text : "Job"
})
}),
new sap.m.Column({
width : "2em",
header : new sap.m.Label({
text : "Company"
})
})
]
});
var oModel1 = new sap.ui.model.json.JSONModel();
var model = sap.ui.getCore().getModel();
var aData = model.getProperty("/courses");
oModel1.setData({
modelData : aData
});
oTable.setModel(oModel1);
oTable.bindItems("/modelData/0/participant", new sap.m.ColumnListItem({
cells : [ new sap.m.Text({
text : "{firstname}"
}), new sap.m.Text({
text : "{lastname}"
}), new sap.m.Text({
text : "{job}",
}), new sap.m.Text({
text : "{company}",
}),]
}));
var oIconTabBar = new sap.m.IconTabBar({
items: [
new sap.m.IconTabFilter({
text: "General",
icon: "sap-icon://hint",
content: [
]
}),
new sap.m.IconTabFilter({
text: "Participants",
icon: "sap-icon://visits",
content: [
oTable
]
}),
]
});
return this.page = new sap.m.Page({
title: "Course Details",
content: [
oHeader, oIconTabBar
]
});
}
});这是我的Details.controller
sap.ui.controller("tem_trainer.Details", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf tem_trainer.Details
*/
// onInit: function() {
//
// },
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf tem_trainer.Details
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf tem_trainer.Details
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf tem_trainer.Details
*/
// onExit: function() {
//
// }
onBeforeFirstShow: function(oEvent){
if(oEvent.data.bindingContext){
// Binding Kontext setzen
this.getView().page.setBindingContext(oEvent.data.bindingContext);
}
},
onListSelect: function(oEvent){
var oBindingContext = oEvent.getParameter(
"listItem").getBindingContext();
var sViewId = "detailCourse_" +
oEvent.getParameter(
"listItem").data("req_id");
sap.ui.getCore().getEventBus().publish(
"nav",
"to", {
viewName: "tem_trainer.Details",
viewId: sViewId,
data: {
bindingContext: oBindingContext
}
});
},
onListItemTap: function(oEvent){
var oBindingContext = oEvent.oSource.getBindingContext();
var sViewId = "detailCourse_" +
oEvent.oSource.data("req_id");
sap.ui.getCore().getEventBus().publish(
"nav",
"to", {
viewName: "tem_trainer.Details",
viewId: sViewId,
data: {
bindingContext: oBindingContext
}
});
},
onNavButtonTap: function(){
// Wird ausgeführt wenn die Hardwaretaste
// oder der Back-Button gedrückt wird
sap.ui.getCore().getEventBus().publish(
"nav", "back");
}
});这是我的Courses.json
{
"courses": [
{
"req_id": "1",
"name" : "ABAP OO Basics",
"start" : "20-08-2014",
"end" : "22-08-2014",
"starttime": "10:00:00",
"endtime": "16:00:00",
"status": "Booked",
"room": "Room CDE",
"adress" : "Adress No.1",
"street": "Street No.1",
"zip_code": "74892142578485",
"city": "City No.1",
"country": "Country No.1",
"phone": "0595726764675435497436497",
"fax":"12",
"cap_min": "10",
"cap_opt": "20",
"cap_max": "30",
"img": "./res/1.jpg",
"content": "Test",
"participant": [{ "firstname": "Maik",
"lastname": "Maier",
"job": "installer",
"company": "muster"
},
{ "firstname": "Marco",
"lastname": "Schmidt",
"job": "installer",
"company": "schmitt"
},
{ "firstname": "Hans",
"lastname": "Mueller",
"job": "installer",
"company": "muster"
},
{ "firstname": "Matthias",
"lastname": "Gottlieb",
"job": "installer",
"company": "schmitt"
}]
},
{
"req_id": "2",
"name" : "ABAP OO Basics II",
"start" : "22-08-2014",
"end" : "23-08-2014",
"starttime": "11:00:00",
"endtime": "14:00:00",
"status": "Booked",
"room": "Room XYZ",
"adress" : "Adress No.2",
"street": "Street No.2",
"zip_code": "2222",
"city": "City No.2",
"country": "Country No.2",
"phone": "22222",
"fax":"2222",
"cap_min": "10",
"cap_opt": "20",
"cap_max": "30",
"img": "./res/2.jpg",
"content": "Test",
"participant": [{ "firstname": "Name",
"lastname": "Name",
"job": "installer",
"company": "muster"
},
{ "firstname": "Name2",
"lastname": "Name2",
"job": "installer",
"company": "schmitt"
}]
}
]
}编辑:这是我的"Master.controller“
sap.ui.controller("tem_trainer.Master", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf tem_trainer.Master
*/
// onInit: function() {
//
// },
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf tem_trainer.Master
*/
onBeforeRendering: function() {
var oInbox = sap.ui.getCore().byId("inboxList");
oInbox.removeSelections();
var oJSONDataModel = new sap.ui.model.json.JSONModel();
oJSONDataModel.loadData("./json/Courses.json");
sap.ui.getCore().setModel(oJSONDataModel);
},
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf tem_trainer.Master
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf tem_trainer.Master
*/
// onExit: function() {
//
// }
onBeforeFirstShow: function(oEvent) {
this.bindListData();
if(oEvent.data.title) {
this.getView().page.setTitle(oEvent.data.title);
}
},
bindListData: function(aFilters){
var that = this;
this.getView().oList.bindAggregation("items", {
path: "/courses",
factory: function(sId){
return new sap.m.StandardListItem(sId, {
icon : "sap-icon://course-program",
title: {
path:"name",
},
description: {
path:"start",
},
type: jQuery.device.is.phone?
sap.m.ListType.Navigation : sap.m.ListType.None,
customData: [
new sap.ui.core.CustomData({
key: "req_id",
value: "{req_id}"
}),
],
tap: [that.onListItemTap, that]
}).setInfoState(sap.ui.core.ValueState.Success);
},
filters: aFilters
});
},
onListSelect: function(oEvent){
var oBindingContext =
oEvent.getParameter(
"listItem"
).getBindingContext(),
sViewId = "detailCourse_" +
oEvent.getParameter(
"listItem").data("req_id");
// Ereignis an EventBus übergeben
sap.ui.getCore().getEventBus().publish(
"nav",
"to", {
viewName: "tem_trainer.Details",
viewId: sViewId,
data: {
bindingContext: oBindingContext
}
});
},
onListItemTap: function(oEvent){
// siehe onListSelect
var oBindingContext =
oEvent.oSource.getBindingContext(),
sViewId = "detailCourse_" +
oEvent.oSource.data("req_id");
sap.ui.getCore().getEventBus().publish(
"nav",
"to", {
viewName: "tem_trainer.Details",
viewId: sViewId,
data: {
bindingContext: oBindingContext
}
});
},
//Navigation Zurück
onNavButtonTap: function(){
sap.ui.getCore().getEventBus().publish(
"nav",
"back"
);
},
//Search Functionality
handleSearch: function(oEvent) {
this._updateList();
},
_updateList : function () {
var filters = [];
//var oView = this.getView();
// Filter für die Suche
//var searchString = oView.byId("searchField").getValue();
var searchString = sap.ui.getCore().byId("searchField").getValue();
if (searchString && searchString.length > 0) {
var filter = new sap.ui.model.Filter("name", sap.ui.model.FilterOperator.Contains, searchString);
filters.push(filter);
}
// List Binding updaten
//var list = oView.byId("inboxList");
var list = sap.ui.getCore().byId("inboxList");
var binding = list.getBinding("items");
binding.filter(filters);
},
}); 编辑:这就是我调整的内容：
Details.controller
onInit : function() {
var bus = sap.ui.getCore().getEventBus();
bus.subscribe("nav", "to", this.navToHandler, this);
},
navToHandler : function(channelId, eventId, data) {
if (data && data.viewId) {
var oBindingContext = data.data.bindingContext;
this.getView().setBindingContext(oBindingContext);
}
},
//This is a function i already had and which is called by the view
onBeforeFirstShow: function(oEvent){
if(oEvent.data.bindingContext){
// Binding Kontext setzen
this.getView().page.setBindingContext(oEvent.data.bindingContext);
}
},在我的Details.view里
var oModel1 = new sap.ui.model.json.JSONModel();
var model = sap.ui.getCore().getModel();
var aData = model.getProperty("/courses");
oModel1.setData({
modelData : aData
});
oTable.setModel(oModel1);
oTable.bindItems("participant", new sap.m.ColumnListItem({
cells : [ new sap.m.Text({
text : "{firstname}"
}), new sap.m.Text({
text : "{lastname}"
}), new sap.m.Text({
text : "{job}",
}), new sap.m.Text({
text : "{company}",
}),]
}));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25446282
复制相关文章
相似问题
腾讯云开发者
