jqGrid的使⽤⽅法（编辑，删除，更新，新增）
jqGrid的使⽤⽅法(编辑，删除，更新，新增)
使⽤jqGrid修改数据
jqGrid可以有三种⽅式，让我们来修改显⽰在jqGrid中的数据。这三种⽅式分别是：
Cell Editing——只允许修改某⼀个单元格内容.（所有图⽚均来⾃jqGrid的wiki或者jqGrid的Demo截图）
Inline Editing——允许在jqGrid中直接修改某⼀⾏的数据
Form Editing——弹出⼀个新的编辑窗⼝进⾏编辑和新增
暂时先不管这三种⽅式，我们来看看如何让⼀个jqGrid的数据能够进⾏编辑呢？
其实很简单，就是在jqGrid的colModel属性中，设置⼏个属性：
editable
可选值是true或者false，默认是false。⽤来说明这个列的数据是否可编辑。特别要注意的是，jqGrid的
隐藏字段就算设置了这个属性为true，⼀样不能被编辑。在Cell Editing 以及Inline Editing模式下，只能通过把这些字段设置为可见来修改。在Form Editing模式下，可以通过editoptions参数来设置是否可以修改隐藏列。
edittype
可选的值是'text', 'textarea', 'select', 'checkbox', 'password', 'button', 'image', 'file'以及'custom'。默认值是text。
根据名字就可以看出来，这个属性是设置编辑框的HTML样式的。⽐如，设置为text值，并且可以在editoptions中设置size以及maxlength等属性。这样⽣成的HTML样式有点类似<input type="text" size="10" maxlength="15"/>这样。
其中有⼏个要注意：
设置checkbox的时候，需要在editoptions中指定value值，第⼀个值应该是checked的时候的值。⽐如editoptions:{value:"Yes:No"}会设定这个checkbox编辑框，选中的时候，值是Yes，没选中的时候值是No。建议最好都设定⼀下这个值。
设置select的时候，editoptions中需要设定select下拉框的值。
⼀种⽅式是⽤字符串设置editoptions的value属性，像这样editoption: { value: “FE:FedEx; IN:InTime; TN:TNT” }，这就为下拉框设置了三个可选值。注意，冒号前⾯的代表的是值，冒号后⾯代表的是显⽰值。
第⼆种⽅式是⽤对象来设置editoptions的value属性，这个时候，value值要⽤{}包括起来，像这样： editoptions:{value:{1:'One',2:'Two'}}。
第三种⽅式，是为editoptions设置dataUrl参数。意思就是select的值，是通过⼀个URL来获取的，⽐如⼀个Ajax请求的返回值。特别需要注意的是，在这种情况下，URL的返回值必须是包括select以及option这些HTML标签的。就像这样：<select><option value="1">One</option><option value="2">Two</option></select>.这种情况下，还可以在editoptions中设置是否允许多选，size等等。
设置image的时候，editoptions的src属性⽤来指定图⽚的地址。
custom类型就是通过⼀个函数来指定需要编辑的元素，并返回需要提交的值。
函数的定义在editoptions中说明，分别是custom_element⽤来指定哪⼀个函数⽤来创建编辑框，注意这⾥函数必须返回⼀个新的DOM元素，函数的参数⼀个是值Value，另外⼀个是colModel的editoptions值。
另外⼀个是custom_value，这个函数⽤来在编辑完成之后返回本编辑框的值，这个函数的参数是元素对象。⼤概的调⽤格式如下：
<script>
//创建⼀个input输⼊框
function myelem (value, options) {
jquery在一个元素后追加标签var el = ateElement("input");
el.value = value;
return el;
}
//获取值
function myvalue(elem) {
return $(elem).val();
}
jQuery("#grid_id").jqGrid({
...
colModel: [
...
{name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} },
...
]
...
});
</script>
editoptions
除了上⾯介绍的editoptions选项外，我们还可以设置defaultValue等等，更复杂的东西，⽐如dataEvents就不介绍了。
editrules
editrules是⽤来设置⼀些可⽤于可编辑列的colModel的额外属性的。⼤多数的时候是⽤来在提交到服务器之前验证⽤户的输⼊合法性的。⽐如editrules:{edithidden:true, }。
可选的属性包括：
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”]这样。
⾃定义验证的例⼦：
<script>
function mypricecheck(value, colname) {
if (value < 0 && value >20)
return [false,"Please enter value between 0 and 20"];
else
return [true,""];
}
jQuery("#grid_id").jqGrid({
...
colModel: [
...
{name:'price', ..., editrules:{custom:true, custom_}, editable:true },
.
..
]
...
});
</script> < function mypricecheck(value, colname) { if (value < 0 && value >20) return [false,"Please enter value between 0 and 20"]; else return [true,""]; }
jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', ..., editrules:{custom:true, custom_}, editable:true }, ... ] ... }); // >
formoptions（只在Form Editing⽅式下有效），他的主要作⽤是⽤来重新排序Form中的编辑元素，同时可以在编辑元素前或者编辑元素后增加⼀些信息（⽐如，⼀些提⽰信息，或者⼀个红⾊的*表⽰必须要填写等等）。
可选的属性如下：
elmprefix：字符串值，如果设置了，则会在编辑框之后出现⼀些内容(可能是HTML的内容)
elmsuffix：字符串值，如果设置了，则会在编辑框之前出现⼀些内容(可能是HTML的内容)
label：字符串值，如果设置了，则这个值会替换掉colNames中的值出现作为该编辑框的标签显⽰
rowpos：数字值，决定元素⾏在Form中的位置（相对于⽂本标签again with the text-label）
colpos：数字值，决定元素列在Form中的位置（相对于标签again with the label）
两个编辑框可以有相同的rowpos值，但是colpos值不同，这会把这两个编辑框放到Form的同⼀⾏中。
特别注意：如果设置了rowpos以及colpos的值，强烈推荐为所有的其他编辑元素都设置这些值。
----本⽂只是doc⽂档的解释，没有太多⾃⼰的东西。接下来我会做⼀个Form Editing的例⼦，⾁戏即将登场......
我们讲了⼀下jqGrid编辑的基础知识。下⾯我们基于Form Editing的编辑模式详细举例讲解⼀下。
Form Editing编辑模式主要的⽅法有⼏个，分别是editGridRow——⽤来修改记录，editGridRow函数，传递⼀个'new'的参数就表⽰新增记录；viewGridRow查看记录详情；delGridRow删除记录。
这⼏个⽅法的调⽤⽅式，和jqGrid的其它函数调⽤⽅式⼀样。（可以采⽤new API的调⽤⽅式，把函数
名称作为第⼀个参数来调⽤）需要注意的地⽅是，各个函数调⽤内容的options参数有⼀些差异，具体可以参考⽂档；另外就是，各个函数提交到服务端的数据和格式有所差异。这⾥以editGridRow为例来说明⼀下。
editGridRow的调⽤⽅式如下：
jQuery("#grid_id").editGridRow( rowid, properties );
或者是如下的⽅式
jQuery("#grid_id").jqGrid('editGridRow', rowid, properties );
其中rowid指定是编辑那⼀⾏，properties是⼀个包含各种属性以及事件的数组。（具体的属性和事件，请参考⽂档，这⾥就不翻译了。）调⽤之后，提交到服务器上去的数据都是⼀些什么数据呢？
提交的数据主要包括：
1.各个编辑"字段：值"的对。这个不好理解，其实的意思就是，相当于⽤POST的⽅式提交⼀些数据，数据的名称就是我们定义在colModel中的name属性，值就是我们在弹出窗⼝录⼊的值。（当然，这就要求我们在Server端的Action定义这些变量并封装到Pojo对象中去进⾏处理。）
2.包含⼀个"id:rowid"的值，⽤来表明是哪⼀个id关键字的记录被修改(新增记录的时候，id=_empty)；
3.包含⼀个"oper:edit"的值，⽤来指⽰是编辑还是新增记录(新增记录的时候，oper=add)
4.其它⾼级情况，⽐如使⽤了editData对象或者实现了onclickSubmit事件之后的处理。⽐较复杂，暂时没有详细研究这种情况下提交数据的格式。
如果是要新增记录，那么editGridRow的调⽤⽅式如下：
jQuery("#grid_id").editGridRow( "new", properties );
好了，接下来我们来看看我们在jsp⽂件中是如何实现的吧。
⾸先说明⼀下，这个例⼦和前⼀篇⽂章中的例⼦有很多变化。主要包括，在jqGrid中新增了⼀个列，⽤来作为操作列，同时增加了两个操作：编辑和删除。增加了⼀个导出查询结果为csv的按钮（⾃定义按钮），但是具体的后台服务器功能没有实现；把查询和新增功能单独作为⼀个按钮显⽰在jqGrid的后⾯。具体的差异，⼤家可以看看本⼈另外⼀篇⽂章《》中的例⼦。
$().ready(function(){
$("#grid").jqGrid({
,
datatype: "json",
mtype: 'POST',
colNames:['操作','品牌ID','品牌代码', '品牌名称', '是否可⽤','最后修改时间'],
colModel:[
{name:'act',index:'act',width:110,search:false,sortable:false,editable:false},
{name:'brandId',index:'brandId', width:90,editable:false},
{name:'code',index:'code', width:110,
editable:true,
edittype:'text',
editoptions:{size:10,maxlength:15},
editrules:{required:true},
formoptions:{elmprefix:'(*)'}
},
{name:'brandName',index:'brandName', width:100,
editable:true,
edittype:'text',
editoptions:{size:10,maxlength:15},
editrules:{required:true},
formoptions:{elmprefix:'(*)'}
},
{name:'status',index:'status', width:80,
editable:true,
edittype:'checkbox',
editoptions:{value:"1:0"},
editrules:{required:true},
formoptions:{elmprefix:'(*)'}
},
{name:'lastModifiedDatetime',index:'lastModifiedDatetime', width:100,editable:false}
],
rowNum:3
在实际的修改、新增保存中，会看到如下的错误提⽰：error Status:"OK".Error code: 900。实际上，修改(新增)的记录已经正确的保存到数据库中了。见下图：这是为什么呢？⼀直为这个问题头痛苦恼了好⼏天。仔细阅读了jqGrid wiki上的⽂档，也google了许多的⽂章，仍然不到相应的说明或者解决办
法。
后来研究了⼀下jqGrid的源代码。src/grid.formedit.js⽂件，发现其中有⼀个函数postIt，其中有如下的代码：
if(Status != "success") {
ret[0] = false;
if ($.isFunction(TextFormat)) {
ret[1] = TextFormat(data);
} else {
ret[1] = Status + " Status: '" + data.statusText + "'. Error code: " + data.status;
}
} else {
// data is posted successful
// execute aftersubmit with the returned data from server
if( $.isFunction(rp_ge.afterSubmit) ) {
ret = rp_ge.afterSubmit(data,postdata);
}
}
看来问题是在这个地⽅。由此猜想jqGrid的增删改操作是要求服务器返回内容的。
我猜测，jqGrid要求服务器返回包含成功与否的status内容。所以我修改了⼀下Action的类⽅法的返回值：如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。