jqGrid表单编辑配置
jqGrid表单编辑
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高级查询
editGridRow:编辑表格的行
这个方法创建一个模态对话框表单用于编辑表格中的存在的行。这个方法使用到colModel中定义的通用编辑属性和jqGrid中的editurl 配置
调用方式
jQuery("#grid_id").editGridRow( rowid, properties );
新API中调用方式
jQuery("#grid_id").jqGrid('editGridRow', rowid, properties );
参数说明
-
grid_id:jqGrid的id
-
rowid:要编辑的数据行id
-
properties:键值键值对对象,包含下面列出的任意属性和事件
此方法使用的语言文件中定义的属性
$.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", //... }, //... }
配置属性
名称 | 描述 | 默认值 |
---|---|---|
top | 模态窗口初始化顶部位置。默认值为0,表示出现在grid顶部。如果jqModel设置为true,那么将启用jqModal插件来呈现内容,此时模态窗口是相对于window定位,不在是grid对象。 | 0 |
left | 模态窗口初始化左边位置。默认值为0,表示出现在grid的左边。如果jqModel设置为true,那么将启用jqModal插件来呈现内容,此时模态窗口是相对于window定位,不在是grid对象。 | 0 |
width | 模态窗口宽度 | 300 |
height | 模态窗口高度 | auto |
dataheight | 这个参数控制编辑区域高度,如上图所示的输入控件区域,位于表头和按钮之间。 | auto |
modal | 设置对话框是否为模态(就是是否显示所谓的遮盖层,lightbox效果)的,仅当启用jqModal插件时才有效(jqModal:true) | false |
drag | 设置对话框是否可以拖拽。需要加载 jqDnR 插件和jQuery UI的dragable部件(jQuery widget) | true |
resize | 设置对话框是否可以更改大小。需要加载 jqDnR 插件和jQuery UI的dragable部件(jQuery widget) | true |
url | 数据保存的url地址,如果没有设置,默认wiejqGrid中配置的editurl | null |
mtype | ajax以哪种方式提交数据岛服务器(“POST” 或者 “GET”) | POST |
editData | 发送到服务器的附加数据,键值对对象 | empty |
recreateForm | 设置为true,对话框激活时里面的表单会重新创建使用colModel中配置的新选项(如果被修改过) | false |
jqModal | 设置为true将使用jqModal插件创建对话框(如果用script加载了这个插件),而不是用jqGrid内置的函数来创建对话框 | true |
addedrow | 控制添加行的位置,为'first'将显示在第一,, 'last'显示在最后。要想按照设定的排序来显示,可以设置reloadAfterSubmit: true | first |
topinfo | 新增一行内容,显示在对话框页头下的信息 | empty string |
bottominfo | 新增一行内容,显示在对话框操作按钮下的信息 | empty string |
saveicon |
数组,定义提交按钮的图标。参数格式说明
|
[true,"left","ui-icon-disk"] |
closeicon | 数组,定义取消(关闭)按钮。参数说明参考saveicon配置 | [true,"left","ui-icon-close"] |
savekey |
数组,定义保存表单的快捷键。参数格式说明
|
[false,13] |
navkeys |
数组,仅在编辑/查看模式下有效,添加键盘导航,允许按下配置的键切换到上/下一条记录,默认禁用
|
[false,38,40] |
checkOnSubmit | 仅在编辑模式下有效。设置为true,当数据有修改,点击提交按钮后工作。数据被修改,将会弹出对话框信息,让用户确定是否确认修改或者取消。点击对话框中的取消按钮将会关闭对话框并放回表单对话框,不会还原表单到原始值。 | false |
checkOnUpdate |
在添加和编辑模式适用。设置为true,行为如下 当某些数据被修改,用户点击取消按钮,导航按钮(上图示的左右箭头),关闭按钮(右上角的x),或者遮盖层(如果存在),按下ESC键(设置过),弹出新对话框提示用户是否保存,保存数据或者返回grid而不保存更改(最后这个操作将会关闭表单对话框) |
false |
closeAfterAdd | 在添加模式下,保存添加的记录后关闭对话框 | false |
clearAfterAdd | 在添加模式下,保存添加的记录后清空输入的数据 | true |
closeAfterEdit | 在编辑模式下,保存记录后关闭对话框 | false |
reloadAfterSubmit | 成功保存记录后重新加载grid数据 | true |
closeOnEscape | 设置为true可以通过按下ESC键关闭对话框窗口 | false |
ajaxEditOptions | 保存表单编辑数据时ajax请求的全局设置,可以重写所有当前保存ajax请求配置,包括complete事件 | empty object |
viewPagerButtons | 是否显示上一条,下一条(分页按钮)在表单中 | true |
zIndex | 对话框的z-index css属性。如果你想某些元素显示在对话框之上,那么需要设置元素的z-index大于对话框的默认z-index(950),如设置元素z-index为1000。 | 950 |
事件
事件名称 | 描述 |
---|---|
afterclickPgButtons |
在编辑模式下,显示了导航按钮下有效。在上或者下一条数据加载后触发。
|
afterComplete |
当所有动作和事件执行完毕,数据行已经添加或者更新到grid后触发
|
afterShowForm |
在表单显示后触发,有一个参数为formid,说明如上
|
afterSubmit |
提交数据从服务器返回后触发。主要用于显示服务器状态信息(例如,数据成功保存或者被服务器端取消保存的原因)
|
beforeCheckValues |
在验证数据前触发(验证规则在colModel中editrules定义)
|
beforeInitData |
在初始化输入表单数据前触发。
|
beforeShowForm |
在表单显示前触发。
|
beforeSubmit |
在提交数据到服务器前触发
|
onclickPgButtons |
仅在编辑模式下可用。点击上/下一条按钮,未离开当前显示的数据前触发,允许使用当前加载在表单中的内容(如保存)
|
onclickSubmit |
点击提交按钮,提交数据构造后触发
|
onInitializeForm |
触发一次,为编辑或者添加模式创建数据时触发
|
onClose | 表单对话框关闭前触发,可以返回true或者false。返回true或者未返回值都会关闭表单对话框,false则不关闭表单对话框。 |
errorTextFormat |
用于ajax调用后错误发生时,更好的显示错误信息。
|
serializeEditData | 如果设置了这个事件,在保存数据时将序列化传给ajax请求的数据。这个方法需要返回序列化后的内容。当自定义数据需要发送到服务器时可以使用此事件。例如,JSON格式的字符串,XML格式的字符串等等。此事件返回的数据将会提交到服务器。 |
表单如何构造
表单构造准许如下规则
-
colModel定义的隐藏字段包含在表单中,所在行被设置为隐藏(display:none )
-
可编辑元素的id属性值来自colModel配置中的name属性值
-
可编辑元素的name属性值来自colModel配置中的name属性值
-
为了容易操作编辑表单中的元素,编辑元素所在行(TR)的id构造为“tr_” + name (来自colmodel中配置的name值).
<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事件也返回了附加的数据,也会一起被提交到服务器。
Adding Row:添加新数据行
添加新数据行调用的方法也是editGridRow,指示rowid设置为“new”。这个方法使用到colModel中定义的 通用编辑属性les"> 和 jqGrid中的editurl 配置
调用方式
jQuery("#grid_id").editGridRow( "new", properties );
新API调用方式
jQuery("#grid_id").jqGrid('editGridRow', "new", properties );
参数说明
-
grid_id:jqGrid的id
-
properties:键值键值对对象,包含下面列出的任意属性和事件
此方法使用的语言文件中定义的属性
$.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",参数配置和编辑模式一样,请参考上面
How is the form constructed
表单如何构造
-
colModel定义的隐藏字段包含在表单中,所在行被设置为隐藏(display:none )
-
可编辑元素的id属性值来自colModel配置中的name属性值
-
可编辑元素的name属性值来自colModel配置中的name属性值
-
为了容易操作编辑表单中的元素,编辑元素所在行(TR)的id构造为“tr_” + name (来自colmodel中配置的name值)
示例
<form ....> <table> <tr id='tr_myfield'> <td> Caption</td> <td>edited element named, in colModel, as "myfield"</td> </tr> ... </table> </form>
这样我们可以在beforeShowFrom事件中通过某些条件实现表格行的显示和隐藏
提交到服务器的数据
在添加模式下提交到服务器的数据给json键值对对象({...})
-
所有输入元素(包括行被隐藏的)的键值对(name为输入元素的name值)
-
附加id:_empty 键值对(_empty指示为新添加的行)
-
附加 oper:add 键值对指示为添加模式
-
editData不为空,会被扩展到被提交的数据里面去一起提交
-
如果onclickSubmit事件也返回了附加的数据,也会一起被提交到服务器。
viewGridRow:查看数据
这个方法和 editGridRow很类似,只是无法编辑数据,也没有任何附加于表单的事件。
调用方式
Calling convention:
jQuery("#grid_id").viewGridRow( rowid, properties ); //jQuery("#grid_id").jqGrid('viewGridRow', rowid, properties );//NEW AP
参数说明
-
grid_id:jqGrid的id
-
rowid:要编辑的数据行id
-
properties:键值键值对对象,包含下面列出的任意属性和事件
此方法使用的语言文件中定义的属性
$.jgrid = { //... view : { caption: "View Record", bClose: "Close" }, //...
配置
配置名称 | 描述 | 默认值 |
---|---|---|
top | 模态窗口初始化顶部位置。默认值为0,表示出现在grid顶部。如果jqModel设置为true,那么将启用jqModal插件来呈现内容,此时模态窗口是相对于window定位,不在是grid对象。 | 0 |
left | 模态窗口初始化左边位置。默认值为0,表示出现在grid的左边。如果jqModel设置为true,那么将启用jqModal插件来呈现内容,此时模态窗口是相对于window定位,不在是grid对象。 | 0 |
width | 模态窗口宽度 | 300 |
height | 模态窗口高度 | auto |
dataheight | 这个参数控制显示区域高度,如上图所示的输入控件区域,位于表头和按钮之间。 | auto |
modal | 设置对话框是否为模态(就是是否显示所谓的遮盖层,lightbox效果)的,仅当启用jqModal插件时才有效(jqModal:true) | false |
drag | 设置对话框是否可以拖拽。需要加载 jqDnR 插件和jQuery UI的dragable部件(jQuery widget) | true |
resize | 设置对话框是否可以更改大小。需要加载 jqDnR 插件和jQuery UI的dragable部件(jQuery widget) | true |
jqModal | 设置为true将使用jqModal插件创建对话框(如果用script加载了这个插件),而不是用jqGrid内置的函数来创建对话框 | true |
topinfo | 新增一行内容,显示在对话框页头下的信息 | empty string |
bottominfo | 新增一行内容,显示在对话框操作按钮下的信息 | empty string |
closeicon | 数组,定义取消(关闭)按钮。参数说明参考saveicon配置 | [true,"left","ui-icon-close"] |
navkeys |
数组,仅在编辑/查看模式下有效,添加键盘导航,允许按下配置的键切换到上/下一条记录,默认禁用
|
[false,38,40] |
closeOnEscape | 设置为true可以通过按下ESC键关闭对话框窗口 | false |
labelswidth | 构造表格元素的时候很难计算元素长度,标签需要多宽也无法计算。所以需要制定标签的长度 | 30% |
viewPagerButtons | 是否显示上一条,下一条(分页按钮)在表单中 | true |
zIndex | 对话框的z-index css属性。如果你想某些元素显示在对话框之上,那么需要设置元素的z-index大于对话框的默认z-index(950),如设置元素z-index为1000。 | 950 |
recreateForm | 设置为true,对话框激活时里面的表单会重新创建使用colModel中配置的新选项(如果被修改过) | false |
事件
Event | Description |
---|---|
onClose | 表单对话框关闭前触发,可以返回true或者false。返回true或者未返回值都会关闭表单对话框,false则不关闭表单对话框。 |
beforeShowForm |
在表单显示前触发。
|
表单如何构造
-
不会创建任何输入元素
-
colModel定义的隐藏字段包含在表单中,所在行被设置为隐藏(display:none )
-
内容元素容器的id格式如 “v_” + name (name来自原colModel配置的name值)
-
为了容易操作表单中的元素,内容元素所在行(TR)的id构造为“trv_” + name (来自colmodel中配置的name值)
示例
<form ....> <table> <tr id='trv_myfield'> <td> Caption</td> <td id="v_myfield"><span>content of"myfield"</span></td> </tr> ... </table> </form>
delGridRow:删除数据行
调用此方法将会调用服务器端的删除操作。这个方法使用到colModel中定义的 通用编辑属性les"> 和 jqGrid中的editurl 配置
调用方式
jQuery("#grid_id").delGridRow( row_id_s, options ); //新API jQuery("#grid_id").jqGrid('delGridRow', row_id_s, options );
参数说明
-
grid_id:jqGrid的id
-
row_id_s:数据行的id,可以为单个id值或者用逗号分隔的多个个id值(可多选时)
-
options:键值键值对对象,包含下面列出的任意属性和事件
此方法使用的语言文件中定义的属性
$.jgrid = { //... del : { caption: "Delete", msg: "Delete selected record(s)?", bSubmit: "Delete", bCancel: "Cancel" }, //...
这些默认选项可以在调用方法时重新配置被覆盖掉。通过方法传递参数时,例如,使用bSubmit : "Submit" 而不是 $.jgrid.edit.bSubmit :"Submi"
属性配置
配置名称 | 描述 | 默认值 |
---|---|---|
top | 模态窗口初始化顶部位置。默认值为0,表示出现在grid顶部。如果jqModel设置为true,那么将启用jqModal插件来呈现内容,此时模态窗口是相对于window定位,不在是grid对象。 | 0 |
left | 模态窗口初始化左边位置。默认值为0,表示出现在grid的左边。如果jqModel设置为true,那么将启用jqModal插件来呈现内容,此时模态窗口是相对于window定位,不在是grid对象。 | 0 |
width | 模态窗口宽度 | 300 |
height | 模态窗口高度 | auto |
dataheight | 这个参数控制编辑区域高度,如上图所示的输入控件区域,位于表头和按钮之间 | auto |
modal | 设置对话框是否为模态(就是是否显示所谓的遮盖层,lightbox效果)的,仅当启用jqModal插件时才有效(jqModal:true) | false |
drag | 设置对话框是否可以拖拽。需要加载 jqDnR 插件和jQuery UI的dragable部件(jQuery widget) | true |
resize | 设置对话框是否可以更改大小。需要加载 jqDnR 插件和jQuery UI的dragable部件(jQuery widget) | true |
url | 数据保存的url地址,如果没有设置,默认wiejqGrid中配置的editurl | null |
mtype | ajax以哪种方式提交数据岛服务器(“POST” 或者 “GET”) | POST |
delData | 发送到服务器的附加数据,键值对对象 | empty |
jqModal | 设置为true将使用jqModal插件创建对话框(如果用script加载了这个插件),而不是用jqGrid内置的函数来创建对话框 | true |
delicon |
数组,定义删除按钮的图标。参数格式说明
|
[true,"left","ui-icon-delete"] |
cancelicon | 数组,定义取消(关闭)按钮。参数说明参考saveicon配置 | |
reloadAfterSubmit | 成功提交(删除)记录后重新加载grid数据 | true |
closeOnEscape | 设置为true可以通过按下ESC键关闭对话框窗口 | false |
ajaxDelOptions | 删除表单编辑数据时ajax请求的全局设置,可以重写所有当前保存ajax请求配置,包括complete事件 | empty object |
zIndex | T对话框的z-index css属性。如果你想某些元素显示在对话框之上,那么需要设置元素的z-index大于对话框的默认z-index(950),如设置元素z-index为1000。 | 950 |
事件
事件名称 | 描述 |
---|---|
afterComplete |
当所有动作和事件执行完毕,数据行已经添加或者更新到grid后触发
|
afterShowForm |
在表单显示后触发,有一个参数为formid,说明如上
|
afterSubmit |
提交数据从服务器返回后触发。主要用于显示服务器状态信息(例如,数据成功保存或者被服务器端取消保存的原因)
|
beforeShowForm |
在表单显示前触发。
|
beforeSubmit |
在提交数据到服务器前触发
|
onclickSubmit |
点击提交(删除)按钮,提交数据构造后触发
|
onClose | 表单对话框关闭前触发,可以返回true或者false。返回true或者未返回值都会关闭表单对话框,false则不关闭表单对话框。 |
errorTextFormat |
用于ajax调用后错误发生时,更好的显示错误信息。
|
serializeDelData | 如果设置了这个事件,在删除数据时将序列化传给ajax请求的数据。这个方法需要返回序列化后的内容。当自定义数据需要发送到服务器时可以使用此事件。例如,JSON格式的字符串,XML格式的字符串等等。此事件返回的数据将会提交到服务器。 |
提交到服务器的数据
在删除模式下提交到服务器的数据给json键值对对象({...})
-
id:rowids键值对,rowids可以为单个id值或者用逗号分隔的多个个id值 (可多选时)
-
附加 oper:del 键值对指示为删除模式
-
delData不为空,会被扩展到被提交的数据里面去一起提交
-
如果onclickSubmit事件也返回了附加的数据,也会一起被提交到服务器。
GridToForm:将grid中的数据行显示在指定表单中
这个方法没有和用户交互。
调用方式
jQuery("#grid_id").GridToForm( rowid, formid ); //新API jQuery("#grid_id").jqGrid('GridToForm', rowid, formid );
参数说明
-
grid_id:jqGrid的id
-
rowid:数据行id
-
formid: jQuery 包转好的对象,通过formid[0].id获取表单id值
调用这个方法时,将指定的rowid数据显示在配置的表单内。如果表单元素name和colModel配置的一样时,将会显示此列数据在这个输入元素上
FormToGrid
这个方法没有和用户交互。
调用方式
jQuery("#grid_id").FormToGrid( rowid, formid, mode, position ); //新API jQuery("#grid_id").jqGrid('FormToGrid', rowid, formid, mode, position );
参数说明
-
grid_id:jqGrid的id
-
rowid:数据行id
-
formid: 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
加支付宝好友偷能量挖...
原创文章,转载请注明出处:jqGrid表单编辑配置