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);
});
}
}
});
