如何将数据添加到 xml 视图中的表行 [英] How to add the data to table rows in xml view

问题描述

我有如下表格:

<Table id="TestTable" selectionMode="Single" rows="{path: '/Collection'}"  visibleRowCount="5">
                    <columns>
                        <Column width="4rem" >
                            <m:Text text="S.No" />
                            <template>
                                <m:Text text="{serialId}" wrapping="false"  />
                            </template>
                        </Column>
                        <Column>
                            <m:Text text="Option" />
                            <template>
                                <m:Text text="{Option}" wrapping="false" />
                            </template>
                        </Column>
                        <Column>
                            <m:Text text="Quantity" />
                            <template>
                                <m:Text text="{Quantity}" wrapping="false" />
                            </template>
                        </Column>
                        <Column>
                            <m:Text text="Pin" />
                            <template>
                                <m:Text text="{Batch}" wrapping="false" />
                            </template>
                        </Column>
                        <Column hAlign="End" width="4rem" >
                            <m:Text text="Edit" />
                            <template>
                                <m:Button icon="sap-icon://edit" press="editRow" type="Reject"/>
                            </template>
                        </Column>
                        <Column hAlign="End" width="4rem">
                            <m:Text text="Drag" />
                            <template>
                                <m:Button icon="sap-icon://grid"/>
                            </template>
                        </Column>
                        <Column hAlign="End" width="4rem">
                            <m:Text text="Delete" />
                            <template>
                                <m:Button icon="sap-icon://delete" press="moveToTable1" type="Reject"/>
                            </template>
                        </Column>
                    </columns>
                </Table>

为了将数据添加到行中，我使用了一个带有表单的对话框，我得到了这些值:

For the above to add data to rows I am using a dialog box with a form and i have get those values as:

从对话框中获取值:

    var OptionValue = sap.ui.getCore().byId("XOption").getSelectedKey(); //data from fragment
    var QuantityValue = sap.ui.getCore().byId("ZQuantity").getSelectedKey();
    var PinValue = sap.ui.getCore().byId("CPin").getSelectedKey();

每次在对话框中单击确定"时，我都尝试添加这些值(添加到行)

I am trying to add these values every time clicking ok in dialog box (add to the rows )

我在 ok 函数中尝试如下(我创建的 func 的一部分如下):

I tried as below in ok function (part of func i created is below):

    var oTable = this.byId("TestTable");
      var oData = {
        WaferCollection: [
          {
            Option : OptionValue,
            Batch: QuantityValue,
            Quantity: PinValue,
          }
        ]
      };;

      var testmodel = new JSONModel();
      testmodel .setData(oData);

      testmodel .getProperty("/collection").push(data);
      testmodel .refresh(true);
      this.pressDialog.close(); // close dialog 

但这并没有按预期添加

plunker 链接

但是这里的功能没有按预期工作，当我们添加或编辑时它没有正确添加

But the functionality here is not working as expected , it is not adding correctly when we add or edit

有没有关于如何将数据绑定到表格的指导链接，我已经看到很多关于项目而不是行的例子

Are there any guiding links on how to bind the data to table, I have been seeing a lot of examples on items but not rows

感谢上述问题的任何帮助，并会从中学习，TIA

Any help is appreciated for the above Q and would learn from it , TIA

推荐答案

在打开对话框之前，在您的集合中创建一个新条目，并将对话框字段绑定到它.然后，您就不需要一一获取输入值或手动更改集合.

Before opening the dialog, create a new entry in your collection, and bind the dialog fields to it. Then, you don't need to get the input values one by one or manually change the collection.

要创建新条目，请将其添加到您打开对话框的控制器代码部分:

To create the new entry, add this to the part of your controller code where you open the dialog:

this.getView().addDependent(this.pressDialog)
var oNewItem = this.getView().getModel().createEntry("/Collection")
this.pressDialog.setBindingContext(oNewItem)
                .open()

有关 ODataModel#createEntry() 和 Element#addDependent().

接下来，绑定对话框内三个控件的selectedKey属性，如下所示:selectedKey="{Option}".

Next, bind the selectedKey properties of the three controls inside the dialog, like so: selectedKey="{Option}".

有关更完整的示例，请参阅 UI5 上的 OpenSAP 课程 (尤其是 norelcises.pdf"pdfofolcises>代码段).

For a more complete example, see Week 4 / Unit 1 of the OpenSAP course on UI5 (especially the pdf with code snippets).

这篇关于如何将数据添加到 xml 视图中的表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！