如何使用对话框编辑行

问题描述 投票:1回答:1

我创建了一个具有5列的SAP UI5表,其中表的其中一列将具有带有编辑图标的按钮。我尝试过如下:

 <Table id="table2" visibleRowCount="5" rows="{
        path: '/ProductCollection',
        sorter: {path: 'serialId', descending: false}
      }">
        <columns>
          <Column width="50px">
            <m:Text text="S.No" />
            <template>
              <m:Text text="{serialId}" wrapping="false"  />
            </template>
          </Column>
          <Column width="200px">
            <m:Text text="EmployeeName" />
            <template>
              <m:Text text="{employeeName}" wrapping="false" />
            </template>
          </Column>
          <Column width="200px">
            <m:Text text="EmployeeId" />
            <template>
              <m:Text text="{employeeId}" wrapping="false" />
            </template>
          </Column>
          <Column width="200px">
            <m:Text text="Age" />
            <template>
              <m:Text text="{age}" wrapping="false" />
            </template>
          </Column>
          <Column width="200px">
                <m:Text text="Email" />
                <template>
                  <m:Text text="{email}" 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>
        </columns>
        <dragDropConfig>
            <dnd:DropInfo
                            groupName="moveToTable2"
                            targetAggregation="rows"
                            dropPosition="Between"
                            drop="onDropTable2" />
           <dnd:DragDropInfo
                            sourceAggregation="rows"
                            targetAggregation="rows"
                            dropPosition="Between"
                            dragStart="onDragStart"
                            drop="onDropTable2" />
        </dragDropConfig>
      </Table>

单击编辑按钮时,将打开一个对话框以及单击的行的数据。

我已经尝试使用以下功能编辑该行

我将打开一个包含当前值的对话框,以便在单击OK时进行更新。这是我的控制器:

editRow: function(oEvent) {
      var oControl = oEvent.getSource();
      var oItemPath = oControl.getBindingContext().getPath();
      var oObject = this.byId("table2").getModel() .getProperty(oItemPath);

      var editRecord = oEvent .getSource().getBindingContext() .getObject();
      var editRecordRank = editRecord.Rank;

      var oDialog1 = new Dialog({
        title: "Wafer",
        contentWidth: "40px",
        contentHeight: "300px",
        content: [
          new sap.m.Text({
            width: "100%",
            text: "EMPid"
          }),
          new sap.m.FlexBox({
            justifyContent: "Center",
            items: [
              new sap.m.Select("EmployeeEditId", {
                width: "60%",
                items: [
                  new sap.ui.core.Item("itemee11", { text: "33" }),
                  new sap.ui.core.Item("iteme12", {
                    text: "78"
                  }),
                  new sap.ui.core.Item("itemee13", {
                    text: "100"
                  }),
                  new sap.ui.core.Item("iteme14", {
                    text: "75"
                  }),
                  new sap.ui.core.Item("iteme15", {
                    text: "101"
                  })
                ]
              })
            ]
          }),
          new sap.m.Text({ width: "100%", text: "EMPname" }),
          new sap.m.FlexBox({
            justifyContent: "Center",
            items: [
              new sap.m.Select("EmployeeNameEditId", {
                width: "60%",
                items: [
                  new sap.ui.core.Item("iteme1111", {
                    text: "test1"
                  }),
                  new sap.ui.core.Item("iteme1234", {
                    text: "test2"
                  }),
                  new sap.ui.core.Item("iteme1312", {
                    text: "test3"
                  })
                ]
              })
            ]
          }),
          new sap.m.Text({ width: "100%", text: "age" }),
          new sap.m.FlexBox({
            justifyContent: "Center",
            items: [
              new sap.m.Select("AgeEditId", {
                width: "60%",
                items: [
                  new sap.ui.core.Item("iteme15211",  { text: "22" }),
                  new sap.ui.core.Item("iteme136454", { text: "23" }),
                  new sap.ui.core.Item("iteme213754", { text: "33" }),
                ]
              })
            ]
          }),
          new sap.m.Text({ width: "100%", text: "Email" }),
          new sap.m.FlexBox({
            justifyContent: "Center",
            items: [
              new sap.m.Select("EmailEditId", {
                width: "60%",
                items: [
                  new sap.ui.core.Item("iteme11411", { text: "[email protected]" }),
                  new sap.ui.core.Item("iteme34", { text: "[email protected]" }),
                  new sap.ui.core.Item("iteme314", { text: "[email protected]" })
                ]
              })
            ]
          })
        ],

        beginButton: new Button({
          type: ButtonType.Emphasized,
          text: "Update",
          press: function() {
            var otab = this.byId("table2");

            var rows = otab.getRows();
            var rowsLength  = otab.getBinding('rows').getLength();

            var tableArr = [];

            for ( var i = 0; i < rowsLength; i++ ) {

            tableArr.push({               
              empId : rows[i].getCells()[0].getText(),
              employeeName : rows[i].getCells()[1].getText(),
              age: rows[i].getCells()[2].getText(),
              email : rows[i].getCells()[3].getText(),               
            });

            }

            var employeeId= sap.ui.getCore().byId("empId ");
            var empnameId = sap.ui.getCore().byId("employeeName ");
            var ageId = sap.ui.getCore().byId("age");
            var emailId = sap.ui .getCore().byId("email");
            // data=oEvent.getSource
            var componentText =empId.mAssociations.selectedItem;
            var categoryText = empnameId.mAssociations.selectedItem;
            var quantityText = ageId.mAssociations.selectedItem;
            var mainCategoryText = emailId.mAssociations.selectedItem;

            var cValue = sap.ui.getCore().byId(componentText) .mProperties.text;
            var catValue = sap.ui.getCore().byId(categoryText).mProperties.text;
            var qValue = sap.ui.getCore().byId(quantityText).mProperties.text;
            var mValue = sap.ui.getCore().byId(mainCategoryText) .mProperties.text;


            tableArr.map(function(item) {
              if (item.empId==cValue){
              item.empnameId = catValue;
              item.ageId = qValue;
              item.emailId = mValue;
              }
              return item; });

            // var aContexts = sap.ui.getCore().byId("test");
            var oModel = new sap.ui.model.json.JSONModel();
            var oTable = this.byId("table2");
            oModel.setData({ modelData: tableArr });
            oTable.setModel(oModel);
            oTable.bindRows("/modelData");

            oDialog1.close();
          }.bind(this)
        }),

        endButton: new Button({
          text: "Close",
          press: function() {
            this.pressDialog.close();
          }.bind(this)
        })
      });
      oDialog1.open();
    },

任何指导性链接或解决方案将大有帮助,TIA

sapui5
1个回答
0
投票

缺少对话框的绑定。在该视图上将对话框添加为“从属”,以连接到该视图的模型生命周期。或尝试像这样绑定元素oDialog.bindElement(sPath)。

© www.soinside.com 2019 - 2024. All rights reserved.