时间戳

首页 > 解决方案 > SAP UI5中数据的绑定

javascript - SAP UI5中数据的绑定

问题描述

我有一个类似下图的设计（见附图）。 在此处输入图像描述 模型是这样的：-

 {
  "Approvers": [
    {
      "AFE_ID": "DV-101007600DD",
      "AFE_NAME": "San Andreas 1",
      "COST_CENTER": "101007600",
      "LOCATION": "Midland",
      "VERSION": "Revised",
      "DEADLINE": "15th May 2020",
      "ACTION": "Approve/Reject",
      "STATUS": "Completed",
      "WBS_ID": "WBS Element 1",
      "CREATED_BY": "James Edwin",
      "CREATED_ON": "22-04-2020",
      "OWNER": "Dri Mathews",
      "LEVEL": {
        "LEVEL1": [
          {
            "APPROVER_NAME": "Sentra",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020",
            "LEVEL_ID": 1
          },
          {
            "APPROVER_NAME": "axis",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020",
            "LEVEL_ID": 1
          }
        ],
        "LEVEL2": [
          {
            "APPROVER_NAME": "bill",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020"
          },
          {
            "APPROVER_NAME": "oilp",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020"
          }
        ]
      }
    }
  ]
}

我试图以一种应该根据级别创建两个框的方式进行绑定，并且每个框都应该具有根据 json 的数据，即每个框中的 LEVEL 1 和 LEVEL2 数据。在下面的代码中，我为 Level 绑定了 Grid 控制器，它创建了两个框，但是当我尝试用表格内容填充每个框时，它会得到相同的内容。请建议我如何纠正这种绑定？

<f:GridContainer id="demoGrid" items="{approversCollection>/Approvers/0/LEVEL}">
                                <f:layout>
                                    <f:GridContainerSettings rowSize="5rem" columnSize="5rem" gap="1rem"/>
                                </f:layout>
                                <f:layoutS>
                                    <f:GridContainerSettings rowSize="4rem" columnSize="4rem" gap="0.5rem"/>
                                </f:layoutS>
                                <f:items>
                                    <FlexBox class="columns">
                                        <layoutData>
                                            <f:GridContainerItemLayoutData columns="12"/>
                                        </layoutData>
                                        <VBox backgroundDesign="Solid" class="demo">
                                            <VBox>
                                                <Label text="Level" design="Bold" class="sapUiSmallMarginTop sapUiMediumMarginBegin"/>
                                            </VBox>
                                            <VBox>
                                                <Table id="idApproversTable" class="demo" inset="false" growing="true"
                                                    items="{ path: 'approversCollection>/Approvers/0/LEVEL/2' }">
                                                    <columns>
                                                        <Column demandPopin="true">
                                                            <Label text="APPROVER NAME" design="Bold"/>
                                                        </Column>
                                                        <Column minScreenWidth="Phone" demandPopin="true" hAlign="Center">
                                                            <Label text="DEPARTMENT" design="Bold"/>
                                                        </Column>
                                                        <Column minScreenWidth="Phone" demandPopin="true" hAlign="Center">
                                                            <Label text="APPROVED ON" design="Bold"/>
                                                        </Column>
                                                    </columns>
                                                    <items>
                                                        <ColumnListItem>
                                                            <cells>
                                                                <Text text="{approversCollection>APPROVER_NAME}"/>
                                                                <Text text="{approversCollection>DEPARTMENT}"/>
                                                                <Text text="{approversCollection>APPROVED_ON}"/>
                                                            </cells>
                                                        </ColumnListItem>
                                                    </items>
                                                </Table>
                                                <layoutData>
                                                    <FlexItemData growFactor="1" baseSize="0" backgroundDesign="Solid" styleClass="sapUiTinyMargin"/>
                                                </layoutData>
                                            </VBox>
                                        </VBox>
                                    </FlexBox>
                                </f:items>
                            </f:GridContainer>

标签： javascriptxmldata-bindingsapui5

解决方案

您需要使用正确的绝对/相对路径并相应地修改您的模型：

...
"LEVEL":  [
    { "DATA" : [
        {
            "APPROVER_NAME": "Sentra",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020",
            "LEVEL_ID": 1
        },
        {
            "APPROVER_NAME": "axis",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020",
            "LEVEL_ID": 1
        }
    ]},
    { "DATA" : [
        {
            "APPROVER_NAME": "bill",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020"
        },
        {
            "APPROVER_NAME": "oilp",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020"
        }
    ]}
]
...

<f:GridContainer id="demoGrid" items="{approversCollection>/Approvers/0/LEVEL}">
...
    <Table id="idApproversTable" 
        class="demo"
        inset="false" 
        growing="true"
        items="{ path: 'approversCollection>DATA' }">
...
        <Text text="{approversCollection>APPROVER_NAME}"/>
        <Text text="{approversCollection>DEPARTMENT}"/>
        <Text text="{approversCollection>APPROVED_ON}"/>

推荐阅读