поле ввода не обновляется, когда установлен флажок sapiu5

Я создал таблицу в Web IDE с флажком и полем ввода, которое по умолчанию показывает «100%», когда флажок установлен. Это работало до того, как я добавил данные из json, но теперь, когда я сделал элемент списка столбцов шаблоном, принимающим данные из json в некоторых столбцах, поле ввода не заполняется при выборе флажка.

Что отображается сейчас: последний результат

Что я хочу показать: введите здесь описание изображения

Если я использую что-то вроде окна сообщения, оно выводит правильный вывод при выборе флажка.

sap.m.MessageBox.alert("100%")
sap.m.MessageBox.alert("0%")

Я привязал событие к флажку под select. Это код для флажка.

    percentCheck: function(oEvent) {
        //inputText is the input Text box  
        var inputText = this.getView().byId("inputPercent");
        var isSelected = oEvent.getParameter("selected");

        if (isSelected) {
            inputText.setValue("100%");
        } else {
            inputText.setValue("");
        }
    }

checkbox sapui5 sap-web-ide web-ide
person eDz    schedule 16.01.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я думаю, что лучше обновить модель, а не менять значение элемента управления напрямую. вот пример http://jsbin.com/yuhipop/edit?html,js,output

<!DOCTYPE HTML>
<html>

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">
    <title>MVC</title>
    <script id="sap-ui-bootstrap" type="text/javascript"
            src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m,sap.ui.table"
            data-sap-ui-xx-bindingSyntax="complex">
    </script>

    <script id="oView" type="sapui5/xmlview">
    <mvc:View height="100%" controllerName="myView.Template"
      xmlns="sap.m" 
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc"
      xmlns:table="sap.ui.table">

    <table:Table id="Table1" rows="{/}"
      selectionMode="None">
      <table:columns>
        <table:Column>
        <Label text="Employee name"/>
        <table:template>
          <Text text="{name}" ></Text>
        </table:template>
        </table:Column>
        <table:Column>
          <Label text="Company"/>
          <table:template>
            <Text text="{company}"></Text>
          </table:template>
        </table:Column>
        <table:Column>
        <Label text="Checkbox"/>
        <table:template>
          <CheckBox selected="{selected}" 
            select="checkBoxChanged"/>
        </table:template>
        </table:Column>
        <table:Column>
        <Label text="Bonus"/>
        <table:template>
          <Input value="{bonus}" 
            change="inputChanged"/>
        </table:template>
        </table:Column>
      </table:columns>

    </table:Table>
  </mvc:View>
    </script>

  </head>

  <body class="sapUiBody" role="application">
    <div id="content"></div>
  </body>

</html>

Посмотреть

sap.ui.define([
  'jquery.sap.global',
  'sap/ui/core/mvc/Controller',
  'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, JSONModel) {
  "use strict";

  var oController = Controller.extend("myView.Template", {
    onInit: function(oEvent) {
      this.getView().setModel(new JSONModel([
        { name : "John", "company": "apple inc", selected: true, bonus: "100%" },
        { name : "Mary", "company": "abc inc", selected: true, bonus: "100%" },
      ]));
    },
    inputChanged: function(oEvent) {
      var cxt = oEvent.getSource().getBindingContext();
      var obj = cxt.getObject();
      obj.selected = (obj.bonus === '100%');
    },
    checkBoxChanged: function(oEvent) {
      var cxt = oEvent.getSource().getBindingContext();
      var obj = cxt.getObject();
      if (obj.selected) {
        obj.bonus = '100%';
      }
    },
  });

  return oController;
});

var oView = sap.ui.xmlview({
  viewContent: jQuery('#oView').html()
});

oView.placeAt('content');
person D. Seah    schedule 17.01.2018
comment
Я пытался реализовать это в своем приложении, но поле ввода не обновляется при снятии флажка, мне нужно обновить поле ввода при установке и снятии флажка. - person eDz; 17.01.2018
comment
Спасибо, я смог использовать часть кода, который у вас был, чтобы получить то, что мне было нужно. пришлось обновить модель - person eDz; 17.01.2018

arrow_upward
0
arrow_downward

Это то, что я смог использовать, чтобы заставить его работать с данными

Вид:

<CheckBox id="checkEstimate" select="estimatePercentageSelect"/>
<Input value="{percent}" width="100%" id="inputPercent"/>

Контроллер:

estimatePercentageSelect: function(oEvent) {
//get parameter if checkbox is selected
var isSelected = oEvent.getParameter("selected");
//get source to bind
var cxt = oEvent.getSource().getBindingContext();

//if checkbox is selected, set property "percent" to 100%
if (isSelected) {
  cxt.getModel().setProperty("percent","100%",cxt);
  }
  else{
    cxt.getModel().setProperty("percent",null,cxt);
  }
}
person eDz    schedule 17.01.2018