`
tooby
  • 浏览: 118223 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jqGrid 常用事件

 
阅读更多
jqGrid有很多事件,包括事件的参数,在下表中列出。
常用的事件包括afterInsertRow ,gridComplete,loadComplete,onCellSelect,onRightClickRow,onSelectRow等
代码示例如下:
jQuery("#gridid").jqGrid({
...
  onSelectRow:function(rowid,stat)
  {
  alert(rowid);
  alert(stat)
  },
...
});

 

Event

Parameters

Description

afterInsertRow

rowid 
rowdata 
rowelem

This event fires after every inserted row.
rowid is the id of the inserted row 
rowdata is an array of the data to be inserted into the row. This is array of type name: value, where the name is a name from colModel 
rowelem is the element from the response. If the data is xml this is the xml element of the row; if the data is json this is array containing all the data for the row 
Note: this event does not fire if gridview option is set to true

beforeProcessing

data, status, xhr

This event fire before proccesing the data from the server. Note that the data is formatted depended on the value of the datatype parameter - i.e if the datatype is 'json' for example thedata is JavaScript object

beforeRequest

none

This event fire before requesting any data. Also does not fire if datatype is function. If the event return false the request is not made to the server

beforeSelectRow

rowid, e

This event fire when the user click on the row, but before select them. 
rowid is the id of the row. 
e is the event object 
This event should return boolean true or false. If the event return true the selection is done. If the event return false the row is not selected and any other action if defined does not occur.

gridComplete

none

This fires after all the data is loaded into the grid and all other processes are complete. Also the event fires independent from the datatype parameter and after sorting paging and etc.

loadBeforeSend

xhr,
settings

A pre-callback to modify the XMLHttpRequest object (xhr) before it is sent. Use this to set custom headers etc. Returning false will cancel the request.

loadComplete

data

This event is executed immediately after every server request. 
data Data from the response depending on datatype grid parameter

loadError

xhr,
status,
error

A function to be called if the request fails. The function gets passed three arguments: The XMLHttpRequest object (xhr), a string describing the type of error (status) that occurred and an optional exception object (error), if one occurred.

onCellSelect

rowid,
iCol, 
cellcontent,
e

Fires when we click on particular cell in the grid.
rowid is the id of the row 
iCol is the index of the cell,
cellcontent is the content of the cell,
e is the event object element where we click.
(Note that this available when we not use cell editing module and is disabled when using cell editing).

ondblClickRow

rowid, 
iRow, 
iCol, 
e

Raised immediately after row was double clicked. 
rowid is the id of the row, 
iRow is the index of the row (do not mix this with the rowid),
iCol is the index of the cell. 
e is the event object

onHeaderClick

gridstate

Fire after clicking to hide or show grid (hidegrid:true);
gridstate is the state of the grid - can have two values - visible or hidden

onPaging

pgButton

This event fires after click on [page button] and before populating the data. Also works when the user enters a new page number in the page input box (and presses [Enter]) and when the number of requested records is changed via the select box. To this event we pass only one parameter pgButton See pager.
If this event return 'stop' the processing is stopped and you can define your own custom paging

onRightClickRow

rowid, 
iRow, 
iCol, 
e

Raised immediately after row was right clicked. 
rowid is the id of the row, 
iRow is the index of the row (do not mix this with the rowid),
iCol is the index of the cell.
e is the event object. 
Note - this event does not work in Opera browsers, since Opera does not support oncontextmenu event

onSelectAll

aRowids,
status

This event fires when multiselect option is true and you click on the header checkbox. 
aRowids array of the selected rows (rowid's). 
status - boolean variable determining the status of the header check box - true if checked, false if not checked. 
Note that the aRowids alway contain the ids when header checkbox is checked or unchecked.

onSelectRow

rowid,
status

Raised immediately after row was clicked. 
rowid is the id of the row,
status is the status of the selection. Can be used when multiselect is set to true. true if the row is selected, false if the row is deselected.

onSortCol

index,
iCol,
sortorder

Raised immediately after sortable column was clicked and before sorting the data. 
index is the index name from colModel, 
iCol is the index of column, 
sortorder is the new sorting order - can be 'asc' or 'desc'. 
If this event return 'stop' the sort processing is stopped and you can define your own custom sorting

resizeStart

event, index

Event which is called when we start resize a column. event is the event object, index is the index of the column in colModel.

resizeStop

newwidth, index

Event which is called after the column is resized. newwidth is the is the new width of the column , index is the index of the column in colModel.

serializeGridData

postData

If set this event can serialize the data passed to the ajax request. The function should return the serialized data. This event can be used when a custom data should be passed to the server - e.g - JSON string, XML string and etc. 
To this event we pass the postData array.

调用ajax的事件顺序如下:

1.beforeRequest

2.loadBeforeSend

3.serializeGridData

4.loadError (if a error from the request occur - the event from steps 5 till 7 do not execute. If there is no error the event 4. does not execute and we continue to with the step 5.)

5.beforeProcessing

6.gridComplete

7.loadComplete

分享到:
评论

相关推荐

    JQuery插件jqGrid常用属性说明

    以下是对jqGrid常用属性的详细说明: 1. **colModel**:这是jqGrid最重要的配置之一,用于定义表格列的属性。每个列都有一个对象,包含列名(name)、标题(title)、宽度(width)等属性,还可以设置是否可编辑...

    JQuery插件jqGrid常用属性说明.docx

    jqGrid提供了丰富的事件处理,如`beforeSelectRow`、`onSelectRow`、`ondblClickRow`等,允许自定义用户交互逻辑。 10. **扩展功能**: jqGrid支持子表格、表格排序、过滤、树形结构以及自定义图标等高级功能,...

    JQuery插件jqGrid常用属性说明.pdf

    jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上动态展示数据并提供丰富的交互功能,如增、删、改、查、分类显示以及在线编辑。它通过XML、JSON或其他数据格式获取数据,并将其组织成表格形式。下面将详细...

    jqGrid_各种参数_详解

    以下是常用的 jqGrid 事件: * addRow:添加新行事件。 * afterInsertRow:插入新行后事件。 * afterSaveCell:单元格保存后事件。 * afterSelect:选择单元格后事件。 * beforeEditCell:编辑单元格前事件。 * ...

    jqgrid全套示例代码

    开发者可以通过查看这些脚本来了解jqGrid的API调用和事件处理。 5. **bin**:在ASP.NET中,这个文件夹用于存放编译后的程序集(DLLs),可能包括jqGrid相关的服务器端组件或自定义的业务逻辑代码。通过这些文件,...

    jqGrid_php

    - JSONP(JSON with Padding):一种跨域数据交互协议,用于解决同源策略限制,jqGrid 常用此方式与 PHP 服务器通信。 - CRUD 操作:创建(Create)、读取(Read)、更新(Update)和删除(Delete),是数据库操作...

    jqGrid 演示最新版 jqgrid 4.4, jQuery 1.8.0, jQuery-ui 1.8.23

    它提供了丰富的功能,包括分页、排序、搜索、编辑、添加和删除记录等,是Web开发中用于创建交互式数据表的常用工具。在最新版本的jqGrid 4.4中,我们看到了一些显著的改进和增强,旨在提高用户体验和性能。 **...

    jqgrid 插件

    - **事件处理**:jqGrid提供了多种内置事件,如`loadComplete`、`beforeSelectRow`等,允许你在特定操作发生时执行自定义的JavaScript代码。 - **分页**:jqGrid支持客户端和服务器端分页,可以通过设置`pager`和`...

    jqGrid案例经典常用功能CI框架+数据库文件

    jqGrid案例,经典搜索,异步,里面包括添加、删除、修改等日常操作,此程序是我用codeIgnite(CI)框架程序,压缩包内还有数据库文件,下载下来直接修改数据库配置文件即可预览,功能很强大,是php程序,希望下载者注意

    jqgrid手册

    下面是一些常用的参数及其解释: 1. **url**: 指定获取数据的服务器地址。这是 jqGrid 获取数据的基本来源。 2. **datatype**: 设置从服务器端返回的数据类型,默认为 `xml`。可以选择的类型包括:`xml`、`local`...

    JqGrid项目(java web)

    JqGrid是一款强大的JavaScript库,用于在Web应用中展示和操作数据,而Struts2和Spring是Java领域中常用的MVC框架,它们在构建企业级应用程序时发挥着关键作用。 首先,让我们了解一下JqGrid。JqGrid是一款基于...

    jqGrid帮助文档

    以下是一些常用的参数示例: ```javascript $("#list").jqGrid({ url: 'mydata.php', datatype: 'xml', colNames: ['Name', 'Age', 'Email'], colModel: [ {name: 'name', index: 'name', width: 150}, {name:...

    jqGrid3.6中文文档

    对于需要用户交互的功能,如编辑和删除记录,jqGrid 也提供了相应的API和事件,开发者可以通过监听这些事件来实现数据验证和回调处理。 在数据加载方面,jqGrid 支持从 JSON、XML 或其他数据源获取数据,并且可以...

    jqGrid与Struts2的结合应用_操作Grid数据

    除了以上介绍的方法,jqGrid 还提供了其他一些常用的方法: 4. **delRowData**:删除指定行,接受 rowid 参数。 5. **setRowData**:更新指定行的数据,接受 rowid 和新的数据对象参数。 6. **editRow** 和 **...

    javascript中的jqgrid相关使用文档

    本文档旨在详细介绍jqGrid的基本配置、常用属性、事件及方法,帮助开发者更好地理解和使用这一强大的工具。 #### 二、表格配置详解 在jqGrid中,表格配置是非常灵活且强大的,通过定义`colModel`(列模型)来定制...

    jqgrid总结.doc

    jqGrid提供了许多可配置的属性,下面是一些常用的属性示例: ```javascript $("#jqgrid").jqGrid({ url: "${ctx}/sys/role/search.dm", colNames: ["角色名称"], colModel: ["roleName"], jsonReader: {id: ...

    jqGrid与java简单的增删改查

    对于增删改查操作,你可以在jqGrid中配置相应的事件,如`editGridRow`、`addGridRow`和`delGridRow`,然后在Servlet中执行对应的SQL语句。例如,删除操作可以通过以下方式实现: ```javascript $("#grid").jqGrid('...

    jqgrid 导出成为 JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG,PDF格式

    9. **PNG**: Portable Network Graphics,一种常用的图像文件格式。jqGrid 可以将整个表格导出为 PNG 图片,方便分享或保存视觉化的数据视图。 10. **PDF (Portable Document Format)**: 便携式文档格式,能够保持...

    Asp.net+jqGrid

    jqGrid支持JSON和XML两种数据格式,这两种格式都是数据交换的常用标准,尤其是对于Web服务和AJAX通信。 **分页** 是jqGrid的一个核心特性,它可以自动处理大量数据的显示,只加载用户当前查看的部分数据,提高了...

    jqgrid帮组文档

    - **JSON 数据**:最常用的数据格式之一,jqGrid 支持 JSON 对象或 JSON 字符串。 - **数组数据**:可以使用普通的 JavaScript 数组来传递数据。 - **用户自定义数据**:支持自定义数据格式。 #### 六、基本 Grid ...

Global site tag (gtag.js) - Google Analytics