Jqgrid参数表
2013-05-01 23:37
260 查看
一、Jqgrid基本参数
二、服务器端文件
三、Options(选项)
四、colModel属性
下面按字母顺序列出colModel可用的属性。唯一需要的是属性的名称。可用getColProp和setColProp获取或设置colModel的属性(方法见methods),但name、width、resizable、label 不可改变。
五、事件(event)
事件的执行顺序:
beforeRequest
loadBeforeSend
serializeGridData
loadError(如果有错误,事件5和6不执行,没有错误,4不执行,执行5和6)
gridComplete
loadComplete
六、方法(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 XHTML1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>My FirstGrid</title>
<link rel="stylesheet"type="text/css" media="screen"
href="css/ui-lightness/jquery-ui-1.7.1.custom.css"/>
<linkrel="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>
<scripttype="text/javascript">
jQuery.jgrid.no_legacy_api= true;
</script>
<scriptsrc="js/jquery.jqGrid.min.js"type="text/javascript"></script>
</head>
<body>
...
</body>
</html>
请注意调用:
<scripttype="text/javascript">
jQuery.jgrid.no_legacy_api= true;
</script>
此行请在语言文件后,jqGrid的JS文件前
绿色的方法名要求特殊的程序。见方法的描述和例程
七、导航栏参数
add boolean 是否启用新增功能,当点击按钮时会触发editGridRow事件 true
addicon string 给新增功能设置图标,只有UI theme里的图标才可以使用 ui-icon-plus
addtext string 新增按钮上的文字 空
addtitle string 当鼠标移到新增按钮上时显示的提示 新增一行
alertcap string 当我们edit,delete or view一行记录时出现的提示信息 警告
alerttext string 当edit,delete or view一行记录时的文本提示 请选择一行记录
closeOnEscape boolean 是否可以使用esc键关闭对话框 true
del boolean 是否启用删除功能,启用时会触发事件delGridRow true
delicon string 设置删除按钮的图标,只有UI theme里的图标才可以使用 ui-icon-trash
deltext string 设置到删除按钮上的文字信息 空
deltitle string 当鼠标移到删除按钮上时出现的提示 删除锁选择的行
edit boolean 是否启用可编辑功能,当编辑时会触发事件editGridRow true
editicon string 设置编辑按钮的图标,只有UI theme里的图标才可以使用 ui-icon-pencil
edittext string 编辑按钮上文字 空
edittitle string 当鼠标移到编辑按钮上出现的提示信息 编辑所选择的行
position string 定义按钮位置,可选值left, center and right. left
refresh boolean 是否启用刷新按钮,当点击刷新按钮时会触发trigger(“reloadGrid”)事件,而且会清空搜索条件值 true
refreshicon string 设置刷新图标,只有UI theme里的图标才可以使用 ui-icon-refresh
refreshtext string 刷新按钮上文字信息 空
refreshtitle string 当鼠标移到刷新按钮上的提示信息 重新加载
refreshstate string 指明表格如何刷新。firstpage:从第一页开始刷新;current:只刷新当前页内容 firstpage
afterRefresh function 当点击刷新按钮之后触发此事件 null
search boolean 是否启用搜索按钮,会触发searchGrid 事件 true
searchhicon string 设置搜索按钮的图标,只有UI theme里的图标才可以使用 ui-icon-search
searchtext string 搜索按钮上的文字 空
searchtitle string 当鼠标移到搜索按钮上的提示信息 搜索
view boolean 是否启用查看按钮,会触发事件viewGridRow false
viewicon string 设置查看按钮的图标,只有UI theme里的图标才可以使用 ui-icon-document
viewtext string 查看按钮上文字 空
viewtitle string 当鼠标移到查看按钮上的提示信息 查看所选记录
addfunc string 覆盖原来的增加方法
editfunc string 覆盖原来的编辑方法
delfunc string 覆盖原来的删除方法
jqGrid的通用方法和设置
这些方法并不和jqGrid对象绑定,可以随意使用:
jQuery.jgrid.jqGridFunction( parameter1,...parameterN );
jqGrid的方法
属性 | 描述 |
url | 这里告诉我们从哪里得到数据。通常这是个服务器端的文件,该文件链接数据库并返回适当的数据,用来填充表格。 |
datatype | 这里告诉从服务器返回用与构建表格的数据的类型。例子中告诉表格服务器返回的数据时XML数据。当然可以是其他数据,见API Methods |
mtype | 这里告诉如何调用ajax:GET或POST。例子中我们使用GET从服务器端返回数据 |
colNames | 这是一个定义列名的数组。定义表头的文本,以逗号分隔。 |
colModel | 这是列模型数组。这是表格最重要的部分。在此只解释例子中的项目,全部的信息见colModelAPI. Name为列名。此列名不必是数据库的列名,后面我们将看到如何对应数据; Index传递给服务器如何排序(可用列号代替)。通常是服务器端用于排序的数据表列名(列表);Width列宽(pixels);align列的对齐方式;sortable决定此列是否允许排序,若为false,点击此列表头将不起作用。 |
pager | 定义数据浏览导航分页条。这必须是一个有效的html元素;在例子中,我们定义的是id为pager的div元素。导航层可以放在任何地方。 |
rowNum | 设置表格中显示多少条记录。此参数通过url出递给服务器用于返回数据。 |
rowList | 用于构造select框选项的数组。此select框在分页条中,用于客户选择表格显示记录的条数。当改变后,此参数将替换url中的rowNum参数。 |
sortname | 设置初始排序列。可以是列名或列号。此参数通过url供服务器使用。 |
viewrecords | 定义是否在分页条上显示得到的记录总条数。 |
caption | 设置挑个标题。如此参数不设置,标题条将不显示。 |
二、服务器端文件
标记 | 描述 |
rows | 表格的根标记 |
page | 获得的页号 |
total | 获得的总页数 |
records | 获得的总记录数 |
row | 表格的制定行 |
cell | 实际数据。可以使用CDATA,这样我们可以加入图片、链接和选择框。 |
三、Options(选项)
属性 | 类型 | 描述 | 缺省值 | 运行时 |
ajaxGridOptions | object | 此项用于设置当表格设置获得数据时,ajax的全局属性,注意此项可能覆盖所有当前的ajax设置(包括e 4000 rror, complete和beforeSend事件)。 | empty | 可写 |
ajaxSelectOptions | object | 此项用于设置在editoptions或searchoptions对象中通过dataUrl选择元素时, ajax的全局属性。 | empty | 可写 |
altclass | string | 交替行的类。此项仅当altRows设置为true时有效。 | ui-priority-secondary | 可写 |
altRows | boolean | 设置为交替行表格 | false | 可写 |
autoencode | boolean | 当设置为true时,对来自服务器的数据和提交数据进行encodes编码。如<将被转换为< | false | 可写 |
autowidth | boolean | 当设置为true时,表格宽度将自动匹配到父元素的宽度。这个匹配只在表格建立时进行,为了使表格在父元素宽度变化时也随之变化,必须运用客户代码来设置setGridWidth属性 | false | 只读 |
caption | string | 表格的标题。显示在Header上。若为空号将不会显示。 | empty | |
cellLayout | integer | 该属性确定单元格的padding + border宽度。通常不修改该属性,但若表格的CSS中改变了td元素,该属性需要修改。缺省值5表示paddingLef(2) + paddingRight(2) + borderLeft(1)=5 | 5 | 只读 |
cellEdit | boolean | 是否允许单元格编辑。更多信息参见Cell Editing | false | 可写 |
cellsubmit | string | 确定单元格内容保存方式是remote还是clientArray。更多信息参见Cell Editing | 'remote' | 可写 |
cellurl | string | 单元格保存的url。更多信息参见Cell Editing | null | 可写 |
colModel | array | 描述列参数数组。这是表格最重要的部分,详见colModel API. | 空 | 只读 |
colNames | array | 列名称数组。该名称将在Header中显示。名称以逗号分隔,数量应与colModel 数组数量相等 | 空 | 只读 |
datastr | string | 当datatype被设置为xmlstring或jsonstring时,为数据串。 | null | 可写 |
datatype | string | 定义表格希望获得的数据的类型,有效值有: Xml —xml数据; xmlstring—xml字符串; json—JSON数据 jsonstring—JSON字符串 local—客户端数据(数组) javascript—javascript数据 function—函数返回数据 参见colModelAPI和Retrieve Data | xml | 可写 |
deselectAfterSort | boolean | 只适用于当datatype为local时。当一个排序被应用时取消当前选定行。 | true | 可写 |
direction | string | 表格中的书写方向。“ltr”从左到右(缺省值),“rtl”从右到左 | ltr | 只读 |
editurl | string | 定义行内编辑地址URL | null | 可写 |
emptyrecords | string | 当返回(或当前)数量为零时显示的信息此项只用当viewrecords 设置为true时才有效。 | | 可写 |
ExpandColClick | boolean | 为true时,点击展开行的文字,treeGrid展开或收拢 | true | 只读 |
ExpandColumn | string | 指定用于张开treeGrid的列(名称来自colModel),未设置即用第一列。此项只有当treeGrid为true时有效. | null | 只读 |
footerrow | boolean | 如果设置为true时,将生成一个表脚行,列数等于colModel | false | 只读 |
forceFit | boolean | 如果设置为true,改变列宽,相邻列也将调整以适应整体表格,将不会出现水平滚动条。 | false | 只读 |
gridstate | string | 表格的当前状态。有visible或hidden | visible | 只读 |
gridview | boolean | 设置为true将提高5~10倍的显示速度。但不能再使用treeGrid, subGrid, 或afterInsertRow事件 | false | 可写 |
height | mixed | 表格高度。可为数值、百分比或auto | 150 | |
hiddengrid | boolean | 如果设置为true,表格开始被隐藏,数据不被装入,只显示标题。当第一次点击显示/隐藏按钮显示表格,数据从服务器装入。 | false | 只读 |
hidegrid | boolean | 是否允许显示/隐藏按钮可用。只有标题不为空时可用。 | true | 只读 |
hoverrows | boolean | 表行是否有鼠标悬停效果 | false | 可写 |
jsonReader | array | JSON数据结构数组,详情见Retrieving Data JSON Data | | 只读 |
lastpage | integer | 请求返回的总页数 | 0 | 只读 |
lastsort | integer | 排序的列号(0开始) | 0 | 只读 |
loadonce | boolean | 设置为true时,表格只一次读取服务器数据(使用适当datatype),之后,datatype自动变为local,所有进一步操作都在客户端完成,pager功能(若存在)将失效。 | false | 只读 |
loadtext | string | 数据请求和排序时显示的文本 | Loading… | 只读 |
loadui | string | 此项控制ajax进程进行时的动作。Disable—取消jqGrid的进程指示,可使用自定义的指示。 enable (缺省)—表格中间显示loading。 block –显示“Loading”信息,禁用页面上的所有功能,直到数据装入完成。 | enable | 可写 |
mtype | string | 定义提交类型POST或GET | GET | 可写 |
multikey | string | 此属性只有当multiselect为true时有效,定义多选时的组合键,可选值有:shiftKey,altKey,ctrlKey | empty | 可写 |
multiboxonly | boolean | 此属性只有当multiselect为true时有效,. Multiboxonly设置为true时,只有点击checkbox时该行才被选中,点击其他列,将清除当前行的选中。 | false | 可写 |
multiselect | boolean | 此属性设为true时启用多行选择 | false | 只读 |
multiselectWidth | integer | 若multiselect为true时,定义多选列的宽度。 | 20 | 只读 |
page | integer | 设置请求初始页的数量,此参数通过URL从服务器接受数据 | 1 | 可写 |
pager | mixed | 定义记录浏览导航条。必须是一个HTML元素。详见Pager | empty | 只读 |
pagerpos | string | 定义表格浏览导航条的位置,缺省情况下建立一个包括3部分的导航条:页码,导航按钮和记录信息。 | center | 只读 |
pgbuttons | boolean | 定义导航激活时导航按钮是否显示。 | true | 只读 |
pginput | boolean | 定义导航栏是否有页码输入框。 | true | 只读 |
pgtext | string | 当前页信息。第一个量为当前页,第二个量为总页数。 | | 可写 |
prmNames | array | 缺省情况下prmNames: { page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 以POST方式发送到服务器,字段为: page,rows,sidx,sord,search,nd 例如要将sidx改为mysort,可写成: prmNames: {sort: “mysort”}. 这样提交到服务器的字符串就变为: page=1&rows=10&mysort=myindex&sord=asc 若将一些参数设为null,这些参数将不再发往服务器。例如prmNames: { nd:null}则nd参数将不被发送。 Npage参数参见scroll option. | none | 可写 |
postData | array | 此数组能直接传递到url。这个数组可使用这种形式{name1:value1…}。 详见API操作方法 | empty | 可写 |
reccount | integer | 只读属性。定义表格显示的行数。切勿与records混淆。 | 0 | 只读 |
recordpos | string | 定义页中记录信息的位置,可以是left,center,right。 | right | 只读 |
records | integer | 只读属性。定义从请求中获得的记录数 | none | 只读 |
recordtext | string | 可在页面上显示的提示信息,此文字只在viewrecords 为true是有效,并且当记录总数大于0时才显示。 此文字中{}中的内容表示: {0} 该页显示的第一个记录的记录号 {1} 该页显示的最后一个记录的记录号 {2} 获得的记录总数 | | 可写 |
resizeclass | string | 列可变大小时的类 | empty | 只读 |
rowList | array[] | 用于改变显示行数的下拉列表框的元素数组。 | empty | 只读 |
rownumbers | boolean | 若此属性为true,表格左侧将添加一用于显示行数(从1开始)的列。此时colModel自动扩展出一个名为rn的元素。所以在colModel中不要定义rn。 | false | 只读 |
rowNum | integer | 表格中可见的记录数。此参数通过url传递给服务器供检索数据用。注意:若此参数设置为10,而服务器返回15条记录,将只有10条记录被装入。若此参数被设置为-1,则此检查失效 | 20 | 可写 |
rownumWidth | integer | 当rownumbers为true时,定义显示行数的列的宽度。 | 25 | 只读 |
savedRow | array | 只读属性。用于行编辑和单元格编辑保存数据之前。详见Cell editing和Inline editing. | empty | 只读 |
searchdata | array {} | 此参数用“名称:值”对包含搜索条件 | empty | 可写 |
scroll | boolean or integer | 创建动态滚动表格。 当设为启用时,pager被禁用,可使用垂直滚动条来装入数据。 当设置为true时,表格总是保留从开始到最近访问的数据。 当设为只时(如1),表格将保持可见行。这使我们能在指定点加载数据而不必担心内存泄露。此外,我们可使用可选的 npage (参见 prmNames数组).如果我们在prmNames设置了npage,表格将申请多页,否则,它将执行多个gets。 | false | 只读 |
scrollOffset | integer | 定义垂直滚动条的宽度。 | 18 | 只读 |
scrollrows | boolean | 该项启用时,用setSelection选定一行,表格将滚动到被选行可见。 | false | 可写 |
selarrrow | array-[] | 只读属性。当multiselect为true时,包含当前选定的行。此为一维数组,值为表格中选定行的ID。 | empty | 只读 |
selrow | string | 只读属性。内容是最后选定行的ID。如火应用了排序或pagging,该值为null。 | null | 只读 |
shrinkToFit | boolean | 该项描述计算每列相对于表格宽度的初始宽度的类型。 若为true,并且设置了列宽度,则每列的宽度根据定义宽度缩放。 若为false,并且设置了列宽度,表格宽度为设置宽度,列宽度不会重新计算,使用colModel中定义的值 | true | 只读 |
sortable | boolean | 启用此项,允许使用鼠标重新排序列。因为此项使用jQuery UI的排序组件,必须确保页面头部成功加载了相关组件及grid.jqueryui.js。 | false | 只读 |
sortname | string | 从服务器读取XML或JSON数据时初始的排序名,此名被加到URL中。如果此名与colModel中的名称,则列此列将加入排序标志。参见prmNames. | empty | 可写 |
sortorder | string | 从服务器读取XML或JSON数据时初始的排序类型,此类型被加到URL中。参见prnNames。可选值为asc或desc。 | asc | 可写 |
subGrid | boolean | 设置为true,可使用子表格。启用子表格,将在基本表的左边将添加一列,并包含一个“+”图像,用户可以点击扩展行。参见Subgrid | false | 只读 |
subGridModel | array-[] | 该属性用于描述子表格的模式,只有subGrid 为true时有效。它是一个用于描述子表格列的数组。详见Subgrid. | empty | 只读 |
subGridType | mixed | 用于定义子表格装入的数据类型,若不定义,则使用与父表格同样的数据类型。 | null | 可写 |
subGridUrl | string | 该属性用于定义子表格获得数据的URL。行的ID将键入此URL中,若要添加其他参数,可使用subGridModel中的选项。参见Subgrid | empty | 可写 |
subGridWidth | integer | 定义子表格的列宽 | 20 | 只读 |
toolbar | array | 该参数定义表格的工具栏。参数是一个包含两个值的数组,第一个值使工具栏有效,第二个值相对位置(可以是top、bottom、both)。例如:设置toolbar为 [true,”both”],将在表格的头部和底部建立两个工具栏,两个工具栏位两个DIV元素,头部DIV元素的ID为“t_表格ID”,底部DIV元素的ID为“tb_表格ID”。若只有一个工具栏(top或bottom)时,DIV的ID为“t_表格ID”。 | [false,''] | 只读 |
totaltime | integer | 只读参数。用于记录装入XML和JSON数据的时间。 | 0 | 只读 |
treedatatype | mixed | 定义初始数据类型 | null | 只读 |
treeGrid | boolean | 启用(禁用)TreeGrid。详见Tree Grid | false | 只读 |
treeGridModel | string | 定义TreeGrid的方法。可以是nested或adjacency。参见Tree Grid | nested | 只读 |
treeIcons | array | 此数组设置TreeGrid中使用的图标。图标应是UI theme中的有效图标。缺省为 {plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'} | | 只读 |
treeReader | array | 扩展表格的colModel。这里定义的字段将添加到colModel的尾部并隐藏。服务器将返回这些字段的值。详见Tree Grid. | | 只读 |
tree_root_level | numeric | 确定treeGrid相对于根元素的级别。 | 0 | 只读 |
url | string | 文件保存请求的URL | null | 可写 |
userData | array | 此数组保存请求的自定义信息,可随时使用 | empty | 只读 |
userDataOnFooter | boolean | 到为true时, userData直接放置在页脚。 | false | 可写 |
viewrecords | boolean | 是否在浏览导航栏显示记录总数 | false | 只读 |
viewsortcols | array | 定义表头中排序图标的外观和行为。缺省为[false,'vertical',true]。 第一个参数设定是否显示所有定义了排序的列旁显示图标。缺省的false表示只有当前排序列旁的图标显示。设为true可使所有可排序列都显示图标。 第二个参数设定排序图标如何放置。vertical为垂直放置,horizontal为水平放置。 第三个参数设定点击功能。True表示表头点击排序,false表示只点击排序图标排序。若将此参数设为false时,请确保第一个参数为true,否则将无法排序。 | | 只读 |
width | number | 若为设置,表格的宽度为colModel中定义的所有列宽度的总和。 若设置了该项,每列的初始宽度按照shrinkToFit 设置的值 | none | 只读 |
xmlReader | array | 描述预期的XML数据结构的数组。详见Retrieving Data XML Data. | | 只读 |
四、colModel属性
下面按字母顺序列出colModel可用的属性。唯一需要的是属性的名称。可用getColProp和setColProp获取或设置colModel的属性(方法见methods),但name、width、resizable、label 不可改变。
属性 | 类型 | 描述 | 缺省值 |
align | string | 定义表格单元格(非表头)的对齐方式,可取值:left, center, right. | left |
classes | string | 此属性用于定义列的类名,当有多个类名时,用空格间隔,例如:“class1 class2”。在表格的CSS中,有一个预定义的类ui-ellipsis用于定义特定的行 | 空字符串 |
datefmt | string | 日期格式,可用/,-和.。作为间隔符。y、Y、yyyy用于4位年,YY、yy用于2位的月,d、dd用于日期,参见Array Data | Y-m-d |
defval | string | 搜索字段的缺省值,此参数只用于自定义搜索是的初始值。 | empty |
editable | boolean | 定义字段是否可编辑,用于单元格编辑、行编辑和表单模式,参见editing | false |
editoptions | array | 根据edittype参数定义可用的值数组 | Empty数组 |
editrules | array | 设置可编辑字段的补充规则 | Empty数组 |
edittype | string | 定义行编辑和表单模式的编辑类型,可以是text、textarea、select、checkbox、 password、button、image和file。参见editing | text |
fixed | boolean | 若设为true,即使shrinkToFit设置为true,列宽也不允许重新计算。GridWidth方法改变表格宽度时,列宽也不会改变。 | false |
formoptions | array | 定义表单编辑的各种选项,参见Form options | empty |
formatoptions | array | 为特定的列定义格式,详见Formatter | none |
formatter | mixed | 用预定义类(字符串)或自定义函数控制字段的格式,详见Formatter。 | none |
hidedlg | boolean | 若设置为true,该列将不出现在模式对话框中,用户可以此控制列的显示或隐藏,参见Show/Hide Columns. | false |
hidden | boolean | 定义初始化时,列是否隐藏。 | false |
index | string | 通过sidx参数设置排序时的索引名。 | empty string |
jsonmap | string | 定义接收JSON串的JSON映射参见Retrieving Data | none |
key | boolean | 在未从服务器获得ID的情况下,该列可设置为行ID。只有一列可设置该属性,若出现多列,表格只采用将第一个设置了该属性的列,其他列忽略。 | false |
label | string | 当colNames数组为空时,定义此列的标题。若colNames数组和此属性都为空,标题为该列的name属性值。 | none |
name | string | 设置列在表格中的唯一名称,此属性是必须的。或者使用保留字subgrid、cb和rn. | Required |
resizable | boolean | 定义是否可变列宽 | true |
search | boolean | 当使用搜索时,是否可以该列,参见Search Configuration | true |
searchoptions | array | 搜索时定义搜索选项Search Configuration | empty |
sortable | boolean | 定义是否可以排序 | true |
sorttype | string | 当datatype为local时,用于定义排序列类型。可取int/integer(整数)、float/number/currency(小数)、date(日期)、text(文本)参见Array Data | text |
stype | string | 决定搜索时的元素类型。参见Search Configuration | text |
surl | string | 用于Custom Searching和edittype中:select和描述已定义的选择元素的URL | empty string |
width | number | 设置列的初始宽度,可用pixels和百分比 | 150 |
xmlmap | string | 定义获得的XML文件的XML映射。参见Retrieving Data | none |
unformat | function | 编辑是定义单元格的unformat函数,参见Custom Formatter | null |
五、事件(event)
事件 | 参数 | 描述 |
afterInsertRow | Rowid 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字符串)要发给服务器时,可使用该事件。 |
事件的执行顺序:
beforeRequest
loadBeforeSend
serializeGridData
loadError(如果有错误,事件5和6不执行,没有错误,4不执行,执行5和6)
gridComplete
loadComplete
六、方法(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 XHTML1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>My FirstGrid</title>
<link rel="stylesheet"type="text/css" media="screen"
href="css/ui-lightness/jquery-ui-1.7.1.custom.css"/>
<linkrel="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>
<scripttype="text/javascript">
jQuery.jgrid.no_legacy_api= true;
</script>
<scriptsrc="js/jquery.jqGrid.min.js"type="text/javascript"></script>
</head>
<body>
...
</body>
</html>
请注意调用:
<scripttype="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 inoptions 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(); |
七、导航栏参数
add boolean 是否启用新增功能,当点击按钮时会触发editGridRow事件 true
addicon string 给新增功能设置图标,只有UI theme里的图标才可以使用 ui-icon-plus
addtext string 新增按钮上的文字 空
addtitle string 当鼠标移到新增按钮上时显示的提示 新增一行
alertcap string 当我们edit,delete or view一行记录时出现的提示信息 警告
alerttext string 当edit,delete or view一行记录时的文本提示 请选择一行记录
closeOnEscape boolean 是否可以使用esc键关闭对话框 true
del boolean 是否启用删除功能,启用时会触发事件delGridRow true
delicon string 设置删除按钮的图标,只有UI theme里的图标才可以使用 ui-icon-trash
deltext string 设置到删除按钮上的文字信息 空
deltitle string 当鼠标移到删除按钮上时出现的提示 删除锁选择的行
edit boolean 是否启用可编辑功能,当编辑时会触发事件editGridRow true
editicon string 设置编辑按钮的图标,只有UI theme里的图标才可以使用 ui-icon-pencil
edittext string 编辑按钮上文字 空
edittitle string 当鼠标移到编辑按钮上出现的提示信息 编辑所选择的行
position string 定义按钮位置,可选值left, center and right. left
refresh boolean 是否启用刷新按钮,当点击刷新按钮时会触发trigger(“reloadGrid”)事件,而且会清空搜索条件值 true
refreshicon string 设置刷新图标,只有UI theme里的图标才可以使用 ui-icon-refresh
refreshtext string 刷新按钮上文字信息 空
refreshtitle string 当鼠标移到刷新按钮上的提示信息 重新加载
refreshstate string 指明表格如何刷新。firstpage:从第一页开始刷新;current:只刷新当前页内容 firstpage
afterRefresh function 当点击刷新按钮之后触发此事件 null
search boolean 是否启用搜索按钮,会触发searchGrid 事件 true
searchhicon string 设置搜索按钮的图标,只有UI theme里的图标才可以使用 ui-icon-search
searchtext string 搜索按钮上的文字 空
searchtitle string 当鼠标移到搜索按钮上的提示信息 搜索
view boolean 是否启用查看按钮,会触发事件viewGridRow false
viewicon string 设置查看按钮的图标,只有UI theme里的图标才可以使用 ui-icon-document
viewtext string 查看按钮上文字 空
viewtitle string 当鼠标移到查看按钮上的提示信息 查看所选记录
addfunc string 覆盖原来的增加方法
editfunc string 覆盖原来的编辑方法
delfunc string 覆盖原来的删除方法
jqGrid的通用方法和设置
这些方法并不和jqGrid对象绑定,可以随意使用:
jQuery.jgrid.jqGridFunction( parameter1,...parameterN );
函数名 | 参数 | 返回值 | 说明 |
ajaxOptions | 空对象 | none | 这个函数可以改变jqgrid中用到的ajax请求参数,这个函数可以覆盖当前所有ajax请求设置。从3.6版本开始起有3个级别的ajax设置:第一个级别就是在模块中设置ajax请求;第二个级别就是通过此函数设置;第三级别的设置是控制全局ajax请求的设置:jQuery.extend(jQuery.ajax({method specific options}, ajaxOptions, ThirdLevelajaxSettinds));当然我们也可以单独设置ajax的参数 |
jqID | string | 解析后的string | 转义字符串,把两个反斜杠(\\)转化为单个反斜杠(\) |
jgrid.htmlDecode | string | 转换后string | 把转码后的字符串还原 |
jgrid.htmlEncode | string | 编码后的string | 把字符串编码 |
jgrid.format | string | 格式化后string | 简单字符串模板。用法:Example jQuery.jqgformat(“Please enter a value between {0} and {1}.”, 4,result : “Please enter a value between 4 and 8.” |
jgrid.getCellIndex | cell | index | 这个方法是用来修复在ie7里的一个bug |
jgrid.stringToDoc | xmlstring | xmlDoc | 把xmlstring转换为dom对象 |
jgrid.stripHtml | content | new_content | 去掉html标签返回标签中内容 |
jgrid.parse | jsonstring | 对象 | 把一个jsonstring转换为json对象 |
方法名 | 参数 | 返回值 | 说明 |
filterGrid | grid_id,params | HTML对象 | 构造jqGrid的查询界面。grid_id:表格id;params:参数 |
filterToolbar | params | jqGrid对象 | 同上。不同的是搜索输入框在header层下方 |
getColProp | colname | array | 返回指定列的属性集合。name为colModel中名称 |
GridDestroy | grid_id | boolean | 从dom上删除此grid |
GridUnload | grid_id | boolean | 跟GridDestroy不同的是table对象跟pager对象并不会被删除,以便下次使用 |
setGridState | state | jqGrid对象 | 设置grid的状态,显示或者隐藏。这个方法不会触发onHeaderClick事件。 |
setColProp | colname, properties | jqGrid对象 | 设置新的属性,对于动态改变列属性是非常有用的,但是有些属性的修改并不会起效。用法:jQuery(”#grid_id”).setColProp('colname',{editoptions:{value:“True:False”}}); |
sortGrid | colname, reload | jqGrid对象 | 按指定列进行排序。效果同setGridParam({sortname:'myname'}).trigger('reloadGrid').如果reload为true则会重新加载数据 |
updateGridRows | data,rowidname,jsonreader | boolean | 修改表格中某行的数据,data数据格式:[{name:value,name1:value1…}, {name:value,name2:value2…}],name为colModel中的名称;rowidname某行的名称。jsonreader:boolean值,默认false。如果为true则是定义数据的格式,data的值并不是name:value形式而只是value |
相关文章推荐
- 我和小美的撸码日记--基于MVC+Jqgrid的.Net快速开发框架
- jqGrid与Struts2的结合应用(八) —— 奇妙的subGrid子表格
- jqgrid之冻结列(单元格编辑模式下)
- jqgrid 使用入门
- jqGrid
- dwz之jqgrid请求重复提交bug修复
- jqgrid编辑
- jqgrid-parmNames和jsonReader的使用,以及json的返回格式
- jqgrid 自定义格式化 与反格式化
- jqGrid 树形表格多选
- 修复jqgrid setgridparam postdata 的多次查询条件累加
- jqGrid colModel 中colModel 后台生成传入前端,实现jqGrid 动态列
- 将数据库中大量数据以JSON格式传给JQGrid MVC4+JQGrid
- JqGrid使用经验
- JSTL标签 封装jqGrid表格插件
- jqGrid增删改查显示——联动下拉框+nodejs后台
- 使用mybatis+jqgrid过程遇到的问题
- jqgrid--按搜索字段进行搜索并重新加载表格
- jqGrid的时间格式化问题
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引