0

我正在尝试显示一个包含 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')   
|                  |  ---------  --------   |  |
|                   ------------------------   |
 ----------------------------------------------

有人对我的问题有解决方案吗?

4

2 回答 2

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"
                            })
                        })
                    }
                  })
                ]
              })
        }
        })
于 2015-11-11T08:36:10.053 回答
0

该角色中的角色和用户之间的关系是父子关系之一。这意味着列表中的列表。你会不会考虑采用处理这种情况的父子模板。然后,您将选择角色,然后会看到该角色中的用户。硬编码{user/0/loginName}而不是{user}会给你第一个用户(但你可能知道?)我个人的建议是采用父子向下钻取(即通过 2 个视图实现,其中第 2 个视图传递所选角色并显示映射的用户到那个角色)。

我在阅读和编码中发现的其他一些小问题(从最佳实践的角度来看):使用jQuery.sap.log.info(而不是console.log(和... 出于兼容性目的,OpenUI 团队推荐命名模型,即oMTable.setModel(oModel, "roles"). 这将意味着调整绑定以包含命名模型引用{roles>....}。(以防万一这对您很重要 - 有关详细信息,请参阅 API 文档。)

于 2015-11-09T17:57:08.200 回答