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 配置
调用方式
JavaScript代码
新API中调用方式
JavaScript代码
参数说明
- grid_id：jqGrid的id
- rowid：要编辑的数据行id
- properties：键值键值对对象，包含下面列出的任意属性和事件
此方法使用的语言文件中定义的属性
JavaScript代码
//...
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值).
<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 配置
调用方式
JavaScript代码
新API调用方式
JavaScript代码
参数说明
- grid_id：jqGrid的id
- properties：键值键值对对象，包含下面列出的任意属性和事件
此方法使用的语言文件中定义的属性
JavaScript代码
//...
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值)
示例
<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:
JavaScript代码
//jQuery("#grid_id").jqGrid('viewGridRow', rowid, properties );//NEW AP
参数说明
- grid_id：jqGrid的id
- rowid：要编辑的数据行id
- properties：键值键值对对象，包含下面列出的任意属性和事件
此方法使用的语言文件中定义的属性
JavaScript代码
//...
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值)
示例
JavaScript代码
<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 配置
调用方式
JavaScript代码
//新API
jQuery( "#grid_id").jqGrid( 'delGridRow', row_id_s, options );
参数说明
- grid_id：jqGrid的id
- row_id_s：数据行的id，可以为单个id值或者用逗号分隔的多个个id值（可多选时）
- options：键值键值对对象，包含下面列出的任意属性和事件
此方法使用的语言文件中定义的属性
JavaScript代码
//...
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中的数据行显示在指定表单中
这个方法没有和用户交互。
调用方式
JavaScript代码
//新API
jQuery( "#grid_id").jqGrid( 'GridToForm', rowid, formid );
参数说明
- grid_id：jqGrid的id
- rowid：数据行id
- formid： jQuery 包转好的对象，通过formid[0].id获取表单id值
调用这个方法时，将指定的rowid数据显示在配置的表单内。如果表单元素name和colModel配置的一样时，将会显示此列数据在这个输入元素上
FormToGrid
这个方法没有和用户交互。
调用方式
JavaScript代码
//新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
562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
