jqGrid中的编辑

在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":"[email protected]",  "amount":1123423,   "gender":"1", "type":"0"},  
3. {"id":2,  "name":"name2",  "date":"2012-08-18 11:11:11", "price":1452.2,    "email":"[email protected]",  "amount":12212321,  "gender":"1", "type":"1"},  
4. {"id":3,  "name":"name3",  "date":"2012-08-18 11:11:11", "price":125454,    "email":"[email protected]",  "amount":2345234,   "gender":"0", "type":"0"},  
5. {"id":4,  "name":"name4",  "date":"2012-08-18 11:11:11", "price":23232.4,   "email":"[email protected]",      "amount":2345234,   "gender":"1", "type":"2"},  
6. {"id":5,  "name":"name5",  "date":"2012-08-18 11:11:11", "price":473454,    "email":"[email protected]",  "amount":5234534,   "gender":"0", "type":"0"},  
7. {"id":6,  "name":"name6",  "date":"2012-08-18 11:11:11", "price":34563,     "email":"[email protected]",  "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

更多信息见 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing

 

 

4、主要API

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing