5、jqGrid 3.6.2 中文文档——BasicGrid(3)http://blog.csdn.net/homez/archive/2010/07/29/5773675.aspx

 

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();

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值