碼上歡樂
相關內容    簡體    繁體

jqGrid中的編輯

本文轉載自   查看原文   2016-07-04 09:27   4200    jgrid

在jqGrid的官方文檔http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules中，對jqGrid的編輯總結了以下三種類型的編輯：

 寫道
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中各屬性的值，比如：
Js代碼   收藏代碼
  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.     custom_element: function(value, options){  
  8.     },   
  9.     custom_value: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實例
Js代碼   收藏代碼
  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參數來設置：
Js代碼   收藏代碼
  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進入可編輯狀態。以下是一個例子，對一些常用的可編輯項做了說明
Js代碼   收藏代碼
  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.         ];  
 
Js代碼   收藏代碼
  1. colModel:[  
  2.     {name:'id',     index:'id'},  
  3.     {name:'name',   index:'name',   editable:true, edittype:"text", editrules:{required: true},editoptions:{size:16, maxlength: 15}},  
  4.     {name:'date',   index:'date',   editable:true, edittype:"text", editrules:{date: true},editoptions:{ size: 10, maxlengh: 10,  
  5.                   dataInit: function(element) {  
  6.                     $(element).datepicker({dateFormat: 'yy-mm-dd'});  
  7.                   }  
  8.        }},  
  9.     {name:'price',  index:'price',  editable:true, edittype:"text", editrules:{required: true, number: true}},  
  10.     {name:'email',  index:'email',  editable:true, edittype:"text", editrules:{required: true, email: true}},  
  11.     {name:'amount', index:'amount', editable:true, edittype:"text", editrules:{required: true, number: true, maxValue:20}},       
  12.     {name:'gender', index:'gender', editable:true, edittype:"checkbox", editrules:{value:"Yes:No"}},  
  13.     {name:'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的雙擊事件觸發編輯： 
Js代碼   收藏代碼
  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.             keys : true,        //這里按[enter]保存  
  7.             url: s2web.appURL + "jq/save.action",  
  8.             mtype : "POST",  
  9.             restoreAfterError: 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.             oneditfunc: function(rowid){  
  18.                 console.log(rowid);  
  19.             },  
  20.             succesfunc: function(response){  
  21.                 alert("save success");  
  22.                 return true;  
  23.             },  
  24.             errorfunc: function(rowid, res){  
  25.                 console.log(rowid);  
  26.                 console.log(res);  
  27.             }  
  28.         });  
  29.     }  
  30. }  
 以上是在雙擊grid的row時觸發當前row為可編輯狀態，在回車時調用editRow對當前編輯數據進行保存。展現的效果如下：
這里用了innerEdit的editRow方法：
Js代碼   收藏代碼
  1. jQuery("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);  
 或者：
Js代碼   收藏代碼
  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新增一行並可編輯狀態：
Js代碼   收藏代碼
  1. $("#addBtn").bind("click", function() {  
  2.         $("#jqGridId").jqGrid('addRow',{  
  3.             rowID : "new_row",  
  4.             initdata : {},  
  5.             position :"first",  
  6.             useDefValues : true,  
  7.             useFormatter : true,  
  8.             addRowParams : {extraparam:{  
  9.                   
  10.             }}  
  11.         });  
  12.         //當前新增id進入可編輯狀態  
  13.         $('#jqGridId').jqGrid('editRow','new_row',{  
  14.             keys : true,        //這里按[enter]保存  
  15.             url: s2web.appURL + "jq/save.action",  
  16.             mtype : "POST",  
  17.             restoreAfterError: true,  
  18.             extraparam: {  
  19.             },  
  20.             oneditfunc: function(rowid){  
  21.                 console.log(rowid);  
  22.             },  
  23.             succesfunc: function(response){  
  24.                 alert("save success");  
  25.                 return true;  
  26.             },  
  27.             errorfunc: function(rowid, res){  
  28.                 console.log(rowid);  
  29.                 console.log(res);  
  30.             }  
  31.         });  
  32.       
  33. });   
 
3、FormEditing
支持彈出窗的形式對grid的數據查看、新增、編輯、刪除和查找，主要包含以下幾個方法：
查找：searchGrid
編輯：editGridRow：
調用方式如下：
Js代碼   收藏代碼
  1. $("#grid_id").jqGrid('editGridRow', rowid, {properties} );  
新增：editGridRow
Js代碼   收藏代碼
  1. $("#grid_id")..jqGrid('editGridRow', "new", properties );  
查看：viewGridRow
刪除： delGridRow
 
 
4、主要API
 [轉自]http://mj4d.iteye.com/blog/1633462


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 jqGrid中的formatter jqgrid 設置單元格編輯/不可編輯 Jqgrid中給表格添加url 從jqGrid中searchGrid引發的深思 jqgrid 中設置列不排序 jqGrid jqgrid 對編輯行填寫的內容做格式驗證 自定義jqGrid編輯功能，當行獲取焦點時編輯，失去焦點時保存 Jqgrid入門-使用模態對話框編輯表格數據(三) jqgrid 行編輯/單元格selsect 下拉框並運用select2
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM