UI5_CRUD 3 UI方法实现

Display 方法：

首先获取选中行的context，并将其map到items对象中，然后分别获取Grid各个组件，将其设为不可编辑，并通过setValue方法设置值。

Update方法：

添加mode全局变量并将其设为update，与前面Display方法类似，Grid各个组件除了empId外都设为可编辑。

点击save按钮调用onSave方法，首先获取Grid各个组件的值，调用OData.request方法，第一个参数传入header信息，第二个参数为执行成功后调用的函数，第三个参数为调用过程中有error是调用的函数。在第二个参数中，传入OData.request方法函数，此时通过前面一次调用获取的X-CSRF-Token，作为参数传入header，该调用成功后，创建Dialog显示成功信息并刷新model。

Create与Delete方法

与Update方法类似，创建Create与Delete的实现方法，详细代码如下

sap.ui.controller("tablebinding.view1", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf tablebinding.view1
*/
    onInit: function() {
//      var oModel = new sap.ui.model.odata.ODataModel("proxy/sap/opu/odata/sap/ZLL_DEMO_SRV/");
        var oModel = new sap.ui.model.odata.v2.ODataModel("proxy/sap/opu/odata/sap/ZLL_DEMO_SRV/", { 
            json     : true,
            user     : "LZHANG",
            password : "Password2!"
        });
        this.getView().setModel(oModel,"empModel");
        var oGrid = this.getView().byId("GridId");
        oGrid.setVisible(false);
    },

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf tablebinding.view1
*/
//  onBeforeRendering: function() {
//
//  },

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf tablebinding.view1
*/
//  onAfterRendering: function() {
//
//  },

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf tablebinding.view1
*/
//  onExit: function() {
//
//  }
    
    onDisplay: function(){

        var oTable = this.getView().byId("idEmployeeTable");
        var contexts = oTable.getSelectedContexts();
        var items = contexts.map(function(c){
            return c.getObject();
        });
        
        if(contexts.length==0){
            alert("please select a raw")
        }else{
            var oGrid = this.getView().byId("GridId");
            oGrid.setVisible(true);
            var oSave = this.getView().byId("saveBtnID");
            oSave.setVisible(false);
            
            var oId = this.getView().byId("empId");
            oId.setEditable(false);
            oId.setValue(items[0].Empno);
            var oId = this.getView().byId("fnameId");
            oId.setEditable(false);
            oId.setValue(items[0].Fname);
            var oId = this.getView().byId("lnameId");
            oId.setEditable(false);
            oId.setValue(items[0].Lname);
            var oId = this.getView().byId("addrsId");
            oId.setEditable(false);
            oId.setValue(items[0].Addrs);
            var oId = this.getView().byId("desgnId");
            oId.setEditable(false);
            oId.setValue(items[0].Desgn);
            
        }
        

        
    },
    mode: 0,
    onUpdate: function(){
        var oTable = this.getView().byId("idEmployeeTable");
        var contexts = oTable.getSelectedContexts();

        
        if(contexts.length==0){
            alert("please select a raw")
        }else{
            var oGrid = this.getView().byId("GridId");
            oGrid.setVisible(true);
            var oSave = this.getView().byId("saveBtnID");
            oSave.setVisible(true);
            var items = contexts.map(function(c){
                return c.getObject();
            });
            
            var oId = this.getView().byId("empId");
            oId.setEditable(false);
            oId.setValue(items[0].Empno);
            var oId = this.getView().byId("fnameId");
            oId.setEditable(true);
            oId.setValue(items[0].Fname);
            var oId = this.getView().byId("lnameId");
            oId.setEditable(true);
            oId.setValue(items[0].Lname);
            var oId = this.getView().byId("addrsId");
            oId.setEditable(true);
            oId.setValue(items[0].Addrs);
            var oId = this.getView().byId("desgnId");
            oId.setEditable(true);
            oId.setValue(items[0].Desgn);
            
            this.mode="update";
            
        }
    },
    onCreate: function(){
        
            var oGrid = this.getView().byId("GridId");
            oGrid.setVisible(true);
            var oSave = this.getView().byId("saveBtnID");
            oSave.setVisible(true);

            var oId = this.getView().byId("empId");
            oId.setEditable(true);
            oId.setValue("");
            var oId = this.getView().byId("fnameId");
            oId.setEditable(true);
            oId.setValue("");
            var oId = this.getView().byId("lnameId");
            oId.setEditable(true);
            oId.setValue("");
            var oId = this.getView().byId("addrsId");
            oId.setEditable(true);
            oId.setValue("");
            var oId = this.getView().byId("desgnId");
            oId.setEditable(true);
            oId.setValue("");
            
            this.mode="create";
            
        
    },
    deleteId: 0,
    onDelete: function(){
        var oGrid = this.getView().byId("GridId");
        oGrid.setVisible(false);
        var oTable = this.getView().byId("idEmployeeTable");
        var contexts = oTable.getSelectedContexts();

        
        if(contexts.length==0){
            alert("please select a raw")
        }else{
            
            var items = contexts.map(function(c){
                return c.getObject();
            });
            
            deleteId= items[0].Empno
            
            this.mode="delete";
            this.onSave();
            
        }
    },
    onSave: function(){
        view = this.getView();
        var oTable = this.getView().byId("idEmployeeTable");
        if(this.mode =="update"){
            var oId   = this.getView().byId("empId").getValue();
            var fname = this.getView().byId("fnameId").getValue();
            var lname = this.getView().byId("lnameId").getValue();
            var addrs = this.getView().byId("addrsId").getValue();
            var desgn = this.getView().byId("desgnId").getValue();
            
            OData.request({
                requestUri: "proxy/sap/opu/odata/sap/ZLL_DEMO_SRV/",
                method: "GET",
                headers: {
                    "X-Requested-With": "XMLHttpRequest",
                    "Content-Type": "application/atom+xml",
                    "DataServiceVersion": "2.0",
                    "X-CSRF-Token": "fetch"
                }
            },function(data,response){
//              header_xcsrf_token = response.headers['X-CSRF-Token'],
                var header_xcsrf_token = response.headers['x-csrf-token'];
                OData.request({
                    requestUri: "proxy/sap/opu/odata/sap/ZLL_DEMO_SRV/DemoSet('" + oId + "')",
                    method: "PUT",
                    headers: {
                        "X-Requested-With": "XMLHttpRequest",
                        "Content-Type": "application/atom+xml",
                        "DataServiceVersion": "2.0",
                        "Accept": "application/atom+xml, application/atomsvc+xml, application/xml",
                        "X-CSRF-Token": header_xcsrf_token
                    },
                    data:{
                        Empno: oId,
                        Fname: fname,
                        Lname: lname,
                        Addrs: addrs,
                        Desgn: desgn
                    }
                },function(data, response){
                    var oSubDialog = new sap.ui.commons.Dialog({
                        title: "Updated",
                        content: [new sap.ui.commons.Label({text:"Data updated successfully"})]
                    });
                    oTable.setBusy(true);
                    oSubDialog.open();
                    oSubDialog.addButton(new sap.ui.commons.Button({
                        text: "OK",
                        press: function(){
                            oSubDialog.close();
                            oTable.setBusy(false);
                        }
                    
                    }));
                    view.getModel("empModel").refresh();
                    view.byId("GridId").setVisible(false);
                    
                    
                },function(error){
                    alert("Update Error")
                })
            },function(error){
                var request= error.request;
                var response = error.response;
                alert("Error in Get --Request"+request+"Response"+response);
            });
            
        }else if(this.mode=="create"){
            var oId   = this.getView().byId("empId").getValue();
            var fname = this.getView().byId("fnameId").getValue();
            var lname = this.getView().byId("lnameId").getValue();
            var addrs = this.getView().byId("addrsId").getValue();
            var desgn = this.getView().byId("desgnId").getValue();
            
            OData.request({
                requestUri: "proxy/sap/opu/odata/sap/ZLL_DEMO_SRV/",
                method: "GET",
                headers: {
                    "X-Requested-With": "XMLHttpRequest",
                    "Content-Type": "application/atom+xml",
                    "DataServiceVersion": "2.0",
                    "X-CSRF-Token": "fetch"
                }
            },function(data,response){
//              header_xcsrf_token = response.headers['X-CSRF-Token'],
                var header_xcsrf_token = response.headers['x-csrf-token'];
                OData.request({
                    requestUri: "proxy/sap/opu/odata/sap/ZLL_DEMO_SRV/DemoSet",
                    method: "POST",
                    headers: {
                        "X-Requested-With": "XMLHttpRequest",
                        "Content-Type": "application/atom+xml",
                        "DataServiceVersion": "2.0",
                        "Accept": "application/atom+xml, application/atomsvc+xml, application/xml",
                        "X-CSRF-Token": header_xcsrf_token
                    },
                    data:{
                        Empno: oId,
                        Fname: fname,
                        Lname: lname,
                        Addrs: addrs,
                        Desgn: desgn
                    }
                },function(data, response){
                    var oSubDialog = new sap.ui.commons.Dialog({
                        title: "Created",
                        content: [new sap.ui.commons.Label({text:"Data created successfully"})]
                    });
                    oTable.setBusy(true);
                    oSubDialog.open();
                    oSubDialog.addButton(new sap.ui.commons.Button({
                        text: "OK",
                        press: function(){
                            oSubDialog.close();
                            oTable.setBusy(false);
                        }
                    
                    }));
                    view.getModel("empModel").refresh();
                    view.byId("GridId").setVisible(false);
                    
                    
                },function(error){
                    alert("Create Error")
                })
            },function(error){
                var request= error.request;
                var response = error.response;
                alert("Error in Get --Request"+request+"Response"+response);
            });
        }else if(this.mode=="delete"){
            
            OData.request({
                requestUri: "proxy/sap/opu/odata/sap/ZLL_DEMO_SRV/",
                method: "GET",
                headers: {
                    "X-Requested-With": "XMLHttpRequest",
                    "Content-Type": "application/atom+xml",
                    "DataServiceVersion": "2.0",
                    "X-CSRF-Token": "fetch"
                }
            },function(data,response){
//              header_xcsrf_token = response.headers['X-CSRF-Token'],
                var header_xcsrf_token = response.headers['x-csrf-token'];
                OData.request({
                    requestUri: "proxy/sap/opu/odata/sap/ZLL_DEMO_SRV/DemoSet('" + deleteId + "')",
                    method: "DELETE",
                    headers: {
                        "X-Requested-With": "XMLHttpRequest",
                        "Content-Type": "application/atom+xml",
                        "DataServiceVersion": "2.0",
                        "Accept": "application/atom+xml, application/atomsvc+xml, application/xml",
                        "X-CSRF-Token": header_xcsrf_token
                    },
                    data:{
                        Empno: oId,
                        Fname: fname,
                        Lname: lname,
                        Addrs: addrs,
                        Desgn: desgn
                    }
                },function(data, response){
                    var oSubDialog = new sap.ui.commons.Dialog({
                        title: "Deleted",
                        content: [new sap.ui.commons.Label({text:"Data deleted successfully"})]
                    });
                    oTable.setBusy(true);
                    oSubDialog.open();
                    oSubDialog.addButton(new sap.ui.commons.Button({
                        text: "OK",
                        press: function(){
                            oSubDialog.close();
                            oTable.setBusy(false);
                        }
                    
                    }));
                    view.getModel("empModel").refresh();
                    view.byId("GridId").setVisible(false);
                    
                    
                },function(error){
                    alert("Delete Error")
                })
            },function(error){
                var request= error.request;
                var response = error.response;
                alert("Error in Get --Request"+request+"Response"+response);
            });
        }
    }

});