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

Question

I have a small requirement in sap.m.Table . Initially, I created a table like below..

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

Now if i click on "Add Button", i need to add sap.m.Input to the column , But im getting NaN/NaN/NaN in the new column instead of sap.m.Input . Please check the below image

In the above image, if you see, I need sap.m.Input instead of NaN and it must be editable. I'm trying with below code, but it is not working..

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);
        }

Can someone please help me to make it work.

Thank you in advance

Answer 1

You Have to use Factory Template.

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

On 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}"
              })
            ]
          })
        }

}

More on Sap Blog , Plunker

Answer 2

You are getting NaN because the framework is trying to parceFloat the property values expected by the binding, which are undefined , since these are taken from the sap.m.Input instance you've created.

You shouldn't be storing Controls in a model, since it violates the MVC architecture of SAPUI5 framework.

I would suggest you to use a factory function to render table list item cells: you can decide whether to render sap.m.Text or sap.m.Input based on "editable" property.

Answer 3

You can add a Row with input field in it by creating a template of ColumnListItem and then adding that in the aggregation of the table as items. The ColumnListItem can have any control. In below example, I'm adding a date range selection and an Input field.

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
                })
            });