我试图显示一个包含2列（角色，用户）的表（sap.m.table）。该表从JSONModel获取其数据 模型：
{
"roles":[
{
"id":1,
"name":"Administrator",
"permissions":[
{
"id":1,
"permissionUtilPermission":"CREATE_USER",
"description":"Create User",
"name":"Create User"
}
],
"user":[
{
"loginName":"admin1",
"firstName":"John",
"lastName":"Doe",
"id":1,
"active":true
},
{
"loginName":"admin2",
"firstName":"Carmen",
"lastName":"Stiffler",
"id":2,
"active":true
}
.........
]
},
{
"id":2,
"name":"User",
"permissions":[
],
"user":[
{
"loginName":"user1",
"firstName":"Carlos",
"lastName":"Mayer",
"id":3,
"active":true
},
{
"loginName":"user2",
"firstName":"Jonny",
"lastName":"Jefferson",
"id":4,
"active":true
},
.......
]
}
]
}
在视图中我创建了包含2列和ColumnListItem作为模板的表。 此模板包含sap.m.Text和sap.m.FlexBox，它们以sap.m.Button作为项目。
在第一列中应显示＆＃39; name＆＃39;的角色＆＃39;。 在第二列中应显示按钮内的FlexBox，这些按钮的文本应为角色用户的名称（＆＃39; loginName＆＃39;）
视图：
var oTable = new sap.m.Table('mRoleTable', {
width: '75%',
columns: [new sap.m.Column('', {
header: new sap.ui.commons.Label({
text: '{i18n>admin.RoleTableHeaderRole}'
})
}),
new sap.m.Column('', {
header: new sap.ui.commons.Label({
text: '{i18n>admin.RoleTableHeaderUser}'
})
})],
items: new sap.m.ColumnListItem('oRolesItemTemplateId', {
cells: [new sap.m.Text('item1Id', {
text: '{name}'
}),
new sap.m.FlexBox('item2Id', {
items: new sap.m.Button('userBtnId', {
text: '{user}'
}),
})]
})
});
控制器的onInit函数实例化一个新的JSONModel并从json文件加载数据。之后，将模型设置为表格，并将项目绑定到＆＃39; / roles＆＃39;
控制器：
onInit: function() {
var oView = this.getView();
var oController = this;
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData('../model/rolemanagement.json');
oModel.attachRequestCompleted(oModel, function(e) {
if (e.getParameters().success) {
console.log('loading successful...');
sap.ui.getCore().setModel(oModel);
var oMTable = sap.ui.getCore().byId('mRoleTable');
oMTable.setModel(oModel);
var oRolesItemTemplate = sap.ui.getCore().byId('oRolesItemTemplateId');
oMTable.bindAggregation("items", "/roles", oRolesItemTemplate);
} else {
console.log('. . . LOADING ERROR');
console.log(e.getParameters().errorobject.statusText);
}
});
}
如果我尝试，它只会显示如下表：
Role User
------------------------------------
Administrator [object Object]
User [object Object]
但我需要的是这样一个表：
Role User
------------------------------------
Administrator admin1 admin2
User user1 user2
这里有相同的表格以便更好地理解：
Role User
_______________________________________________
----------------------------------------------
| ------------------------ |<---ColumnListItem
| | |<-|------FlexBox
|Administrator | --------- -------- | |
| | | admin1 || admin2 |<-|--|-------- Buttons (text: '/role/user/loginName')
| | --------- -------- | |
| ------------------------ |
----------------------------------------------
----------------------------------------------
| ------------------------ |<---ColumnListItem
| | |<-|------FlexBox
| User | --------- -------- | |
| | | user1 || user2 |<-|--|-------- Buttons (text: '/role/user/loginName')
| | --------- -------- | |
| ------------------------ |
----------------------------------------------
有人为我的问题找到了解决方案吗？
答案 0 :(得分：0)
该角色中角色与用户之间的关系是父子之一。
这意味着列表中的列表。您不会考虑采用处理此方案的父子模板。
然后，您将选择该角色，然后向该角色中的用户显示。
硬编码{user/0/loginName}代替{user}会给你第一个用户（但你可能知道吗？）
我个人的建议是采用父子项向下钻取（即通过2个视图实现，其中第二个视图传递了所选角色，并显示映射到该角色的用户）。
我在阅读和编码中提到的其他一些小问题（从最佳实践角度来看）：使用jQuery.sap.log.info(代替console.log(和...
出于兼容性目的，OpenUI团队正在推荐命名模型，即oMTable.setModel(oModel, "roles")。这将意味着调整绑定以包括命名模型引用{roles>....}。
（以防这对您很重要 - 有关详细信息，请参阅API文档。）
答案 1 :(得分：0)
现在我得到了一个可行的解决方案：
控制器：
var oView = this.getView();
var oController = this;
//load data for roles
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData('../model/rolemanagement.json');
oModel.attachRequestCompleted(oModel, function(e) {
if (e.getParameters().success) {
jQuery.sap.log.info('loading roles model successful...');
sap.ui.getCore().setModel(oModel);
var oMTable = sap.ui.getCore().byId('mRoleTable');
oMTable.setModel(oModel);
} else {
jQuery.sap.log.info('. . . LOADING ERROR');
jQuery.sap.log.info(e.getParameters().errorobject.statusText);
}
});
视图：
new sap.m.Table('mRoleTable',{
width: '75%',
columns: [
new sap.m.Column({width: '25%', header: new sap.m.Label({text: "Role"})}),
new sap.m.Column({ header: new sap.m.Label({text: "User"})}),
],
items: {
path: "/",
template: new sap.m.ColumnListItem({
cells: [
new sap.m.Text({ text: "{roleName}" }),
new sap.ui.layout.Grid({
content: {
path: 'users',
template: new sap.m.Button('tmpBtn',{
text: '{loginName}',
type: 'Transparent',
layoutData: new sap.ui.layout.GridData({
span: "L2 M4 S5"
})
})
}
})
]
})
}
})