Question

目前，我正在尝试在OpenUI5中构建一个接口，它应该允许管理关系。整个应用程序通过oData连接到后端。

考虑以下示例：两个实体，“组”和“人”。每个小组可能由若干人（“成员”）组成。我想要做的是列出表格中的所有组 - 对于每个组成员，我想呈现一个MultiComboBox来选择与该组相关联的人员，如下所示：

enter image description here

设置视图很简单，但我在绑定方面遇到了一些麻烦。将一个集合（如“Groups”）绑定到一个表并将一个绑定属性（如“name”）绑定到一个项目当然没有问题，但我不知道如何绑定一个集合 - 这是另一个集合的子集 - 来可以这么说的嵌套列表。

我甚至不知道它是否可能，特别是因为我不仅希望目前隶属于某个组的人员出现在组合框中，而且还希望所有其他人能够选择它们。当然，我希望界面中的更改也适用于模型......

非常感谢任何提示实现所描述功能的方法！

Answer 1

两个不同的型号绑定到表.. 你可以将Groups和Members作为具有导航属性的实体作为成员 you can play around here

＆＃13;

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
		
		<title>Mobile App in 23 Seconds Example</title>
		
		<script  src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
			id="sap-ui-bootstrap"
			data-sap-ui-libs="sap.m" 
			data-sap-ui-theme="sap_bluecrystal"></script>
			<!-- only load the mobile lib "sap.m" and the Blue Crystal theme -->
		
		
		<script type="text/javascript">
			
			var sampleData = {
    "Groups": [
        {
            "GroupId": "D1",
            "GroupName": "Developers",
            "Members": []
     },
        {
            "GroupId": "D2",
            "GroupName": "GreenDay",
            "Members": []
     },
        {
            "GroupId": "D3",
            "GroupName": "BackStreet Boys",
            "Members": []
     },
        {
            "GroupId": "D4",
            "GroupName": "Managers",
            "Members": []
     }
     ]
};
var oModel = new sap.ui.model.json.JSONModel(sampleData);
var aData = [
    {
        key: "A",
        text: "John"
    },
    {
        key: "B",
        text: "Sachin"
    },
    {
        key: "C",
        text: "Dravid"
    },
    {
        key: "D",
        text: "David"
    },
    {
        key: "E",
        text: "Sunil"
    },
    {
        key: "F",
        text: "Ronald"
    },
    {
        key: "G",
        text: "Albert"
    }
   ];

var oMulti = new sap.m.MultiComboBox({
    selectionChange: function (oEvent) {
        //change your group data?
    }
});

oMulti.setModel(new sap.ui.model.json.JSONModel(aData));
var oTemplate = new sap.ui.core.Item({
    key: "{key}",
    text: "{text}",
    customData: new sap.ui.core.CustomData({
        key: "{GroupId}",
        value: "{GroupName}"
    })
});
oMulti.bindItems("/", oTemplate);

//Build Table
var oTable = new sap.m.Table({
    columns: [
    new sap.m.Column({
            width: "150px",
            header: new sap.m.Label({
                text: "Group Name"
            })
        }),
    new sap.m.Column({
            header: new sap.m.Label({
                text: "Members"
            })
        })
   ]
}).placeAt("content");
var oTemplate = new sap.m.ColumnListItem({
    cells: [
     new sap.m.Label({
            text: "{GroupName}"
        }),
     oMulti
    ],
    press: function (oEvent) {
        alert(oEvent.getSource().getBindingContext());
    }
});

oTable.setModel(oModel);
oTable.bindItems("/Groups", oTemplate);
			
		</script>
		
	</head>
	<body class="sapUiBody">
		<div id="content"></div>
	</body>
</html>

＆＃13;

OpenUI5中的绑定和关系

1 个答案: