Связывание вложенных массивов в UI5 - PullRequest
Новая
       23

Связывание вложенных массивов в UI5

1 голос
/ 18 июня 2020

Я пытаюсь привязать вложенный массив к таблице SAPUI5. Моя модель JSON: 

{
  "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": "Базенков"
        }
      ]
    }
  ]
}

Теперь я использую таблицу SAPUI5. 

<Table items="{/Departments/Employees}">
  <columns>
    <Column>
      <Text text="LastName of Employee" />
    </Column>
  </columns>
  <ColumnListItem>
    <Input value="{LastName}" />
  </ColumnListItem>
</Table>

Я использую привязку данных, указанную выше, для отображения фамилии в каждой из строк таблицы . Но ничего не показывает. Любая помощь была бы замечательной.

Ответы [ 2 ]

0 голосов
/ 20 июня 2020

/Departments/Employees

Какой список Employees следует выбрать таблице из списка Departments? Таблица не может знать.

Однако пользователи знают, каких сотрудников из каких отделов они хотят видеть. Пусть их решат, разрешив им сначала выбрать отдел, а затем вы можете привязать соответствующий список сотрудников к таблице.

То есть либо древовидный элемент управления, либо набор из двух списков В вашем случае необходимы элементы управления (один для отделов, один для списка сотрудников). Вот пример: https://embed.plnkr.co/fVCzodmvWzieh2LH

0 голосов
/ 19 июня 2020

Как сказал Йонас в комментариях, вам нужно будет преобразовать данные в модели JSON (и вернуть их в модель), если вы хотите создать таблицу всех сотрудников во всех отделах. 

const departments = jsonModel.getProperty("/Departments");
const allEmployees = departments.flatMap(department => department.Employees);
jsonModel.setProperty("/AllEmployees", allEmployees);

А в привязке привязать к oDataItem>/AllEmployees. См. JSBin - https://jsbin.com/codonolive/1/edit?html, js, вывод

В качестве альтернативы, если вам нужен только конкретный c отдел, вы можете привязать таблицу к указанным c сотрудникам отдела указание индекса массива в привязке. Я считаю, что это должно быть 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...