SAPUI5 从表中获取选定项目答案

【问题标题】：SAPPUI5 get selected item from tableSAPUI5 从表中获取选定项目
【发布时间】：2018-09-19 02:51:45
【问题描述】：

我在 SAPUI5 中建立了一个表格，在我的表格中我有一个输入字段和两个按钮。我附上了一张我的桌子的图片：

用户可以编辑和更改产品项目的数量值。一旦用户点击勾选按钮，它将获取数量值并更新后端的odata服务。我现在的问题是当我点击勾选按钮时，我无法获得我输入的数量值。

以下是我的代码：

view.xml

<Table id="idProductsTable" inset="false" items="{path:'orderModel>/TXN_ORDDTLs'}">
            <columns>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Name"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Quantity"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="UOM"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Price"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Subtotal"/>
                </Column>
                <Column id="buttonColumn1" width="5%" minScreenWidth="Tablet" demandPopin="true" popinDisplay="WithoutHeader" hAlign="Right" class="sapMTableContentMargin">
                    <header>
                        <Label id="cartItemEdit" text="Cancel" visible="{= ${device>/system/phone}}"/>
                    </header>
                </Column>
                <Column id="buttonColumn2" width="5%" minScreenWidth="Tablet" demandPopin="true" popinDisplay="WithoutHeader" hAlign="Right" class="sapMTableContentMargin">
                    <header>
                        <Label id="cartItemDelete" text="Cancel" visible="{= ${device>/system/phone}}"/>
                    </header>
                </Column>
            </columns>
            <items>
                <ColumnListItem vAlign="Middle">
                    <cells>
                        <Text text="{orderModel>PRODUCT_NO}"/>
                        <Input id="itemPrdQty" value="{orderModel>PRD_QTY}" width="70px"/>
                        <Text text="{orderModel>UOM_CD}"/>
                        <Text text="{orderModel>PRICE}"/>
                        <Text text="{orderModel>GROSS_AMT}"/>
                        <!-- Add Button -->
                        <Button id="editCartButton" tooltip="Edit Item" icon="sap-icon://accept" press="editCartItemPressed" type="Transparent"/>
                        <Button id="deleteCartButton" tooltip="Delete Item" icon="sap-icon://decline" press="deleteCartItemPressed" type="Transparent"/>
                    </cells>
                </ColumnListItem>
            </items>
        </Table>

Controller.js

        editCartItemPressed: function(oEvent){
            var NoOfItems = this.getView().byId("itemPrdQty").getValue();
            console.log(NoOfItems);
            
    
        },

任何解决方案如何获得我的数量值？

【问题讨论】：

如果模型是双向绑定，那么你可以得到行的绑定上下文。获取oEvent.getParent()，如果它将返回行上下文，那么您可以获取行的绑定上下文并使用oEvent.getParent().getBindingContext().getObject() 获取绑定数据。注意：首先检查oEvent.getParent()返回表格行对象。

标签： javascript sapui5 dom-events

【解决方案1】：

好的，我明白你的目的，但如果你想让它符合 fiori 指南，你需要做的是：

添加到您的表格模式=“SingleSelect”：
```
<Table id="idProductsTable" mode="SingleSelect" inset="false" items=" 
```
{path:'orderModel>/TXN_ORDDTLs'}">
从表格中移除按钮
在表格工具栏中重新创建按钮

改变你的方法：

editCartItemPressed: function(){
    var oItem= this.getView().byId("idProductsTable").getSelectedItem();
    var oEntry = oItem.getBindingContext("yourODataModel").getObject();
    console.log(oEntry.Quantity); //your quantity you want to update

    //yourODataModel.update(oItem.getBindingContextPath(), oEntry, {
    //    success: function(){}, // your success handler
    //    error:   function(){} // your error handler
    //});


},

结果：你有一个带有单选按钮的表格。有了这些，您可以通过表格工具栏中的按钮选择一行并编辑/删除。

我建议您在创建应用程序之前查看 fiori 设计指南，如果您不确定如何实现预期结果，请查看以下示例：https://sapui5.hana.ondemand.com/1.54.8/#/controls

【讨论】：