Question

我想向sap.m.List中的每一行添加按钮。我要在该按钮上打开一个弹出窗口，以显示更多详细信息，而无需导航到另一页。

这里有任何代码片段或示例，我如何向每行添加按钮并将其绑定以从另一个模型中获取数据。

Answer 1

尝试以下代码在XML视图中为每行添加一个按钮：

<columns>
  <Column id="userNameColumn">
    <Text text="userNameLabelText" />
  </Column>
  <Column id="buttonColumn">
    <Text text="Button" />
  </Column>
</columns>
<items>
  <ColumnListItem>
    <cells>
      <Input value="{UserName}"/>
    </cells>
    <Button id="buttonId" icon="sap-icon://add" press="handleResponsivePopoverPress"></Button>
  </ColumnListItem>
</items>

用于处理按钮按下的控制器，请参见此处的示例 https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.ResponsivePopover/preview

Answer 2

您需要一个StandardListItem来代替CustomListItem。您可以在其中添加任何喜欢的控件：

<List headerText="Custom Content" items="{path: '/ProductSet'}" >
    <CustomListItem>
        <HBox>
            <Label text="{ProductName}"/>
            <Button text="More Infos" click="onPressMoreInfos" />
        </HBox>
    </CustomListItem>
</List>

我认为这里最棘手的部分是绑定。一个CustomListItem绑定到您集合中的单个实体。如果将Button添加到CustomListItem（或任何其他控件）中，它们也会自动绑定到特定实体。

因此，在点击处理程序中，您可以执行以下操作：

onPressMoreInfos: function(oEvent) {
    var oButton = oEvent.getSource();

    // if your model has a name, don't forget to pass it as a parameter
    var oContext = oButton.getBindingContext();

    // create the popover, either here or in a new method
    var oPopover = this.getTheInfoPopover();
    // if your model has a name, don't forget to pass it as the second parameter
    oPopover.setBindingContext(oContext);
}

然后，您的Popover具有与列表项相同的绑定信息，并且您可以访问特定实体的每个属性。

Answer 3

您可以将sap.m.CustomListItem用作项目聚合的模板。有一个示例here。您可以向该项目添加任何控件。

sap.m.list行中的“添加”按钮

3 个答案: