在 UI5 中绑定嵌套的 arrays
[英]Binding nested arrays in UI5
问题描述
I am trying to bind a nested array to the SAPUI5 table.
我正在尝试将嵌套数组绑定到 SAPUI5 表。 My JSON model:我的 JSON model：
{
"Departments": [
{
"ID": "1",
"Name": "Транспортный цех 1",
"Employees": [
{
"ID": "1000001234",
"LastName": "Tom"
},
{
"ID": "1000001234",
"LastName": "Jerry",
}
]
},
{
"ID": "2",
"Name": "Транспортный цех 2",
"Employees": [
{
"ID": "1000001234",
"LastName": "Базенков"
},
{
"ID": "1000001234",
"LastName": "Базенков"
}
]
}
]
}
Now I am using SAPUI5 Table.现在我正在使用 SAPUI5 表。
<Table items="{/Departments/Employees}">
<columns>
<Column>
<Text text="LastName of Employee" />
</Column>
</columns>
<ColumnListItem>
<Input value="{LastName}" />
</ColumnListItem>
</Table>
I am using above data binding to display last name to each one of the rows of the table.我正在使用上面的数据绑定来显示表中每一行的姓氏。 But it shows nothing.但它什么也没显示。
2 个解决方案
解决方案1
1 2020-06-19 00:47:12
As Jonas said in the comments, you would need to transform the data in the JSON model (and set it back into the model) if you wanted to create a table of all employees across all departments.正如 Jonas 在评论中所说，如果您想创建一个包含所有部门所有员工的表，则需要转换 JSON model 中的数据（并将其设置回模型中）。
const departments = jsonModel.getProperty("/Departments");
const allEmployees = departments.flatMap(department => department.Employees);
jsonModel.setProperty("/AllEmployees", allEmployees);
And in the binding, bind to oDataItem>/AllEmployees .在绑定中，绑定到oDataItem>/AllEmployees 。 See JSBin - https://jsbin.com/codonolive/1/edit?html,js,output见 JSBin - https://jsbin.com/codonolive/1/edit?html,js,output
Alternatively, if you wanted just a specific department, you can bind the table to specific Department's employees by specifying the index of the array in the binding.或者，如果您只想要一个特定的部门，您可以通过在绑定中指定数组的索引来将表绑定到特定部门的员工。 I believe it should be oDataItem>/Departments/0/Employees .我相信它应该是oDataItem>/Departments/0/Employees 。
sap.ui.define([ "sap/ui/model/json/JSONModel" ], function (JSONModel) { // Read the view from the HTML page (this won't be needed productively) const view = sap.ui.xmlview("main", { viewContent: jQuery("#main").html() }); // Create the model const model = new JSONModel({ "Departments": [ { "ID": "1", "Name": "Транспортный цех 1", "Employees": [ { "ID": "1000001234", "LastName": "Tom" }, { "ID": "1000001234", "LastName": "Jerry", } ] }, { "ID": "2", "Name": "Транспортный цех 2", "Employees": [ { "ID": "1000001234", "LastName": "Базенков" }, { "ID": "1000001234", "LastName": "Базенков" } ] } ]}); // Change the binding of the table to '/AllEmployees' to use the code below: const allEmps = model.getProperty("/Departments").flatMap(dep => dep.Employees) model.setProperty("/AllEmployees", allEmps) // Configure the model view.setModel(model, "oDataItem") view.placeAt("content") });
<:DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <script src="https.//openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_fiori_3_dark" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-libs="sap:m"></script> <script id="main" type="sapui5/xmlview"> <mvc:View displayBlock="true" xmlns.mvc="sap.ui.core.mvc" xmlns="sap:m"> <Table items="{oDataItem>/Departments/0/Employees}" width="auto" fixedLayout="false" mode="MultiSelect" > <columns> <Column width="auto"> <Text text="LastName of Employee" /> </Column> </columns> <items> <ColumnListItem> <cells> <Input editable="true" textAlign="Left" type="Text" change="onNameTextChange" width="15em" value="{path:'oDataItem>LastName'}" /> </cells> </ColumnListItem> </items> </Table> </mvc:View> </script> </head> <body class="sapUiBody sapUiSizeCompact"> <div id='content'></div> </body> </html>
解决方案2
0 2020-06-19 21:30:06
/Departments/Employees
Which list of Employees should the table pick from the Departments list?该表应从Departments列表中选择哪个Employees列表？ The table cannot know.表无法知道。
The users, however, know which employees from which departments they want to see.但是，用户知道他们想看到哪些部门的哪些员工。 Let them decide by allowing them to pick a department first, and then you can bind the corresponding employee list to the table.让他们决定先让他们选择一个部门，然后你就可以将对应的员工列表绑定到表中。
Ie either a tree-like control or a set of two list controls (one for departments, one for the employee list) is needed in your case.即，在您的情况下，需要一个树状控件或一组两个列表控件（一个用于部门，一个用于员工列表）。 Here is an example: https://embed.plnkr.co/fVCzodmvWzieh2LH这是一个示例： https://embed.plnkr.co/fVCzodmvWzieh2LH
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.