选中复选框时输入框不更新sapui5
input box not updating when checkbox is selected sapiu5
我在 Web IDE 中创建了一个 table,它有一个复选框和输入框,当复选框被 select 时默认显示“100%”。在我从 json 添加数据之前它是有效的,但现在我将列列表项设为模板,从某些列的 json 接收数据,当 selecting 复选框。
现在显示的内容:
我想展示的内容:
如果我使用消息框之类的东西,它会在 select 选中复选框时正确输出。
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("");
}
}
我认为最好更新模型而不是直接更改控件的值。这是一个例子
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');
这就是我能够用来处理数据的方法
查看:
<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);
}
}
我在 Web IDE 中创建了一个 table,它有一个复选框和输入框,当复选框被 select 时默认显示“100%”。在我从 json 添加数据之前它是有效的,但现在我将列列表项设为模板,从某些列的 json 接收数据,当 selecting 复选框。
现在显示的内容:
我想展示的内容:
如果我使用消息框之类的东西,它会在 select 选中复选框时正确输出。
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("");
}
}
我认为最好更新模型而不是直接更改控件的值。这是一个例子 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');
这就是我能够用来处理数据的方法
查看:
<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);
}
}