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文件中是如何实现的吧。
$().ready(function(){
$("#grid").jqGrid({
url:'queryAllBrand.action',
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了许多的文章,仍然找不到相应的说明或者解决办法。