Display 方法：
首先獲取選中行的context茂装，并將其map到items對(duì)象中其馏，然后分別獲取Grid各個(gè)組件剧蹂，將其設(shè)為不可編輯，并通過(guò)setValue方法設(shè)置值。
Update方法：
添加mode全局變量并將其設(shè)為update重归，與前面Display方法類(lèi)似米愿，Grid各個(gè)組件除了empId外都設(shè)為可編輯。
點(diǎn)擊save按鈕調(diào)用onSave方法鼻吮，首先獲取Grid各個(gè)組件的值育苟，調(diào)用OData.request方法，第一個(gè)參數(shù)傳入header信息椎木，第二個(gè)參數(shù)為執(zhí)行成功后調(diào)用的函數(shù)违柏，第三個(gè)參數(shù)為調(diào)用過(guò)程中有error是調(diào)用的函數(shù)。在第二個(gè)參數(shù)中香椎，傳入OData.request方法函數(shù)漱竖，此時(shí)通過(guò)前面一次調(diào)用獲取的X-CSRF-Token，作為參數(shù)傳入header畜伐，該調(diào)用成功后馍惹，創(chuàng)建Dialog顯示成功信息并刷新model。
Create與Delete方法
與Update方法類(lèi)似玛界，創(chuàng)建Create與Delete的實(shí)現(xiàn)方法万矾，詳細(xì)代碼如下
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);
});
}
}
});
