Question

我对sap.m.Table的要求不高。最初，我创建了一个如下表。

                          <Table id="reqTable" mode="MultiSelect">
                                                <columns>
                                                    <Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
                                                        <Text text="{i18n>startDate}"/>
                                                    </Column>
                                                    <Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
                                                        <Text text="{i18n>endDate}"/>
                                                    </Column>
                                                </columns>
                                                <items>
                                                    <ColumnListItem>
                                                        <cells>
                                                            <Text text="12/08/2002"/>
                                                            <Text text="13/09/2002"/>                                                           
                                                        </cells>
                                                    </ColumnListItem>
                                                </items>
                                            </Table>

现在，如果我单击“添加按钮”，则需要在该列中添加sap.m.Input，但是我会在新列中得到 NaN / NaN / NaN 而不是{{1 }}。请检查下图

在上图中，如果您看到的话，我需要sap.m.Input而不是NaN，并且它必须是可编辑的。我正在尝试使用下面的代码，但是它不起作用。

sap.m.Input

有人可以帮我使它工作吗。

提前谢谢

Answer 1

您必须使用Factory模板。

<Table id="idProductsTable"
          mode="SingleSelectMaster"
          growing="true"
          growingThreshold="5"
          selectionChange="onSelectionChange"
          updateFinished="onUpdateFinished"
          items="{
                       path: '/',
                       factory: 'factoryFunc'
                  }">
            <columns>
              <Column>
                <Label text="ID" />
              </Column>
              <Column>
                <Label text="Product" />
              </Column>
              <Column>
                <Label text="Weight" />
              </Column>
              <Column>
                <Label text="Availability" />
              </Column>
            </columns>
   </Table>

在控制器上：

factoryFunc: function(id, context) {
        var oTemplate = new Item({
          text: "{Text}"
        });
        var oContext = context.getProperty("Control");
        if (oContext == "C") {
          return new ColumnListItem({
            cells: [new Text({
                text: "{ProductId}"
              }),
              new Text({
                text: "{Name}"
              }),
              new Text({
                text: "{Weight}"
              }),
              new Text({
                text: "{Availability}"
              })
            ]
          })
        }else if (oContext == "N") {
          return new ColumnListItem({
            cells: [new Text({
                text: "{ProductId}"
              }),
              new Text({
                text: "{Name}"
              }),
              new Text({
                text: "{Weight}"
              }),
              new Input({
                value: "{Availability}"
              })
            ]
          })
        }

}

有关Sap Blog，Plunker

的更多信息

Answer 2

您之所以得到NaN是因为框架试图parceFloat绑定期望的属性值undefined，因为这些值取自sap.m.Input实例您已经创建。

您不应将控件存储在模型中，因为它违反了SAPUI5框架的MVC体系结构。

我建议您使用工厂函数来呈现表列表项单元格：您可以基于“ editable”属性来决定呈现sap.m.Text还是sap.m.Input。

Answer 3

通过创建ColumnListItem模板，然后将其作为项目添加到表的聚合中，可以在其中添加带有输入字段的行。 ColumnListItem可以具有任何控件。在下面的示例中，我添加了日期范围选择和“输入”字段。

oTable.bindAggregation("items", {
                path: "mainModel>/results",
                template: new sap.m.ColumnListItem({
                    cells: [
                        new sap.m.DateRangeSelection({
                            dateValue: "{mainModel>startDate}",
                            secondDateValue: "{mainModel>endDate}",
                            change: that.fnHandleDateChange.bind(that),
                            minDate: new Date(),
                            maxDate: new Date(9999, 11, 31)
                        }),
                        new sap.m.Input({
                            value: "{mainModel>value}",
                            type: sap.m.InputType.Number,
                            change: that.fnHandleValueChange.bind(that),
                            textAlign: sap.ui.core.TextAlign.Right,
                        })
                    ],
                    highlight: sap.ui.core.MessageType.Information
                })
            });

sapui5 sap.m.table如何在单击添加行按钮时将输入添加为列

3 个答案: