SAPPUI5 получить выбранный элемент из таблицы

Question

Я построил таблицу в 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);


        },

Какие-нибудь решения, как получить мое количество?

Answer 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