代码之家 › 专栏 › 技术社区 › Chan Yoong Hon

Sappui5从表中获取所选项目

sapui5 javascript-events

1

Chan Yoong Hon · 技术社区 · 6 年前

我在sapui5中构建了一个表,在我的表中我有一个输入字段和两个按钮。我已附上我的表的图像:

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

以下是我的代码

视图.xml

<table id=“idProductStable”inset=“false”items=“path:'orderModel>/txn_orddtls'”>
列;
<column minscreenwidth=“tablet”demandpopin=“true”>
<text text=“name”/>
lt;/列& gt;
<column minscreenwidth=“tablet”demandpopin=“true”>
<text text=“数量”/>
lt;/列& gt;
<column minscreenwidth=“tablet”demandpopin=“true”>
<text text=“UOM”/>
lt;/列& gt;
<column minscreenwidth=“tablet”demandpopin=“true”>
<text text=“price”/>
lt;/列& gt;
<column minscreenwidth=“tablet”demandpopin=“true”>
<text text=“subtotal”/>
lt;/列& gt;
<column id=“buttoncolumn1”width=“5%”minscreenwidth=“tablet”demandpopin=“true”popinsplay=“withoutheader”halign=“right”class=“sapmtableContentMargin”>
和标题;
<label id=“cartemedit”text=“cancel”visible=“=$设备>/system/phone”/>
L&/Health≫
lt;/列& gt;
<column id=“buttoncolumn2”width=“5%”minscreenwidth=“tablet”demandpopin=“true”popinsplay=“withoutheader”halign=“right”class=“sapmtableContentMargin”>
和标题;
<label id=“cartemdelete”text=“cancel”visible=“=$设备>/system/phone”/>
L&/Health≫
lt;/列& gt;
</columns>
项目;
<columnlistitem valign=“middle”>
细胞;
<text text=“orderModel>产品”/>
<input id=“itemprdqty”value=“orderModel>prd”width=“70px”/>
<text text=“orderModel>UOM U CD”/>
<text text=“订单型号>价格”/>
<text text=“订单型号>总金额”/>
&!--添加按钮-->
<button id=“editcartbutton”tooltip=“edit item”icon=“sap icon://accept”press=“editcartitempressed”type=“transparent”/>gt;
<button id=“DeleteCartButton”tooltip=“删除项目”icon=“sap icon://decline”press=“DeleteCartItemPressed”type=“transparent”/>gt;
&细胞/细胞;
</columnlistitem>
&项目/项目;
&表;
< /代码> 

控制器.js

editcartitempressed:function(oEvent){
var noofitems=this.getview().byid(“itemprdqty”).getvalue();
控制台日志(noofitems);


}
< /代码> 

有什么解决办法可以得到我的数量值吗?


用户可以编辑和更改产品项目的数量值。一旦用户单击勾选按钮,它将获取数量值并更新后端的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>


控制器JS

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


        },


有什么解决办法可以得到我的数量值吗?

1 回复 | 直到 6 年前

1

Erch 6 年前

好的,我知道你要做什么,但是如果你想让它符合FIORI的指导方针,这里是你需要做的:

添加到表格模式中:“singleselect”:
```
<Table id="idProductsTable" mode="SingleSelect" inset="false" items=" 
```
路径:'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