SAP UI5 - Json数据绑定
上次尝试了UI5的View和controller,今天准备学习下UI5的数据绑定。
先尝试Json模式
首先在Controller.js中定义一个json数据源,并且绑定到数据Model上
代码如下:
1 onInit: function() { 2 var oModel = new sap.ui.model.json.JSONModel(); 3 var data = { 4 firstName: "John", 5 lastName: "Doe", 6 birthday: {day:01,month:05,year:1982}, 7 address:[{city:"Heidelberg"}], 8 enabled: true 9 }; 10 oModel.setData(data); 11 sap.ui.getCore().setModel(oModel); 12 },
运行时内存中应该就会有这个数据模型了,下一步是在View中使用这些数据
首先为了美观,这次的View中添加了一个Form,form中有若干field,包含结构如下:
先简写如下:
sap.ui.layout.form.Form->Form
sap.ui.layout.form.FormContainer->FormContainer
sap.ui.layout.form.FormElement->FormElement
sap.ui.commons.TextField->TextField
Form
FormContainer1
FormElement1
TextField1
TextField2
TextField3
FormElement2 '
....
FormContainer2
.......
现在Form构建好了,View.js中createContent方法的代码如下:
1 createContent : function(oController) { 2 3 var oTextField1 = new sap.ui.commons.TextField("T1", 4 { 5 value: "{/firstName}" 6 }); 7 var oTextField2 = new sap.ui.commons.TextField("T2", 8 { 9 value: "{/lastName}" 10 }); 11 var oTextField3 = new sap.ui.commons.TextField("T3", 12 { 13 value: "{/birthday/year}" 14 }); 15 var oTextField4 = new sap.ui.commons.TextField("T4", 16 { 17 value: "{/address}" 18 }); 19 20 var oFormContainer = new sap.ui.layout.form.FormContainer("F1C1", 21 { 22 title: "Personnel data", 23 formElements: [ 24 new sap.ui.layout.form.FormElement( 25 { 26 label: new sap.ui.commons.Label( 27 {text:"Name", 28 }), 29 fields: [oTextField1, 30 oTextField2, 31 oTextField3, 32 oTextField4,] 33 })], 34 }); 35 36 var oLayout = new sap.ui.layout.form.GridLayout(); 37 38 var oForm = new sap.ui.layout.form.Form("F1", 39 { 40 title: "FORM", 41 layout: oLayout, 42 formContainers:[ 43 oFormContainer 44 ] 45 46 }); 47 return oForm; 48 }
在定义TextField时,通过两种方法可以绑定数据
第一种就是代码中的 value: "{/firstName}" 这样的,绑定的数据就是Json数据源中的firstName对应的值
第二种方法是通过oTextField.bindProprety('value','/firstName') 效果是一样的。
如果Json数据有多层格式,就按照/birthday/year的方式访问,相当于Jsondata[birthday][year].
如果Json数据是一个数组,有多条记录,并且想要绑定到一个Table中,可以采用如下方式:
View中Table的构建如下:
Table:
Column1
TextField:
value: "{/firstName}"
Column2
value: "{/lastName}"
然后在绑定Model的时候
var oModel = new sap.ui.model.json.JSONModel(); oModel.setData(tableData); oTable.setModel(oModel); oTable.bindRows("/");
这样每一条记录都会被绑定到Table对应的一行,并且按照TextField绑定的column名字匹配
附上完整的Table绑定Json数据的代码:
这边我把数据源一并写在了View.js中
1 sap.ui.jsview("ui5_view.MyView", { 2 3 getControllerName : function() { 4 return "ui5_view.MyView"; 5 }, 6 7 createContent : function(oController) { 8 var oColumn1 = new sap.ui.table.Column('C1', 9 { 10 label: 11 new sap.ui.commons.Label({ 12 text: "FirstName" 13 }), 14 template: 15 new sap.ui.commons.TextField().bindProperty("value","firstName"), 16 }); 17 18 var oColumn2 = new sap.ui.table.Column('C2', 19 { 20 label: "LastName", 21 template: 22 new sap.ui.commons.TextField().bindProperty("value","lastName"), 23 }); 24 25 var oTable = new sap.ui.table.Table('TB1', 26 { 27 }); 28 oTable.addColumn(oColumn1); 29 oTable.addColumn(oColumn2); 30 var oModel = new sap.ui.model.json.JSONModel(); 31 var data = [ 32 { 33 firstName: "John", 34 lastName: "Doe", 35 }, 36 37 { 38 firstName: "Tom", 39 lastName: "Jerry", 40 }]; 41 42 oModel.setData(data); 43 oTable.setModel(oModel); 44 oTable.bindRows("/"); 45 return oTable; 46 } 47 } 48 );
效果如下:
文章来自于网络,如果侵犯了您的权益,请联系站长删除!