如何在 xml 视图中将数据添加到表行

Question

我的表格如下：

要添加的表的 XML 视图：

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

为了将数据添加到行中，我正在使用带有表单的对话框，并且我将这些值设置为：

从对话框中获取值：

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

每次在对话框中单击“确定”时，我都会尝试添加这些值（添加到行）

我在 ok 函数中尝试如下（我创建的部分函数如下）：

    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 link

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

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

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

Answer 1

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

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

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

有关ODataModel#createEntry() 和Element#addDependent() 的更多详细信息，请参阅 UI5 文档。

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

如需更完整的示例，请参阅OpenSAP course on UI5（尤其是pdf with code snippets）的第 4 周/第 1 单元。