Events（事件）

事件响应动作被设置为表格的属性，以下定义了行被选中时的响应：

var lastSel;

jQuery("#gridid").jqGrid({

...

   onSelectRow: function(id){

      if(id && id!==lastSel){

         jQuery('#gridid').restoreRow(lastSel);

         lastSel=id;

      }

      jQuery('#gridid').editRow(id, true);

   },

...

});

 

以下按字母顺序列出了可响应的时间：

事件

参数

描述

afterInsertRow

Rowed

Rowdata

Rowelem

此事件发生在每次插入行后

rowid 为插入的行ID

rowdata 是被插入行的数据数组。格式为name:value对，name在colModel定义

rowelem 是应答元素。xml为xml行，json为所有行数据。

注意：若gridview 为true，此事件不会发生

beforeRequest

none

此事件发生在任何数据请求前，但当datatype为function时不发生。

beforeSelectRow

rowid, e

此事件发生在用户点击行，选中该行前。

rowid 为行的ID，e为事件对象

该事件将返回布尔值true（行被选中）或false（行未被选中）。

gridComplete

none

此事件发生在表格所有数据装入和进程完成后。与datatype参数及排序分页等无关。

loadBeforeSend

xhr

此事件发生在XMLHttpRequest被发送前，用于修改对象属性（如headers）。

xhr 为XMLHttpRequest对象。

loadComplete

xhr

此事件发生在每个服务器请求后。xhr 为XMLHttpRequest对象。

loadError

xhr,

status,

error

此事件在请求失败时发生。事件有3个参数：

xhr 为XMLHttpRequest对象；

Satus为错误类型描述；error为错误对象。

onCellSelect

rowid,

iCol,

cellcontent,

e

此事件在点击表格特定单元格时发生。

rowid 为行ID；iCol 为列索引；

cellcontent 为单元格中内容；

e 点击事件对象。

ondblClickRow

rowid,

iRow,

iCol,

e

此事件发生在行双击后发生。

rowid为行ID；iRow为行索引（勿与rowid混淆）；

iCol为列索引；

e 为事件对象。

onHeaderClick

gridstate

此事件发生在点击显示或隐藏表格后发生（hidegrid为true）

gridstate为表格状态，有visible和hidden两个值

onPaging

pgButton

此事件发生在点击page button后，填充数据前，及用户输入一个与当前页页码不同的新页码并回车时。参见pager

onRightClickRow

rowid,

iRow,

iCol,

e

此事件发生在右击行后。（此事件在Opera浏览器中无效）

rowid为行ID；iRow为行索引（勿与rowid混淆）

iCol为列索引；

e为事件对象。

onSelectAll

aRowids,

status

此事件发生在点击标题的复选框时发生（multiselect为true）

aRowids 选定行ID的数组（哪些行的复选框与头复选框相同）

status头复选框的选定的布尔值，true为选中，false为未选中

onSelectRow

rowid,

status

此事件发生在行点击后

rowid为行ID；

status 为选择状态。当multiselect为true时使用，当行被选中时返回true；为选中时返回false。

onSortCol

index,

iCol,

sortorder

此事件发生在列排序被点击之后，数据排序前

index 为colModel 中定义的索引名；iCol 为列的索引号

sortorder 为新的排序方式，asc或desc

resizeStart

event,

index

此事件发生在列被重新定义宽度时。

event 为事件对象；index 为在colModel 中定义的列索引。

resizeStop

newwidth, index

此事件发生在列被重新定义宽度后。

newwidth 为新的列宽度；index 为在colModel 中定义的列索引。

serializeGridData

postData

通过此事件可以序列化传递给ajax请求的的数据。此事件将返回一个以序列化的数据。若有自定义的数据（如JSON字符串、XML字符串）要发给服务器时，可使用该事件。

关于单元格编辑、子表的事件情参阅Additional Events

Methods（方法）

此节描述jqGrid的基本方法。一些方法要求装入附加模块。

jqGrid 3.6使用新的jQuery UI 库接口，请参阅以下内容和jqGrid事件。

网格相关的方法

jqGrid方法调用格式：

<script>

...

jQuery("#grid_id").jqGridMethod( parameter1,...parameterN );

...

</script>

这里：grid_id是表格的id；

jqGridMethod为jqGrid方法；

parameter1,…parameterN未参数列表

若方法未定义返回值，则返回到jqGrid对象，一组方法可以链接起来，例如

<script>

...

jQuery("#grid_id").setGridParam({...}).hideCol("somecol").trigger("reloadGrid");

...

</script>

或使用新的接口

<script>

...

jQuery("#grid_id").jqGrid('method', parameter1,...parameterN );

...

</script>

这里：  grid_id是表格的id；

Method是方法名；

parameter1,…parameterN是参数列表。

下面是实例：

<script>

...

jQuery("#grid_id").jqGrid('setGridParam',{...}).jqGrid('hideCol',"somecol").trigger("reloadGrid");

...

</script>

为使用新的API配置jqGrid

在安装过程中按此步骤做：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>My First Grid</title>

 

<link rel="stylesheet" type="text/css" media="screen"

href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>

<script type="text/javascript">

         jQuery.jgrid.no_legacy_api = true;

</script>

<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

</head>

<body>

...

</body>

</html>

请注意调用：

<script type="text/javascript">

         jQuery.jgrid.no_legacy_api = true;

</script>

此行请在语言文件后，jqGrid的JS文件前

绿色的方法名要求特殊的程序。见方法的描述和例程

方法

参数

返回值

描述

addJSONData

data

none

用传递的data（数组）填充网格。用法：假如我们从web服务器获得的数据（jsonresponse），则

var mygrid = jQuery("#"+grid_id)[0];

var myjsongrid = eval("("+jsonresponse.responseText+")");

mygrid.addJSONData(myjsongrid);

myjsongrid = null;

jsonresponse =null;

将填充网格。当然，myjsongrid中的数据在传递到addJSONData之前可以被操作。

addRowData

rowid,

data,

position,

srcrowid

成功返回true，否则返回false。

插入一新行，rowid 为新行的ID，data（数组）为新行数据，position为新行插入的位置（first为表头，last为表尾，srcrowid指定偏移位置）。Data数组的格式为：: {name1:value1,name2: value2…} ，name为colModel指定的名称。

addXMLData

data

none

用传入的data填充网格。用法：假如我们从web服务器获得数据

(xmlresponse)，则

var mygrid = jQuery("#"+grid_id)[0];

mygrid.addXmlData(xmlresponse.responseXML);

将填充网格。当然，xmlresponse中的数据在传递到addXmlData之前可以被操作。

clearGridData

clearfooter

jqGrid object

清除网格中当前装入的数据，如果clearfooter 参数为true，则清除网格最后一行数据。

delRowData

rowid

成功返回true否则返回false

删除id = rowid的行。但不会删除服务器上的数据。

footerData

action,

data,

format

jqGrid对象

此方法获得或设置网格底部数据。见footerrow in options array。

action – 可设置为get（缺省）或set。 Get从底部返回name:value对象（name为colModel中的名称）。此时其他两个参数无效。

Set将data数组（对象）设置到底部。Data为colName中的名称和值对。

format – 缺省为true，表示设置时使用formatter (如果colModel中已定义)。false表示不使用formatter。

getCell

rowid,

iCol

单元格

内容

返回id = rowid行，column = iCol列的内容。 iCol可以是列的索引或colName中定义的名称。在编辑行或列时不能使用该方法，此时返回的不是当前值，而是原始值。

getCol

colname, returntype, mathoperation

数组或值

返回列值数组。

colname 可以是列的索引值或colModel中的名称。returntype 确定返回数组的类型，为false(缺省)时，数组只包含值。为true时为对象数组，格式为{id:rowid, value:cellvalue}，id为行的id， cellvalue为单元格的值。如 [{id:1,value:1},{id:2,value:2}…]

mathoperation为可选参数，可以是sum、avg和count。若此参数进行了有效设置，则返回计算后的值，若无效，则返回空数组。

getDataIDs

none

数组

返回当前网格显示数据的ID数组。无数据时返回空数组。

getGridParam

name

混合值

返回请求的参数的值。name 是options 数组中的名称，若为设置则options被返回。详见options.

getInd

rowid,

rowcontent

mixed

当rowcontent 设置为false（缺省）时，返回id= rowid行的索引值。若rowcontent设置为true，则返回整行。若为找到rowid则返回false。

getRowData

rowid or none

array{}

返回id = rowid行的数据数组。格式为name:value对，name为colModel中的名称，value为该行的值。未找到返回空数组。在行或列编辑时此方法不可用，此时返回的不是当前值，而是原始值。

若rowid为设置，则返回网格中所有数据数组。

hideCol

Colname或

[colnames]

jqGrid对象

根据colname或colnames数组给定的列名隐藏相应的列，列名必须是colModel中定义的名称。表格的宽度不会改变。

remapColumns

permutation, updateCells, keepHeader

none

调整列的显示顺序。permutation指定调整后的顺序，如 [1,0,2] 表示第一列在第二位显示。若updateCells 设置为true，列数据将重新排序。若keepHeader 设置为true，header单元格将重新排序。

resetSelection

none

jqGrid对象

选择（反选）行。多选择模式下同样可用。

setCaption

caption

jqGrid对象

设置新的表头文字。若表头为隐藏，将显示。

setCell

rowid,

colname,

data,

class,

properties

jqGrid对象

修改单元格的值、类或样式。其中：

Rowid为行ID；Colname为列名（可以是从0开始的列的索引值）；

data 设置的内容，若为空，则不修改；class若为字符串，将使用addClass为列加入一个类，若为数组，将直接加入CSS中；properties 设置单元格属性。

setGridParam

object

jqGrid对象

设置一个特定的参数。

有些参数需trigger("reloadGrid")才能生效。注意这个方法可以覆盖事件。名称（name:value对）为选项数组中的名称。 选项信息参见options.

setGridHeight

new_height

jqGrid对象

动态设置网格高度。只能对单元格的高度进行设置而不是网格。new_height 可以是像素、百分比或auto。

setGridWidth

new_width,

shrink

jqGrid对象

动态设置网格宽度。new_width 为新宽度的像素值；

shrink（true或false）作用同shrinkToFit（见options）。若不设置，则使用shrinkToFit设置。

setLabel

colname,

data,

class,

properties

jqGrid对象

设置指定列标题文字、属性和类：

colname 为列名，可以是从0开始的列索引；

data 为标题文字，为空则不修改；

class 若为字符串，则为类名，若为数组，则直接写入CSS；

properties 为标题文字的属性。

setRowData

rowid,

data,

cssprop

成功返回true，否则返回false

更新rowid指定行的数据（使用数组）。

Data数组的格式为: {name1:value1,name2: value2…}。name为colModel中描述的名称，value为新值。cssprop若为字符串，将使用addClass为行添加类；若为数组对象，则直接加入CSS中。将data设置为false的情况下，可设置属性和类名

setSelection

rowid,

onselectrow

jqGrid对象

选择或反选id = rowid指定的行。若onselectrow设置为true (缺省) 则触发onSelectRow事件，否则不触发。

showCol

colname

jqGrid对象

显示colname 指定的列。若colname为字符串，只显示指定的列，若colname为数组 ["name1","name2"] 则显示name1和name2列，name必须是colModel中的名称。宽度不变。

trigger("reloadGrid")

none

none

按当前设置重新加载网格。若datatype为xml或json，将从服务器重新请求数据。此方法适用于一个已建立的网格。注意不会改变表头，也就是说改变colModel将没有作用。你可用gridUnload，使用新colModel来重新加载。

updateColumns

none

none

在拖拽表格时，同步网格宽度。用法：

var mygrid=jQuery("#grid_id")[0];

mygrid.updateColumns();

jqgrid 事件说明的更多相关文章

  1. jqGrid 事件

    jqGrid 事件 使用方法 var lastSel; jQuery("#gridid").jqGrid({ ... onSelectRow: function(id){ if(i ...

  2. 【Jquery系列】JqGrid参数详解

    1   概述 本篇文章主要与大家分享JqGrid插件参数问题. 2   参数详解 2.1 初始化参数 2.2  ColModel参数 3   json数据 jqGrid可支持的数据类型:xml.jso ...

  3. jqGrid 中文配置 - grid.locale-cn.js 多国语言

    中文配置如下:多国语言(demo 内有官方下载连接 ): jqGrid 表格插件中文 grid.locale-cn.js 代码如下: ;(function ($) { /** * jqGrid Eng ...

  4. jqgrid 基础应用

    jqgrid 是一个在jquery基础上做的一个表格插件,以ajax的方式和服务器端通信. 一个jqgrid的基础示例(基础参数说明)如下: $("#jqGrid").jqGrid ...

  5. JNI详解---从不懂到理解

    转载:https://blog.csdn.net/hui12581/article/details/44832651 Chap1:JNI完全手册... 3 Chap2:JNI-百度百科... 11 C ...

  6. Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  7. [转]jqGrid 属性、事件全集

    本文转自:http://blog.csdn.net/rosanu_blog/article/details/8334070 以下是jqGrid 最常用的属性和事件,经过一段时间的整理,终于弄的差不多了 ...

  8. 给Jqgrid添加横向滚动条，实现点击行数据，触发事件。

    function reloadNoKitScheduleGridData() { $("#noKittingScheduleList").jqGrid({ url: ". ...

  9. jqgrid 谈谈给表格设置列头事件、行事件、内容事件

    往往我们需要给显示的jqgrid表格赋予事件功能,比如:列头事件.行事件.内容事件.需要的效果可能如下: 如你所见,以上的超链接和按钮均是绑定的事件.那分别如何实现这些事件的绑定呢? 一.行事件 行事 ...

随机推荐

  1. Java8 对多个异步任务进行流水线操作(笔记)

    现在我们要对商店商品进行折扣服务.每个折扣代码对应不同的折扣率,使用一个枚举变量Discount.Code来实现这一想法,具体代码如下所示. 以枚举类型定义的折扣代码 /** * 折扣服务api * ...

  2. Request.Cookies使用方法分析

    本文章介绍了Request.Cookies的基本的语法和使用方法. 而且通过演示样例分析了Request.Cookies的使用过程. Request.Cookies方法能够检索Cookies 集合中的 ...

  3. Django——如何处理请求（URL配置和视图）

    URLconfig—— 为了绑定视图函数和URL,我们使用URLconf. URLconf 就像是 Django 所支撑网站的目录. 它的本质是 URL 模式以及要为该 URL 模式调用的视图函数之间 ...

  4. hdu1509（Windows Message Queue） 优先队列

    点击打开链接 Problem Description Message queue is the basic fundamental of windows system. For each proces ...

  5. Oculus rift DK2 新手使用设置

    为了获得更好的3D沉浸感体验,降低使用晕眩的可能性,使用DK2前,一定要针对使用者自身对DK2进行正确的设置.下面解释一下配置面板的一些参数和意义: Eye Relief滑竿应该和你的DK2两侧的调节 ...

  6. detach与remove区别，以及detach保留被删除的元素数据，使用

    detach() 会保留所有绑定的事件.附加的数据,这一点与 remove() 不同. remove掉元素后,元素再也找不回了.但是detach还能找回来,还能保留下来. 实现方式如下代码: < ...

  7. oracle 创建一个用户,并且设定只能访问指定的对象

    出处:http://www.cnblogs.com/BetterWF/archive/2012/07/03/2574416.html 今天在开发接口时候,需要给接口开发公司提供一个ORACLE 用户, ...

  8. VUE入门实例，模版组件用法

    这里每一个例子可以直接拷进body运行. 本系列为学习记录,并非大神教学案例. 仅仅整理用法,至于VUE的原理,设计模式等等暂不讨论,文中如有不对,还请大家帮忙指正,万分感激. 下一篇会写父子组件交互 ...

  9. mongo aggregate

    https://cnodejs.org/topic/59264f62855efbac2cf7a2f3 背景 现有1000条学生记录,结构如下: { name:String,//名称 clazz:{ty ...

  10. rxjs1

    <li *ngFor="let fruit of fruitsList; let i = index;">{{i}}-{{fruit.name}}-{{fruit.pr ...