jqGrid 编辑 之 表单编辑
jqGrid 可以实时地创建一个表单来添加、删除、修改相关数据
editGridRow
请注意新增记录和修改记录都是这个方法。
这个方法可以创建一个以模态弹窗形式呈现的 form，用来编辑指定行的字段。
这个方法可以使用 基本概念相关的 colModal 属性以及 editurl 属性。
调用形式：
$("#grid_id").jqGrid( "editGridRow", rowid, properties );- rowid： 所要编辑行的 id ，传入 "new" 时就是新增记录。
- properties：对象（键值对），包含如下的属性和事件。
属性
| 属性名 | 描述 | 默认值 |
|---|---|---|
| top | 弹窗的顶部位置 | 0 |
| left | 弹窗的左侧位置 | 0 |
| width | 弹窗的宽度 | 300 |
| height | 弹窗的总体高度 | auto |
| dataheight | 弹窗内容区的高度 | auto |
| drag | 是否可以拖拽 | true |
| resize | 是否可以改变尺寸 | true |
| url | 数据传递的后台 url，如果设置了此值，将会覆盖 editurl | null |
| mtype | 请求类型，是 "get" 还是 "post" | POST |
| editData | 一个对象（键值对），这个键值对将被混入发往服务器的数据中，也就是可以添加额外的数据发往服务器。 | empty |
| recreateForm | 设为 true 时，每次弹窗显示时，表单都会根据 colModel 中的最新值来重新生成 | false |
| addedrop | 新增一行时，插入表格的位置。 "first"，表格顶部， "last"，表格尾部。 将属性 reloadAfterSubmit 设为 ture 时，那么该行会按顺序出现。 |
first |
| topinfo | 顶部信息，设置该值后，将会在弹窗的标题栏下面添加一行，表示顶部信息。 | 空字符串 |
| bottominfo | 底部信息，设置该值后，将会在弹窗的按钮栏下面添加一行，表示底部信息。 | 空字符串 |
| savekey |
数组。保存数据的键盘快捷键。 第一个元素是布尔值，表示是否启用快捷键。 第二个元素是数值，表示对应键的 key code，比如 enter 键是 13。 编辑和添加记录两个操作都使用这个属性，所以快捷键是一样的。 |
[ false, 13 ] |
| navkeys |
数组。在不同字段中切换焦点。 第一个元素，布尔值，表示是否启用该功能。 第二个元素，数值，对应键的 key code，默认值是 "↑" 键，表示向上移动焦点。 第三个元素，数值，对应键的 key code，默认值是 "↓" 键，表示向下移动焦点。 |
[ false, 38, 40 ] |
| checkOnSubmit |
这个功能之存在于编辑中。 当设置为 true 时，点击提交并且表单域中的值有改动时会触发该功能，即出现一个弹窗来询问是否保存改动。 |
false |
| checkOnUpdate | 这个功能在新增和编辑中都可以使用。 关闭对话框时，提示是否保存更改。 |
false |
| closeAfterAdd | 如果是增加一条记录，那么该值设为 true 时，添加完成就关闭对话框。 | false |
| closeAfterEdit | 编辑完成时，关闭对话框。 | false |
| reloadAfterSubmit | 异步提交数据之后重新载入表格 | true |
| closeOnEscape | 按 "Esc" 键关闭弹窗。 | false |
| ajaxEditOptions | 即 ajax 的参数，设置该值会覆盖所有 jqGrid 内置的 ajax 参数。 | 空对象 |
| viewPageButtons | 是否显示表单中的前进、后台按钮。 | true |
| zIndex | 设置弹窗的 zIndex 。 | 950 |
事件
| 事件名 | 描述 |
|---|---|
| afterComplete | 新增或编辑一条记录完成，并且所有的 actions 和 事件都执行完成时，触发该事件。 afterComplete: function( xhr, postdata, form ) {} 其中： xhr：xmlhttprequest 对象 postdata：传递到服务器的数据 form： 表单的 jQuery 对象 |
| afterShowForm | 表单显现时触发该事件，接受一个参数，为表单的 jQuery 对象。 |
| beforeInitData | 表单初始化并并填充数据时触发。 一个参数，为 form 的 jQuery 对象。 返回 false 时，表单不会被创建。 |
| beforeShowForm | 表单显示前触发。带一个参数，表单的 jQuery 对象。 |
| beforeSubmit |
请求发送之前触发。 两个参数，第一个是将要传递的数据，第二个是表单的 jQuery 对象。 使用该事件时，请务必返回一个数组，否则出错。 数组的第一个元素是布尔值，表示是否继续发送请求。 第二元素则是字符串，表示出错信息。 |
| onclickSubmit | 提交按钮被点击，传递的数据构建完成之后触发该事件。 接受两个参数， editGridRow 方法的属性集合以及将要传递到服务端的键值对。 返回值为一个对象（键值对），将会取代参数中的键值对被传递到服务器。 |
| onInitializeForm | 只在表单初始化的时候触发一次。接受一个参数，表单的 jQuery 对象。 |
| onClose | 关闭对话框之前触发。返回 false 时，将阻止对话框关闭。 |
| errorTextFormat |
请求服务器出错时，触发该事件，用来语义化出错信息。 服务端的返回值做为参数传入该事件，返回值必须是字符串，即新的出错信息。 |
| serializeEditData |
序列化传递到服务器的数据。 务必返回序列号之后的数据。 参数是将要传递到服务器的数据。 |
表单是怎样创建的
表单创建遵循如下规则：
隐藏列以隐藏行的形式包含进表单中
文本框等元素的 id 是 colModel 中对应的 name
文本框等元素的 name 也是来自于 colModel 中的 name
为了更方便的操作数据，表单中的每一行都有一个这样的 id ： "tr_" 加上 colModel 中的 name
传送到服务器的数据
显然我们是传递一个 {} 的键值对到服务器，其构成如下：
name/value 键值对， name 是表单元素的 name ， value 是表单元素的 value
额外的， id: rowid ，这里的 rowid 是编辑的那一行( tr ) 的 id 值
额外的， oper: add 来说明操作类型，比如 add 就是新增一行
如果属性 editData 非空，将会把该值混入到将要传递的数据中
如果事件 onclickSubmit 的返回值非空，将会把该返回值混入到将要传递的数据中
添加数据
方法 editGridRow 同样可以用来新增记录。
语法：
// 注意关键参数 "new"
$("#grid_id").jqGrid('editGridRow', "new", properties );new 表示新增一行，务必和编辑模式区别开来
properties 参数，和编辑模式相同，请查看上述表格。
表单的创建
和编辑模式相同
传递到后台的数据
和编辑模式相同
delGridRow
通过这个方法，我们可以删除记录并同步到数据库。
这个方法用到了属性 colModal 和 editurl 。
语法形式：
$( "#grid_id" ).jqGrid( "delGridRow", row_id_s, options );row_id_s
目标行的 id 可以是一个简单的字符串，或者用逗号隔开字符串表示很多行的 id 。
options
参数，一个对象，可以是下面的值。
属性
| 属性名 | 描述 | 默认值 |
|---|---|---|
| top | 弹窗的顶部位置。 | 0 |
| left | 弹窗的左边位置。 | 0 |
| width | 弹窗的宽度。 | 300 |
| height | 弹窗的高度。 | auto |
| modal | 是否模态。 | false |
| url | 处理数据的 url 。如果设置了，将会覆盖 editurl 。 | null |
| delData | 键值对，将会被传递到后台。 | 空 |
| reloadAfterSubmit | 在发送删除请求成功后，重新加载表格。 | true |
事件
和 editGridRow 一样。
传递到服务器的数据
键值对 id: rowids ，rowids 可以是字符串，或者逗号隔开的字符串
键值对 oper: del ，标识该操作为删除
如果 delData 属性非空，将会混入到传递到后台的数据中
事件 onclickSubmit 返回值非空的话，会被混入到传递到后台的数据中