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

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新列而不是 sap.m.Input。请查看下图

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

onAdd: function() {
            var table = this.getView().byId("reqTable");
            var itemRow = {
                StartDate: new sap.m.Input(),
                EndDate: new sap.m.Input(),
                editable: true,
                LeaveType: ""
            };

            var oModel = this.getView().getModel('userInfoTableModel').getData();

            oModel.push(itemRow);

            this.getView().getModel('userInfoTableModel').setData(oModel);
        }

有人可以帮我让它工作吗？

提前谢谢

Answer 1

您必须使用工厂模板。

<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>

在 Controller 上:

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