我正在尝试显示一个包含 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 作为项目。
在第一列中应显示“角色”的“名称”。在第二列中应该显示按钮中的 FlexBox,这些按钮的文本应该是角色用户的名称('loginName')
看法:
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 文件中加载数据。之后将模型设置为表格并将项目绑定到“/角色”
控制器:
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')
| | --------- -------- | |
| ------------------------ |
----------------------------------------------
有人对我的问题有解决方案吗?