jqgrid操作(转)
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匹配的列中
浙公网安备 33010602011771号