javascript - SAPPUI5 get selected item from table - Stack Overflow

admin 管理员组

文章数量: 1086019

I have build a table in SAPUI5, in my table I have one input field and have two buttons. I have attached a image of my table:

Users are able to edit and change quantity value of product items. Once an user clicks on the tick button, it will get the quantity value and update the odata service in the backend. My problem now is I cant get the Quantity value that I entered when I click on the tick button.

The following is my code:

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

Any solutions how to get my quantity value?

I have build a table in SAPUI5, in my table I have one input field and have two buttons. I have attached a image of my table:

Users are able to edit and change quantity value of product items. Once an user clicks on the tick button, it will get the quantity value and update the odata service in the backend. My problem now is I cant get the Quantity value that I entered when I click on the tick button.

The following is my code:

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

Any solutions how to get my quantity value?

• javascript
• sapui5
• dom-events

Share Improve this question Follow edited Dec 29, 2020 at 13:02 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 19, 2018 at 2:51 Chan Yoong HonChan Yoong Hon 1,82277 gold badges3737 silver badges7373 bronze badges 1

• 1 If the model is two way binding then you can get binding context of the row. Get the oEvent.getParent() if it will return the row context then you can get the binding context of the row and get the binding data using oEvent.getParent().getBindingContext().getObject(). Note: first check oEvent.getParent() return the table row object. – Inizio Commented Sep 19, 2018 at 5:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Ok, I see what you are going for here, but if you want it to fit the fiori guidelines here is what you need to do:

• add to your table mode="SingleSelect":

   <Table id="idProductsTable" mode="SingleSelect" inset="false" 
          items="{path:'orderModel>/TXN_ORDDTLs'}">
  

• remove the buttons from your table

• recreate the buttons inside a table toolbar

• change your method to this:

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

Result: you have a table with radio buttons. With those you can select a row and edit/delete via your buttons in the tables toolbar.

I advice you to check the Fiori designguidelines before creating apps and if you are unsure of how to achieve the wanted oute check the samples at: https://sapui5.hana.ondemand./1.54.8/#/controls

本文标签： javascriptSAPPUI5 get selected item from tableStack Overflow