在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内容
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中各属性的值,比如:
edittype="text", editoptions: {size:10, maxlength: 15} edittype="textarea", editoptions: {rows:"2",cols:"10"} edittype="textarea",editoptions: { value:"Yes:No" } edittype="select",editoptions: { value: “FE:FedEx; IN:InTime; TN:TNT” }//对于多选的支持:editoptions: {multiple:true, size:3... } //当edittype为custom时需要有两个函数,一个用来创建该元素(custom_element另外一个对其赋值(custom_value),如 edittype:'custom', editoptions:{ custom_element: function(value, options){ }, custom_value:function(elem, operation, value){ } }
- editrules:用来校验用户输入值,比如我们常见的长度、必填、email、数字等校验。如editrules:{maxValue:20, required:true, number:true},提供了一系列常见的验证格式,具体见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules。这里举例来描述一个custom实例
editrules:{custom:true, custom_func: function(value, colname){ if (value < 0 || value >20) { return [false,"Please enter value between 0 and 20"]; }else{ return [true,""]; } }}
- formoptions:用于上面的form editing,用来对form表单排序或在表单前面或后面加上一个元素。如对必填在前面加上*号等。如果要使用该元素,推荐对所有editable的元素都加上该属性
1、cell editing
是对一个grid的row中一个单独的cell进行编辑,支持ajax和本地的方式修改,同时对cell的编辑支持事件主要是[Enter]已经上下左右等鼠标事件来触发,同时还有对编辑事件本身,如beforeEditCell、afterEditCell等。
在cell编辑中,主要通过jqGrid的options参数来设置:
{ 'cellEdit' : true, 'cellsubmit' : 'remote|clientArray', 'cellurl' : '/url/to/handling/the/changed/cell/value' }
其实这个cellEdit限制挺多,如果cellEdit=true即支持celEdit时jqGrid的onSelectRow事件都不能使用。就我自己来说没有在实际业务常见中使用,这里不再多说,具体见:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing
2、inlineEditing
当用户在对grid的一行做选择(如grid的onSelectRow、ondblClickRow事件触发时),当前grid进入可编辑状态。以下是一个例子,对一些常用的可编辑项做了说明
var datas = [ {"id":1, "name":"name1", "date":"2012-08-18 11:11:11", "price":123.1, "email":"abc@163.com", "amount":1123423, "gender":"1", "type":"0"}, {"id":2, "name":"name2", "date":"2012-08-18 11:11:11", "price":1452.2, "email":"abc@163.com", "amount":12212321, "gender":"1", "type":"1"}, {"id":3, "name":"name3", "date":"2012-08-18 11:11:11", "price":125454, "email":"abc@163.com", "amount":2345234, "gender":"0", "type":"0"}, {"id":4, "name":"name4", "date":"2012-08-18 11:11:11", "price":23232.4, "email":"abc@163.com", "amount":2345234, "gender":"1", "type":"2"}, {"id":5, "name":"name5", "date":"2012-08-18 11:11:11", "price":473454, "email":"abc@163.com", "amount":5234534, "gender":"0", "type":"0"}, {"id":6, "name":"name6", "date":"2012-08-18 11:11:11", "price":34563, "email":"abc@163.com", "amount":2345342, "gender":"1", "type":"1"} ];
colModel:[ {name:'id', index:'id'}, {name:'name', index:'name', editable:true, edittype:"text", editrules:{required: true},editoptions:{size:16, maxlength: 15}}, {name:'date', index:'date', editable:true, edittype:"text", editrules:{date: true},editoptions:{ size: 10, maxlengh: 10, dataInit: function(element) { $(element).datepicker({dateFormat: 'yy-mm-dd'}); } }}, {name:'price', index:'price', editable:true, edittype:"text", editrules:{required: true, number: true}}, {name:'email', index:'email', editable:true, edittype:"text", editrules:{required: true, email: true}}, {name:'amount', index:'amount', editable:true, edittype:"text", editrules:{required: true, number: true, maxValue:20}}, {name:'gender', index:'gender', editable:true, edittype:"checkbox", editrules:{value:"Yes:No"}}, {name:'type', index:'type', editable:true, edittype:'select', formatter:'select', editoptions:{value:"0:现货;1:可配货;2:无货"}} ],
以上是编辑的设置,主要包含了几种可编辑的方式:
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:无货"}}
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的双击事件触发编辑:
ondblClickRow: function(id){ if(id && id !== lastsel){ var rowData = $("#jqGridId").jqGrid("getRowData", id); $('#jqGridId').jqGrid('restoreRow',lastsel); $('#jqGridId').jqGrid('editRow',id,{ keys : true, //这里按[enter]保存 url: s2web.appURL + "jq/save.action", mtype : "POST", restoreAfterError: true, extraparam: { "ware.id": rowData.id, "ware.warename": $("#"+id+"_name").val(), "ware.createDate": $("#"+id+"_date").val(), "ware.number": $("#"+id+"_amount").val(), "ware.valid": $("#"+id+"_type").val() }, oneditfunc: function(rowid){ console.log(rowid); }, succesfunc: function(response){ alert("save success"); return true; }, errorfunc: function(rowid, res){ console.log(rowid); console.log(res); } }); } }以上是在双击grid的row时触发当前row为可编辑状态,在回车时调用editRow对当前编辑数据进行保存。展现的效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/bcfb1ce046405097a9b597aec34e3381.jpeg)
这里用了innerEdit的editRow方法:
jQuery("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);或者:
jQuery("#grid_id").jqGrid('editRow',rowid, { "keys" : false, "oneditfunc" : null, "successfunc" : null, "url" : null, "extraparam" : {}, "aftersavefunc" : null, "errorfunc": null, "afterrestorefunc" : null, "restoreAfterError" : true, "mtype" : "POST" });
这里对以上各个参数的意思做一个简单的描述
- 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
saveRow //用户不需要调用该方法,在edit时会自动调用
restoreRow //回滚当前editRow
addRow //新增row
inlineNav
下面这个例子是对jqGrid新增一行并可编辑状态:
$("#addBtn").bind("click", function() { $("#jqGridId").jqGrid('addRow',{ rowID : "new_row", initdata : {}, position :"first", useDefValues : true, useFormatter : true, addRowParams : {extraparam:{ }} }); //当前新增id进入可编辑状态 $('#jqGridId').jqGrid('editRow','new_row',{ keys : true, //这里按[enter]保存 url: s2web.appURL + "jq/save.action", mtype : "POST", restoreAfterError: true, extraparam: { }, oneditfunc: function(rowid){ console.log(rowid); }, succesfunc: function(response){ alert("save success"); return true; }, errorfunc: function(rowid, res){ console.log(rowid); console.log(res); } }); });
3、FormEditing
支持弹出窗的形式对grid的数据查看、新增、编辑、删除和查找,主要包含以下几个方法:
查找:searchGrid
编辑:editGridRow:
调用方式如下:
支持弹出窗的形式对grid的数据查看、新增、编辑、删除和查找,主要包含以下几个方法:
查找:searchGrid
编辑:editGridRow:
调用方式如下:
$("#grid_id").jqGrid('editGridRow', rowid, {properties} );
新增:editGridRow
$("#grid_id")..jqGrid('editGridRow', "new", properties );
查看:viewGridRow
删除: delGridRow
删除: delGridRow
4、主要API