SAP UI5 - Json数据绑定

上次尝试了UI5的View和controller，今天准备学习下UI5的数据绑定。

先尝试Json模式

首先在Controller.js中定义一个json数据源，并且绑定到数据Model上

代码如下：

    onInit: function() {
        var oModel = new sap.ui.model.json.JSONModel();
        var data = {
                firstName: "John",
                lastName: "Doe",
                birthday: {day:01,month:05,year:1982},
                address:[{city:"Heidelberg"}],
                enabled: true
            };
        oModel.setData(data);
        sap.ui.getCore().setModel(oModel);
    },

运行时内存中应该就会有这个数据模型了，下一步是在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方法的代码如下：

    createContent : function(oController) {
        
        var oTextField1 = new sap.ui.commons.TextField("T1", 
                {
                value: "{/firstName}"
                });
        var oTextField2 = new sap.ui.commons.TextField("T2", 
                {
                value: "{/lastName}"
                });
        var oTextField3 = new sap.ui.commons.TextField("T3", 
                {
                value: "{/birthday/year}"
                });
        var oTextField4 = new sap.ui.commons.TextField("T4", 
                {
                value: "{/address}"
                });
        
        var oFormContainer = new sap.ui.layout.form.FormContainer("F1C1",
                {
                title: "Personnel data",
                formElements: [
                               new sap.ui.layout.form.FormElement(
                                    {
                                    label: new sap.ui.commons.Label(
                                           {text:"Name",   
                                           }),
                                    fields: [oTextField1,
                                             oTextField2,
                                             oTextField3,
                                             oTextField4,]       
                                       })],
                });
                
    var oLayout = new sap.ui.layout.form.GridLayout();
    
    var oForm = new sap.ui.layout.form.Form("F1", 
            {
            title: "FORM",
            layout: oLayout,
            formContainers:[
                            oFormContainer
                            ]
        
            });    
    return oForm;
    }

在定义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中

sap.ui.jsview("ui5_view.MyView", {

    getControllerName : function() {
        return "ui5_view.MyView";
    },

    createContent : function(oController) {
        var oColumn1 = new sap.ui.table.Column('C1',
            {
            label:
                new sap.ui.commons.Label({
                    text: "FirstName"
                }),
            template:
                new sap.ui.commons.TextField().bindProperty("value","firstName"),                
            });
        
        var oColumn2 = new sap.ui.table.Column('C2',
            {
            label: "LastName",
            template:
                new sap.ui.commons.TextField().bindProperty("value","lastName"),                                    
                });        
        
        var oTable = new sap.ui.table.Table('TB1', 
                {            
                });
        oTable.addColumn(oColumn1);
        oTable.addColumn(oColumn2);
        var oModel = new sap.ui.model.json.JSONModel();
        var data = [
                {
                firstName: "John",
                lastName: "Doe",
                },
                
                {
                firstName: "Tom",
                lastName: "Jerry",    
                }];
        
        oModel.setData(data);
        oTable.setModel(oModel);
        oTable.bindRows("/");
        return oTable;
    }    
    }
    );

效果如下：