jqGrid支持一个浮动的表单用于查看,添加,编辑,删除和查询表格数据,下面为添加记录的效果图
在你的项目中可以使用模态盒子和行编辑。其中,行编辑只能用于编辑已经存在的行,不能用于查询,删除,添加数据。实际应用中,不推荐同时使用这2中方法,因为选择同一行时这2者存在冲突(在这种情况下,当你选择一行来编辑,点击编辑模态盒子,你将得到模态盒子中的单元格ID,而不是单元格的内容。)
下面表格中列出的方法包含在navGrid (导航方法)中。
要使用这个模块,你需要在下载页面勾选Common, Form Editing , jqModal (可选), jqDnR插件,下载地址:http://www.trirand.com/blog/?page_id=6
开发者注意事项,grid.common.js, grid.formedit.js, jqModal.js 和jqDnR.js在src目录中
下面列出的表单编辑方法是jqGrid的一个子集。但是所有属性和事件不属于jqGrid配置,而是作为传递给方法的参数。
更多详情参考:jqGrid单字段查询andjqGrid高级查询
这个方法创建一个模态对话框表单用于编辑表格中的存在的行。这个方法使用到colModel中定义的通用编辑属性和jqGrid中的editurl 配置
调用方式
-收缩 JavaScript代码 jQuery( "#grid_id").editGridRow( rowid, properties );新API中调用方式
-收缩 JavaScript代码 jQuery( "#grid_id").jqGrid( 'editGridRow', rowid, properties );参数说明
grid_id:jqGrid的idrowid:要编辑的数据行idproperties:键值键值对对象,包含下面列出的任意属性和事件此方法使用的语言文件中定义的属性
-收缩 JavaScript代码 $.jgrid = { //... edit : { addCaption: "Add Record", editCaption: "Edit Record", bSubmit: "Submit", bCancel: "Cancel", bClose: "Close", saveData: "Data has been changed! Save changes?", bYes : "Yes", bNo : "No", bExit : "Cancel", //... }, //... } 这些默认选项可以在调用方法时重新配置被覆盖掉。通过方法传递参数时,例如,使用bSubmit : "Submit" 而不是 $.jgrid.edit.bSubmit :"Submi",效果图如下在编辑模式下,显示了导航按钮下有效。在上或者下一条数据加载后触发。
afterclickPgButtons : function(whichbutton, formid, rowid) {…}
参数说明 whichbutton :点击哪个对象 'prev' 或者 'next' formid : jQuery 包转好的对象,通过formid[0].id获取表单id值 (取名为formobject也许还好理解一些) rowid :加载的上/下一条数据的id
afterComplete当所有动作和事件执行完毕,数据行已经添加或者更新到grid后触发
afterComplete : function (response, postdata, formid) {…}
参数说明 response :服务器返回的数据(ajax对象,注意不是ajaxobj.responseText) postdata :提交到服务器的数据,JSON键值对对象 formid : jQuery 包转好的对象,通过formid[0].id获取表单id值
afterShowForm在表单显示后触发,有一个参数为formid,说明如上
afterShowForm : function (formid) {…}
afterSubmit提交数据从服务器返回后触发。主要用于显示服务器状态信息(例如,数据成功保存或者被服务器端取消保存的原因)
afterSubmit : function(response, postdata) { … return [success,message,new_id] },参数说明和afterComplete一样 此方法需要返回 [success, message, new_id] 格式的数据 success :为boolean值,如果为true处理继续进行(message会被忽略),如果为false,将会弹出一个对话框显示错误信息(message的值)并停止其他处理 message:错误信息 new_id :在添加模式时可用于设置新数据行的id,所以添加时服务器需要同时返回保存到数据库的行ID
beforeCheckValues在验证数据前触发(验证规则在colModel中editrules定义)
beforeCheckValues:function(posdata,formid,mode){}
参数说明 posdata :json键值对数据,键名称来源于colModel配置的name formid :jQuery 包转好的对象,通过formid[0].id获取表单id值 mode :当前的编辑模式,添加(add)或者编辑(edit)
事件需要返回json键值对对象,以便提交到服务器。
beforeInitData在初始化输入表单数据前触发。
beforeInitData : function(formid) {…},参数和上面的提到的一样
事件需要返回ture/false,返回false,取消动作不显示表单对话框
beforeShowForm在表单显示前触发。
beforeShowForm : function(formid) {…}
beforeSubmit在提交数据到服务器前触发
beforeSubmit : function(postdata, formid) { … return[success,message]; }
方法需要返回[success,message]格式的数组信息 success :boolean值,为true指示后续的操作继续,否则停止并显示错误信息(message)提示用户。 message :错误时显示的提示信息
onclickPgButtons仅在编辑模式下可用。点击上/下一条按钮,未离开当前显示的数据前触发,允许使用当前加载在表单中的内容(如保存)
onclickPgButtons : function (whichbutton, formid, rowid) {…}
whichbutton :点击哪个对象 'prev' 或者 'next' formid : jQuery 包转好的对象,通过formid[0].id获取表单id值 rowid :当前数据行id(非上/下一条数据的id)
onclickSubmit点击提交按钮,提交数据构造后触发
onclickSubmit : function(params, postdata) { … return {add_data} }
params:方法选择配置项目 postdata:被提交的数据
方法可以返回json键值对对象用于扩展postdata数据
onInitializeForm触发一次,为编辑或者添加模式创建数据时触发
onInitializeForm : function(formid) {…}
onClose表单对话框关闭前触发,可以返回true或者false。返回true或者未返回值都会关闭表单对话框,false则不关闭表单对话框。errorTextFormat用于ajax调用后错误发生时,更好的显示错误信息。
errorTextFormat:function(xhr)
需要返回显示给用户的信息(string类型)
serializeEditData如果设置了这个事件,在保存数据时将序列化传给ajax请求的数据。这个方法需要返回序列化后的内容。当自定义数据需要发送到服务器时可以使用此事件。例如,JSON格式的字符串,XML格式的字符串等等。此事件返回的数据将会提交到服务器。表单构造准许如下规则
colModel定义的隐藏字段包含在表单中,所在行被设置为隐藏(display:none )可编辑元素的id属性值来自colModel配置中的name属性值可编辑元素的name属性值来自colModel配置中的name属性值为了容易操作编辑表单中的元素,编辑元素所在行(TR)的id构造为“tr_” + name (来自colmodel中配置的name值). 示例 -收缩 HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <form ....> <table> <tr id='tr_myfield'> <td> Caption </td> <td>edited element named, in colModel, as "myfield" </td> </tr> ... </table> </form> 这样我们可以在beforeShowForm事件中通过某些条件实现表格行的显示和隐藏在编辑模式下提交到服务器的数据给json键值对对象({...})
所有输入元素(包括行被隐藏的)的键值对(name为输入元素的name值)附加id:rowid 键值对(rowid为被编辑的行id)附加 oper:edit 键值对指示为编辑模式editData不为空,会被扩展到被提交的数据里面去一起提交如果onclickSubmit事件也返回了附加的数据,也会一起被提交到服务器。添加新数据行调用的方法也是editGridRow,指示rowid设置为“new”。这个方法使用到colModel中定义的 通用编辑属性les"> 和 jqGrid中的editurl 配置
调用方式
-收缩 JavaScript代码 jQuery( "#grid_id").editGridRow( "new", properties );新API调用方式
-收缩 JavaScript代码 jQuery( "#grid_id").jqGrid( 'editGridRow', "new", properties );参数说明
grid_id:jqGrid的idproperties:键值键值对对象,包含下面列出的任意属性和事件此方法使用的语言文件中定义的属性
-收缩 JavaScript代码 $.jgrid = { //... edit : { addCaption: "Add Record", editCaption: "Edit Record", bSubmit: "Submit", bCancel: "Cancel", bClose: "Close", saveData: "Data has been changed! Save changes?", bYes : "Yes", bNo : "No", bExit : "Cancel", //... }, //... }这些默认选项可以在调用方法时重新配置被覆盖掉。通过方法传递参数时,例如,使用bSubmit : "Submit" 而不是 $.jgrid.edit.bSubmit :"Submi",参数配置和编辑模式一样,请参考上面
在添加模式下提交到服务器的数据给json键值对对象({...})
所有输入元素(包括行被隐藏的)的键值对(name为输入元素的name值)附加id:_empty 键值对(_empty指示为新添加的行)附加 oper:add 键值对指示为添加模式editData不为空,会被扩展到被提交的数据里面去一起提交如果onclickSubmit事件也返回了附加的数据,也会一起被提交到服务器。这个方法和 editGridRow很类似,只是无法编辑数据,也没有任何附加于表单的事件。
调用方式
Calling convention:
-收缩 JavaScript代码 jQuery( "#grid_id").viewGridRow( rowid, properties ); //jQuery("#grid_id").jqGrid('viewGridRow', rowid, properties );//NEW AP参数说明
grid_id:jqGrid的idrowid:要编辑的数据行idproperties:键值键值对对象,包含下面列出的任意属性和事件此方法使用的语言文件中定义的属性
-收缩 JavaScript代码 $.jgrid = { //... view : { caption: "View Record", bClose: "Close" }, //...在表单显示前触发。
beforeShowForm : function(formid) {…}
参数说明formid : jQuery 包转好的对象,通过formid[0].id获取表单id值
调用此方法将会调用服务器端的删除操作。这个方法使用到colModel中定义的 通用编辑属性les"> 和 jqGrid中的editurl 配置
调用方式
-收缩 JavaScript代码 jQuery( "#grid_id").delGridRow( row_id_s, options ); //新API jQuery( "#grid_id").jqGrid( 'delGridRow', row_id_s, options );参数说明
grid_id:jqGrid的idrow_id_s:数据行的id,可以为单个id值或者用逗号分隔的多个个id值(可多选时)options:键值键值对对象,包含下面列出的任意属性和事件此方法使用的语言文件中定义的属性
-收缩 JavaScript代码 $.jgrid = { //... del : { caption: "Delete", msg: "Delete selected record(s)?", bSubmit: "Delete", bCancel: "Cancel" }, //...这些默认选项可以在调用方法时重新配置被覆盖掉。通过方法传递参数时,例如,使用bSubmit : "Submit" 而不是 $.jgrid.edit.bSubmit :"Submi"
当所有动作和事件执行完毕,数据行已经添加或者更新到grid后触发
afterComplete : function (response, postdata, formid) {…}
参数说明 response :服务器返回的数据 postdata :提交到服务器的数据,JSON键值对对象 formid : jQuery 包转好的对象,通过formid[0].id获取表单id值
afterShowForm在表单显示后触发,有一个参数为formid,说明如上
afterShowForm : finction (formid) {…}
afterSubmit提交数据从服务器返回后触发。主要用于显示服务器状态信息(例如,数据成功保存或者被服务器端取消保存的原因)
afterSubmit : function(response, postdata) { … return [success,message] },参数说明和afterComplete一样 此方法需要返回 [success, message, new_id] 格式的数据 success :为boolean值,如果为true处理继续进行(message会被忽略),如果为false,将会弹出一个对话框显示错误信息(message的值)并停止其他处理 message:错误信息
beforeShowForm在表单显示前触发。
beforeShowForm : function(formid) {…}
beforeSubmit在提交数据到服务器前触发
beforeSubmit : function(postdata, formid) { … return[success,message]; }
方法需要返回[success,message]格式的数组信息 success :boolean值,为true指示后续的操作继续,否则停止并显示错误信息(message)提示用户。 message :错误时显示的提示信息
onclickSubmit点击提交(删除)按钮,提交数据构造后触发
onclickSubmit : function(params, postdata) { … return {add_data} }
params:方法选择配置项目 postdata:被提交的数据
方法可以返回json键值对对象用于扩展postdata数据
onClose表单对话框关闭前触发,可以返回true或者false。返回true或者未返回值都会关闭表单对话框,false则不关闭表单对话框。errorTextFormat用于ajax调用后错误发生时,更好的显示错误信息。
errorTextFormat:function(xhr)
需要返回显示给用户的信息(string类型)
serializeDelData如果设置了这个事件,在删除数据时将序列化传给ajax请求的数据。这个方法需要返回序列化后的内容。当自定义数据需要发送到服务器时可以使用此事件。例如,JSON格式的字符串,XML格式的字符串等等。此事件返回的数据将会提交到服务器。在删除模式下提交到服务器的数据给json键值对对象({...})
id:rowids键值对,rowids可以为单个id值或者用逗号分隔的多个个id值 (可多选时)附加 oper:del 键值对指示为删除模式delData不为空,会被扩展到被提交的数据里面去一起提交如果onclickSubmit事件也返回了附加的数据,也会一起被提交到服务器。这个方法没有和用户交互。
调用方式
-收缩 JavaScript代码 jQuery( "#grid_id").GridToForm( rowid, formid ); //新API jQuery( "#grid_id").jqGrid( 'GridToForm', rowid, formid );参数说明
grid_id:jqGrid的idrowid:数据行idformid: jQuery 包转好的对象,通过formid[0].id获取表单id值调用这个方法时,将指定的rowid数据显示在配置的表单内。如果表单元素name和colModel配置的一样时,将会显示此列数据在这个输入元素上
这个方法没有和用户交互。
调用方式
-收缩 JavaScript代码 jQuery( "#grid_id").FormToGrid( rowid, formid, mode, position ); //新API jQuery( "#grid_id").jqGrid( 'FormToGrid', rowid, formid, mode, position );参数说明
grid_id:jqGrid的idrowid:数据行idformid: jQuery 包转好的对象,通过formid[0].id获取表单id值mode:设置模式,可以为添加(add)或者设置(set),默认为set。当设置为set时,grid中数据行将用表单中的数据进行更新。如果设置为add,将会在grid中新增加一行。position:此配置用于mode设置为add时指定表单数据被添加到grid中的位置。 first :添加到grid第一行 last :添加到grid最后一行此方法和 GridToForm方法刚好相反,将表单数据放到colModel中name匹配的列中
来源:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing
