寫道


cell editing: 編輯一個Grid的cell
inline editing: 編輯同一row的幾個cell
form editing: 創建一個form表單在外部更新grid內容

 在jqGrid中主要通過以下colModel參數來實現：

  • editable： true|false 表示該cell是否支持可編輯，默認為false。對hidden屬性默認不支持編輯，當然也可以通過其他方式來實現
  • edittype：簡單説就是當前cell在編輯狀態下是按照哪種input類型，因為在編輯下會轉化為<input type="text/password..."../>,於是支持的輸入類型當然包括：'text', 'textarea', 'select', 'checkbox', 'password', 'button', 'image', 'file'還有custom，默認為text
  • editoptions：一個數組用來設置edittype屬性，通過該屬性來限定input中各屬性的值，比如：

easyui datagrid jquery設置單元格的值 沒有編輯器_#jquery

1. edittype="text", editoptions: {size:10, maxlength: 15}  
2. edittype="textarea", editoptions: {rows:"2",cols:"10"}  
3. edittype="textarea",editoptions: { value:"Yes:No" }  
4. edittype="select",editoptions: { value: “FE:FedEx; IN:InTime; TN:TNT” }//對於多選的支持：editoptions: {multiple:true, size:3... }  
5. //當edittype為custom時需要有兩個函數，一個用來創建該元素(custom_element另外一個對其賦值(custom_value)，如  
6. edittype:'custom', editoptions:{  
7. function(value, options){  
8.     },   
9. function(elem, operation, value){  
10.     }  
11. }

  •  editrules:用來校驗用户輸入值，比如我們常見的長度、必填、email、數字等校驗。如editrules:{maxValue:20, required:true, number:true}，提供了一系列常見的驗證格式，具體見http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules。這裏舉例來描述一個custom實例

easyui datagrid jquery設置單元格的值 沒有編輯器_#jquery

1. editrules:{custom:true, custom_func: function(value, colname){  
2. if (value < 0 || value >20) {  
3. return [false,"Please enter value between 0 and 20"];  
4. else{  
5. return [true,""];  
6.     }  
7. }}


  •  formoptions:用於上面的form editing，用來對form表單排序或在表單前面或後面加上一個元素。如對必填在前面加上*號等。如果要使用該元素，推薦對所有editable的元素都加上該屬性


1、cell editing


是對一個grid的row中一個單獨的cell進行編輯，支持ajax和本地的方式修改，同時對cell的編輯支持事件主要是[Enter]已經上下左右等鼠標事件來觸發，同時還有對編輯事件本身，如beforeEditCell、afterEditCell等。



在cell編輯中，主要通過jqGrid的options參數來設置：


1. {  
2. 'cellEdit' : true,  
3. 'cellsubmit' : 'remote|clientArray',  
4. 'cellurl' : '/url/to/handling/the/changed/cell/value'  
5. }


 其實這個cellEdit限制挺多，如果cellEdit=true即支持celEdit時jqGrid的onSelectRow事件都不能使用。就我自己來説沒有在實際業務常見中使用，這裏不再多説，具體見:



  http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing
 
 
 
 
 
 
 2、inlineEditing
 

  當用户在對grid的一行做選擇(如grid的onSelectRow、ondblClickRow事件觸發時)，當前grid進入可編輯狀態。以下是一個例子，對一些常用的可編輯項做了説明

 
 
 
1. var datas = [  
2. {"id":1,  "name":"name1",  "date":"2012-08-18 11:11:11", "price":123.1,     "email":"abc@163.com",  "amount":1123423,   "gender":"1", "type":"0"},  
3. {"id":2,  "name":"name2",  "date":"2012-08-18 11:11:11", "price":1452.2,    "email":"abc@163.com",  "amount":12212321,  "gender":"1", "type":"1"},  
4. {"id":3,  "name":"name3",  "date":"2012-08-18 11:11:11", "price":125454,    "email":"abc@163.com",  "amount":2345234,   "gender":"0", "type":"0"},  
5. {"id":4,  "name":"name4",  "date":"2012-08-18 11:11:11", "price":23232.4,   "email":"abc@163.com",      "amount":2345234,   "gender":"1", "type":"2"},  
6. {"id":5,  "name":"name5",  "date":"2012-08-18 11:11:11", "price":473454,    "email":"abc@163.com",  "amount":5234534,   "gender":"0", "type":"0"},  
7. {"id":6,  "name":"name6",  "date":"2012-08-18 11:11:11", "price":34563,     "email":"abc@163.com",  "amount":2345342,   "gender":"1", "type":"1"}  
8.         ];  
 

   

 
 
 
1. colModel:[  
2. 'id',     index:'id'},  
3. 'name',   index:'name',   editable:true, edittype:"text", editrules:{required: true},editoptions:{size:16, maxlength: 15}},  
4. 'date',   index:'date',   editable:true, edittype:"text", editrules:{date: true},editoptions:{ size: 10, maxlengh: 10,  
5. function(element) {  
6. 'yy-mm-dd'});  
7.                   }  
8.        }},  
9. 'price',  index:'price',  editable:true, edittype:"text", editrules:{required: true, number: true}},  
10. 'email',  index:'email',  editable:true, edittype:"text", editrules:{required: true, email: true}},  
11. 'amount', index:'amount', editable:true, edittype:"text", editrules:{required: true, number: true, maxValue:20}},       
12. 'gender', index:'gender', editable:true, edittype:"checkbox", editrules:{value:"Yes:No"}},  
13. 'type',   index:'type',   editable:true, edittype:'select', formatter:'select', editoptions:{value:"0:現貨;1:可配貨;2:無貨"}}  
14.     ],

以上是編輯的設置，主要包含了幾種可編輯的方式：

1、
 edittype="text",並設置必填、size和maxlength的限制、email、number、maxValue等校驗，在編輯時將對數據的有效性進行校驗
 
 2、
 edittype="text",對datepicker控件的支持，需要引入jquery-ui和國際化jquery.ui.datepicker-zh-CN.js的支持
 
 3、
 edittype="checkbox",對cell中的值進行checkbox轉換，並設置默認值的設置
 
 4、
 edittype="select",配合formatter的使用，設置了可選擇的下拉列表editoptions:{value:"0:現貨;1:可配貨;2:無貨"}}


下面在對gridRow的雙擊事件觸發編輯： 

1. ondblClickRow: function(id){  
2. if(id && id !== lastsel){  
3. var rowData = $("#jqGridId").jqGrid("getRowData", id);   
4. '#jqGridId').jqGrid('restoreRow',lastsel);  
5. '#jqGridId').jqGrid('editRow',id,{  
6. true,        //這裏按[enter]保存  
7. "jq/save.action",  
8. "POST",  
9. true,  
10.             extraparam: {  
11. "ware.id": rowData.id,  
12. "ware.warename": $("#"+id+"_name").val(),  
13. "ware.createDate": $("#"+id+"_date").val(),  
14. "ware.number": $("#"+id+"_amount").val(),  
15. "ware.valid": $("#"+id+"_type").val()  
16.             },  
17. function(rowid){  
18.                 console.log(rowid);  
19.             },  
20. function(response){  
21. "save success");  
22. return true;  
23.             },  
24. function(rowid, res){  
25.                 console.log(rowid);  
26.                 console.log(res);  
27.             }  
28.         });  
29.     }  
30. }



easyui datagrid jquery設置單元格的值 沒有編輯器_php_03


這裏用了innerEdit的editRow方法：

1. jQuery("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);  
 
  
1. jQuery("#grid_id").jqGrid('editRow',rowid,  {  
2. "keys" : false,  
3. "oneditfunc" : null,  
4. "successfunc" : null,  
5. "url" : null,  
6. "extraparam" : {},  
7. "aftersavefunc" : null,  
8. "errorfunc": null,  
9. "afterrestorefunc" : null,  
10. "restoreAfterError" : true,  
11. "mtype" : "POST"  
12. });

這裏對以上各個參數的意思做一個簡單的描述


  • rowid:當前編輯的rowid
  • succesfunc:如果定義了改函數，將會在請求成功調用後立即返回，該函數簽名包括server返回的數據。同時該函數需要返回tue/false
  • url: 如果定義了改值，將會覆蓋jqGrid中的editurl(當然，如果沒有url和editurl是會報錯的)。如果url="clientArray" 那麼就不會向server端觸發請求，可在後期手動調用修改
  • extraparam:請求參數列表{name:value, name:value}，將會append到requestData中向server端發送
  • aftersavefunc:如果定義了改函數，將會在數據向server端保存後立即調用，該函數接受rowid、response參數。同樣如果是上面的url="clientArray"該函數同樣執行
  • errorfunc:如果定義了改函數，將會在數據向server端保存後調用，該函數接受rowid、response參數
  • afterrestorefunc:如果定義了改函數，將在restoreRow後調用，接受rowid作為參數 

在 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing 中對於innerEdit主要有以下幾個方法：


寫道

editRow //在用户出發edit事件時調用該方法 
 
 saveRow //用户不需要調用該方法，在edit時會自動調用  
 restoreRow //回滾當前editRow  
 addRow //新增row  
 inlineNav
 

   下面這個例子是對jqGrid新增一行並可編輯狀態：

 
  
1. $("#addBtn").bind("click", function() {  
2. "#jqGridId").jqGrid('addRow',{  
3. "new_row",  
4.             initdata : {},  
5. "first",  
6. true,  
7. true,  
8.             addRowParams : {extraparam:{  
9.                   
10.             }}  
11.         });  
12. //當前新增id進入可編輯狀態  
13. '#jqGridId').jqGrid('editRow','new_row',{  
14. true,        //這裏按[enter]保存  
15. "jq/save.action",  
16. "POST",  
17. true,  
18.             extraparam: {  
19.             },  
20. function(rowid){  
21.                 console.log(rowid);  
22.             },  
23. function(response){  
24. "save success");  
25. return true;  
26.             },  
27. function(rowid, res){  
28.                 console.log(rowid);  
29.                 console.log(res);  
30.             }  
31.         });  
32.       
33. });

 

3、FormEditing支持彈出窗的形式對grid的數據查看、新增、編輯、刪除和查找，主要包含以下幾個方法：
查找：searchGrid
編輯：editGridRow：
調用方式如下：

easyui datagrid jquery設置單元格的值 沒有編輯器_#jquery

1. $("#grid_id").jqGrid('editGridRow', rowid, {properties} );  
 

  新增：editGridRow
 
   
1. $("#grid_id")..jqGrid('editGridRow', "new", properties );

查看：viewGridRow
刪除： delGridRow