一、效果圖
原始樣式
可編輯樣式
二、 操作：
第一步，直接點選編輯按鈕時，彈出提示，請選擇要編輯的行
第二步，選擇要編輯的行，選中後點選編輯按鈕，出現可編輯
第三步，輸入修改的值後，點選儲存按鈕
三、代碼塊：
1、表格設定
$("#jqGrid").jqGrid({
url: baseURL + 'loan/productAnalysisDto/list',
datatype: "json",
colModel: [
{ label: '産品id',index:'id', name: 'productId', width: 75,editable: false },
{ label: '産品名稱', name: 'productName', width: 75},
{ label: 'UV', name: 'uv', width: 75 },
{ label: '注冊數', name: 'registerNum', width: 75,
editable: true,
edittype: "text",
editrules: { required: true,number: true } },
{ label: '注冊率', name: 'registerRate', width: 75 },
{ label: 'CPA', name: 'cpa', width: 75,
editable: true,
edittype: "text",
editrules: { required: true,number: true }
},
{ label: '收益', name: 'earnings', width: 75 },
{ label: 'UV價值', name: 'valuation', width: 75 }
],
viewrecords: true,
height: 385,
rowNum: 10,
rowList : [10,30,50],
rownumbers: false,
rownumWidth: 25,
autowidth:true,
multiselect: true,
multiboxonly:true,
pager: "#jqGridPager",
jsonReader : {
root: "page.list",
page: "page.currPage",
total: "page.totalPage",
records: "page.totalCount"
},
prmNames : {
page:"page",
rows:"limit",
order: "order"
},
gridComplete:function(){
//隐藏grid底部滾動條
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
}
});
// editable: true 設定成可編輯
// edittype: "text"，設計編輯類型
// editrules: 可編輯列額外的屬性
補充：
editrules 大多數的時候是用來在送出到伺服器之前驗證使用者的輸入合法性的
editrules可選的屬性包括：
edithidden：隻在Form Editing模式下有效，設定為true，就可以讓隐藏字段也可以修改。
required：設定編輯的時候是否可以為空（是否是必須的）。
number：設定為true，如果輸入值不是數字或者為空，則會報錯。
integer：
minValue：
maxValue：
email：
url：檢查是不是合法的URL位址。
date：
time：
custom：設定為true，則會通過一個自定義的js函數來驗證。函數定義在custom_func中。
custom_func:傳遞給函數的值一個是需要驗證value，另一個是定義在colModel中的name屬性值。函數必須傳回一個數組，一個是驗證的結果，true或者false，另外一個是驗證錯誤時候的提示字元串。形如[false,”Please enter valid value”]這樣。
2、公共的選擇行事件
//選擇一條記錄
function getSelectedRow() {
var grid = $("#jqGrid");
var rowKey = grid.getGridParam("selrow");
if(!rowKey){
alert("請選擇一條記錄");
return ;
}
var selectedIDs = grid.getGridParam("selarrrow");
if(selectedIDs.length > 1){
alert("隻能選擇一條記錄");
return ;
}
return selectedIDs[0];
}
3、編輯的點選事件
//編輯的點選事件
edit:function () {
var ids = getSelectedRow();
if(ids == null){
return ;
}
$("#jqGrid").jqGrid('editRow', ids, { keys: true, focusField: 1 }); //設定成可編輯
},
4、儲存的點選事件
//儲存的點選函數
save:function () {
var ids = getSelectedRow();
if(ids == null){
return ;
}
var rowData = $("#jqGrid").jqGrid('getRowData',ids);
console.info(rowData);
var productId = rowData.productId;
var registerNum =$("#" + ids + "_registerNum").val();
var cpa = $("#" + ids + "_cpa").val();
var date = $("#date").val();
console.info(productId+" "+registerNum+" "+cpa);
var parameter = {
url : baseURL+"loan/productAnalysis/update", //代替jqgrid中的editurl
mtype : "POST",
extraparam : { // 額外 送出到背景的資料
"productId" : productId,
"registerNum" : registerNum,
"cpa":cpa,
"inputDate":date,
"flag":vm.q.flag
},
successfunc : function(r) { //在成功請求後觸發;事件參數為XHR對象，需要傳回true/false;
// alert(r.flag);//接收背景傳回的資料
if (r.flag == false) {
/* alert("編輯失敗");*/
return false; //傳回false會使用修改前的資料填充,同時關閉編輯模式。
} else {
/* alert("編輯成功");*/
return true; //傳回true會使用修改後的資料填充目前行,同時關閉編輯模式。
}
}//end successfunc
}//end paramenter
$("#jqGrid").saveRow(ids, parameter); //儲存資料，送出資料到背景進行資料互動
var page = $("#jqGrid").jqGrid('getGridParam','page'); //擷取目前資料表格頁碼
vm.reload(page) //重新整理表格
},