1.1.1. colModel设定各列的参数
jQuery("#grid").jqGrid({ ... colModel: [ { name: 'FInterID', index: 'FInterID', width: 80, sortable: true, hidden: true }, { name: 'FEntryID', index: 'FEntryID', width: 80, sortable: true, hidden: true }], ... }); | ||||
属性: | ||||
名称 | 值类型 | 说明 | 实列 | |
name | string | 为Grid中的每个列设置唯一的名称,这是一个必需选项,其中保留字包括subgrid、cb、rn | name: 'FInterID', | |
index | string | 设置排序时所使用的索引名称,这个index名称会作为sidx参数(prmNames中设置的)传递到Server。 | index: 'FInterID', | |
label | string | 当jqGrid的colNames选项数组为空时,为各列指定题头。如果colNames和此项都为空时,则name选项值会成为题头 | ||
width | int | 设置列的宽度,目前只能接受以px为单位的数值,默认为150 | width: 80, | |
sortable | bool | 设置该列是否可以排序,默认为true | sortable: true, | |
search | bool | 设置该列是否可以被列为搜索条件,默认为true | search: true, | |
resizable | bool | 设置列是否可以变更尺寸,默认为true。 | resizable: true, | |
hidden | bool | 设置此列初始化时是否为隐藏状态,默认为false | hidden: false, | |
align | string | 显示文字的方式,值为: left(默认值),center,right | align: "right", | |
formatter | string | 预设类型或用来格式化该列的自定义函数名。常用预设格式有:integer、date、currency、number等,(具体参见文档 )。 | formatter: 'number', | |
formatoptions | object | 格式化显示列数据 | formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 4, prefix: "" } | |
summaryType | string | 如果汇总页脚行启用,在列模式下设置汇总字段的类型 值列表: sum(求合), count(汇总), avg(平均值), min, max | summaryType:'sum' | |
string | 此选项作为模板可用于在总结页脚行。默认情况下,它的价值被定义为{0} - 这意味着,这将打印的汇总值。该参数可以包含任何有效的HTML代码。详细信息 | summaryTpl: '({0}) 小计:' | ||
classes | string | 设置列的css。多个class之间用空格分隔,如:'class1 class2' 。表格默认的css属性是ui-ellipsis | ||
datefmt | string | 对日期列进行格式化。”/”, ”-”, and ”.”都是有效的日期分隔符。y,Y,yyyy 年YY, yy 月m,mm for monthsd,dd 日. ISO Date (Y-m-d) | ||
defval | string | 查询字段的默认值 | ||
editable | boolean | 单元格是否可编辑.默认值:false | ||
editoptions | array | 对列进行编辑时设置的一些属性 | ||
editrules | array | 对于可编辑单元格的一些额外属性设置 | ||
edittype | string | 可以编辑的类型。可选值:text, textarea, select, checkbox, password, button, image and file, custom | ||
fixed | boolean | 列宽度是否要固定不可变.默认值:false | ||
formoptions | array | 对于form进行编辑时的属性设置 | ||
formatoptions | array | 对某些列进行格式化的设置 | ||
formatter | mixed | 对列进行格式化时设置的函数名或者类型 | ||
hidedlg | boolean | 是否显示或者隐藏此列.默认值:false | ||
index | string | 当排序时定义排序字段名称的索引,参数名为sidx | ||
jsonmap | string | 定义了返回的json数据映射 | ||
key | boolean | 当从服务器端返回的数据中没有id时,将此作为唯一rowid使用,默认只能有一个id属性.默认值:false | ||
search | boolean | 在搜索模式下,定义此列是否可以作为搜索列.默认值:true | ||
searchoptions | array | 设置搜索参数 | ||
sorttype | string | 用在当datatype为local时,定义搜索列的类型,可选值:int/integer - 对integer排序float/number/currency - 排序数字date - 排序日期text - 排序文本.默认值:text | ||
stype | string | 定义搜索元素的类型.默认值:text | ||
surl | string | 搜索数据时的url | ||
cellattr | function | 此功能属性添加到细胞的过程中创造的数据 - 即动态。例如表格单元格的所有有效的属性,可以使用或与不同性质的风格属性。函数应该返回字符串。传递给这个函数的参数是:ROWID - 行ID | null | |
firstsortorder | string | 如果设置为ASC或DESC,将被列在这个方向排序列第一sort.Subsequent各种像往常一样将切换 | null | |
hidden | boolean | 定义如果此列是隐藏在初始化。 | false | |
template | object | 设置有效的colModel属性。如果你想在方便的列模型覆盖了很多的默认值,可以使用此选项。在网格选项,请参阅cmTemplate | null | |
title | boolean | 如果此选项是假的标题是不会显示在该列,当我们悬停用鼠标一个细胞 | true | |
xmlmap | string | 定义XML映射进来的XML文件中列。使用一个CCS规范检索数据 | none | |
unformat | function | “UNFORMAT”编辑请参阅自定义格式化的单元格的值时的自定义功能。 (UNFORMAT也称为排序操作期间由UNFORMAT返回的值是在排序过程中比较值。) | null | |
viewable | boolean | 只有当viewGridRow方法被激活,此选项才有效。当选项设置为false的列是不会出现在视图的形式 | true |
1.1.2. groupingView 分组设置
1.1.3. groupingView 分组设置
1.1.4. groupingView 分组设置
jQuery("#grid").jqGrid({ ... groupingView : { groupField : ['name'], groupDataSorted : true } ... }); | ||||
属性: | ||||
名称 | 值类型 | 说明 | 实列 | |
groupField | Array[] | colModel定义的名称。实现分组的Key,级别从左至右,目前支持1级 | groupField: ['name'], | |
groupOrder | Array[] | 定义组级别的初始排序顺序。默认值是ASC。 | groupOrder: ['asc'],
| |
groupText | Array[] | 将显示在网格中的分组头文字。默认情况下,如果定义的值{0}这意味着组值名称将显示。如果指定{1},那么将显示分组行总数。它是可以在这里设置任何有效的HTML内容。 | groupText: ['<b>{0} - {1}条记录</b>'], | |
groupColumnShow | Array[] | 显示/隐藏列,如果启用了分组,我们将此值设置为true | groupColumnShow: [true], | |
groupSummary | Array[] | 启用或禁用当前组的水平(页脚)行的总结。如果设置了分组,该组的默认值是false。 | groupSummary: [true], | |
showSummaryOnHide | bool | 当折叠组时,是否显示或隐藏小计(页脚)行, | showSummaryOnHide: true, | |
groupDataSorted | bool | 如果这个参数设置为true,将发送到服务器的额外的参数,以告诉他对数据进行排序。 | groupDataSorted: true, | |
groupCollapse | bool | 初始化时是否显示或隐藏组的详细行 | groupCollapse: false, | |
plusicon | string | 收缩时的图标样式 | ui-icon-circlesmall-plus | |
minusicon | string | 展开时的图标样式 | ui-icon-circlesmall-minus |
2. 方法Methods
2.1. addRowData 编辑行
jQuery("#grid_id"). addRowData(rowid,rdata,pos,src); 实例: $("#gvBillEntry").addRowData(rowid, {}, " first"); | ||||
属性: | ||||
名称 | 值类型 | 说明 | 实列 | |
rowid | int | 该行的ID编号 | ||
rdata | bool | 新增时行初始化数据。 | ||
pos | function | 新增类型:pos可以为[first(插入顶行),last(插入尾行默认值),before,after],为后两者是需要指定相对的行ID | Pos: last | |
src | string | 如果pos: 弹出的新增页面 |
2.2. editRow 编辑行
jQuery("#grid_id").editRow(rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc, errorfunc, afterrestorefunc); 实例: jQuery('# jqgajax').editRow(id, true); jQuery("#grid_id").jqGrid('editRow', rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc, errorfunc, afterrestorefunc); 实例:jQuery('#jqgajax').jqGrid('editRow', mydata3[i].id, true, pickdates); | ||||
属性: | ||||
名称 | 值类型 | 说明 | 实列 | |
rowid | int | 该行的ID编号 | ||
keys | bool | 设置为true时,我们可以使用[Enter]键来保存该行[Esc]键取消编辑。 | ||
oneditfunc | function | 成功访问编辑行之前,允许用户输入字段的访问后,火灾。行的ID作为参数传递给这个函数的一个参数。 | ||
succesfunc | string | 如果定义,这个函数被调用后,立即请求成功。此功能是通过从服务器返回的数据。根据从服务器的数据,这个函数应该返回true或false。 | ||
url | string | 如果定义,该参数将替换从选项数组editurl参数。如果设置为“clientArray”,数据是不向服务器发送,而是保存网格(大概后手动储蓄)。 | ||
extraparam | string | 名称类型的数组:值。当设置这些值一起发布到服务器的其他值。 | ||
aftersavefunc | string | 如果定义,该函数被调用后的数据保存到服务器。传递给这个函数的参数的rowid和从服务器请求的响应。事件被称为太URL时设置为“clientArray”。 | ||
errorfunc | string | 如果定义,该函数被调用后的数据保存到服务器。传递给这个函数的参数的rowid和从服务器请求的响应 | ||
afterrestorefunc | string | 如果定义,在restoreRow调用这个函数,(如果该行没有成功保存)后恢复行方法。这个函数,我们通过ROWID |
3. 事件
事件: | |||
名称 | 参数 | 说明 | |
afterInsertRow | Rowid,rowdata,rowelem | 当插入每行时触发。rowid插入当前行的id;rowdata插入行的数据,格式为name: value,name为colModel中的名字 | |
beforeRequest | none | 向服务器端发起请求之前触发此事件但如果datatype是一个function时例外 | |
beforeSelectRow | rowid, e | 当用户点击当前行在未选择此行时触发。rowid:此行id;e:事件对象。返回值为ture或者false。如果返回true则选择完成,如果返回false则不会选择此行也不会触发其他事件 | |
gridComplete | none | 当表格所有数据都加载完成而且其他的处理也都完成时触发此事件,排序,翻页同样也会触发此事件 | |
loadComplete | xhr | 当从服务器返回响应时执行,xhr:XMLHttpRequest 对象 | |
loadError | xhr,status,error | 如果请求服务器失败则调用此方法。xhr:XMLHttpRequest 对象;satus:错误类型,字符串类型;error:exception对象 | |
onCellSelect | rowid,iCol,cellcontent,e | 当点击单元格时触发。rowid:当前行id;iCol:当前单元格索引;cellContent:当前单元格内容;e:event对象 | |
ondblClickRow | rowid,iRow,iCol,e | 双击行时触发。rowid:当前行id;iRow:当前行索引位置;iCol:当前单元格位置索引;e:event对象 | |
onHeaderClick | gridstate | 当点击显示/隐藏表格的那个按钮时触发;gridstate:表格状态,可选值:visible or hidden | |
onPaging | pgButton | 点击翻页按钮填充数据之前触发此事件,同样当输入页码跳转页面时也会触发此事件 | |
onRightClickRow | rowid,iRow,iCol,e | 在行上右击鼠标时触发此事件。rowid:当前行id;iRow:当前行位置索引;iCol:当前单元格位置索引;e:event对象。此事件不支持opera游览器 | |
onSelectAll | aRowids,status | multiselect为ture,且点击头部的checkbox时才会触发此事件。aRowids:所有选中行的id集合,为一个数组。status:boolean变量说明checkbox的选择状态,true选中false不选中。无论checkbox是否选择,aRowids始终有值 | |
onSelectRow | rowid,status | 当选择行时触发此事件。rowid:当前行id;status:选择状态,当multiselect 为true时此参数才可用 | |
onSortCol | index,iCol,sortorder | 当点击排序列但是数据还未进行变化时触发此事件。index:name在colModel中位置索引;iCol:当前单元格位置索引;sortorder:排序状态:desc或者asc | |
resizeStart | event, index | 当开始改变一个列宽度时触发此事件。event:event对象;index:当前列在colModel中位置索引 | |
resizeStop | newwidth, index | 当列宽度改变之后触发此事件。newwidth:列改变后的宽度;index:当前列在colModel中的位置索引 | |
serializeGridData | postData | 向服务器发起请求时会把数据进行序列化,用户自定义数据也可以被提交到服务器端 |
4. 方法
方法: | ||||
名称 | 返回值 | 参数 | 说明 | |
addJSONData | none | data | 使用传来的data数据填充表格。 使用方法:var mygrid = jQuery(”#”+grid_id)[0];var myjsongrid = eval(”(”+jsonresponse.responseText+”)”); mygrid.addJSONData(myjsongrid); myjsongrid = null; jsonresponse =null; | |
addRowData | Bool(成功true,否则false) | rowid,data, position, srcrowid | 根据参数插入一行新的数据,rowid为新行的id,data为新行的数据,position为新增行的位置,srcrowid为新增行的参考位置。 data数据格式:{name1:value1,name2: value2…} name为在colModel中指定的名称 | |
addXMLData | none | data | 根据传来的数据填充表格。 使用方法:var mygrid = jQuery(”#”+grid_id)[0]; mygrid.addXmlData(xmlresponse.responseXML); | |
clearGridData | jqGrid对象 | clearfooter | 清除表格当前加载的数据。如果clearfooter为true时则此方法删除表格最后一行的数据 | |
delRowData | Bool(成功true,否则false) | rowid | 根据rowid删除行,但不会从服务器端删除数据 | |
footerData | jgGrid对象 | action,data, format | 设置或者取得底部数据。action:“get”或者“set”,默认为“get”,如果为“get”返回值为name:value,name为colModel中名称。如果为“set”则值为name:value,name是colModel中的名称。format:默认为true,当为true时,在设置新值时会调用formatter格式化数值 | |
getCell | 单元格内容 | rowid, iCol | 返回指定rowid,iCol的单元格内容,iCol既可以是当前列在colModel中的位置索引也可以是name值。注意:在编辑行或者单元格时不能使用此方法,此时返回的并不是改变的值,而是原始值 | |
getCol | array[] or value | colname, returntype, mathoperation | 返回列的值。colname既可以是当前列在colModel中的位置索引也可以是name值。returntype指定返回数据的类型,默认为false。当为false时,返回的数组中只包含列的值,当为true时返回数组是对象数组,具体格式 {id:rowid, value:cellvalue} ,id为行的id,value为列的值。如: [{id:1,value:1},{id:2,value:2}…]。mathoperation 可选值为'sum, 'avg', 'count' | |
getDataIDs | array[] | none | 返回当前grid里所有数据的id | |
getGridParam | mixed value | name | 返回请求的参数信息 | |
getInd | mixed | rowid,rowcontent | 如果rowcontent为false,返回行所在的索引位置,id为行id。rowcontent默认为false。如果rowconent为ture则返回的为行对象,如果找不到行则返回false | |
getRowData | array{} | rowid or none | 返回指定行的数据,返回数据类型为name:value,name为colModel中的名称,value为所在行的列的值,如果根据rowid找不到则返回空。在编辑模式下不能用此方法来获取数据,它得到的并不是编辑后的值 | |
hideCol | jqGrid对象 | colnameor[colnames] | 如果参数为一个列名则隐藏此列,如果给定的是数组则隐藏指定的所有列。格式: [“name1”,”name2”] | |
remapColumns | none | permutation, updateCells, keepHeader | 调整表格列的显示顺序,permutation为当前列的顺序,假如值是[1,0,2],那么第一列就会在第二位显示。如果updateCells为ture则是对单元格数据进行重新排序,如果keepHeader为true则对header数据显示位置进行调整 | |
resetSelection | jqGrid对象 | none | 选择或者反选行数据,在多选模式下也同样起作用 | |
setCaption | jqGrid对象 | caption | 设置表格的标题 | |
setCell | jqGrid对象 | rowid,colname, data, class, properties | 改变单元格的值。rowid:当前行id;colname:列名称,也可以是列的位置索引,从0开始;data:改变单元格的内容,如果为空则不更新;class:如果是string则会使用addClass方法将其加入到单元格的css中,如果是array则会直接加到style属性中;properties:设置单元格属性 | |
setGridParam | jqGrid对象 | object | 设置grid的参数。有些参数的修改必须要重新加载grid才可以生效,这个方法可以覆盖事件 | |
setGridHeight | jqGrid对象 | new_height | 动态改变grid的高度,只能对单元格的高度进行设置而不能对表格的高度进行动态修改。new_height:可以是象素值,百分比或者"auto" | |
setGridWidth | jqGrid对象 | new_width,shrink | 动态改变表格的宽度。new_width:表格宽度,象素值;shrink:true或者false,作用同shrinkToFit | |
setLabel | jqGrid对象 | colname, data, class, properties | 给指定列设置一个新的显示名称。colname:列名称,也可以是列的位置索引,从0开始;data:列显示名称,如果为空则不修改;class:如果是string则会使用addClass方法将其加入到单元格的css中,如果是array则会直接加到style属性中;properties:设置label的属性 | |
setRowData | Bool(成功true,否则false) | rowid,data, cssprop | 更新行的值,rowid为行id。data值格式:{name1:value1,name2: value2…} name为colModel中名称;cssprop:如果是string则会使用addClass方法将其加入到行的css中,如果是array或者对象则会直接加到style属性中 | |
setSelection | jqGrid对象 | rowid,onselectrow | 选择或反选指定行。如果onselectrow为ture则会触发事件onSelectRow,onselectrow默认为ture | |
showCol | jqGrid | colname | 显示列。colname可以是数组[“name1”,”name2”],但是name1或者name2必须是colModel中的name | |
trigger(“reloadGrid”) | jqGrid对象 | none | 重新加载当前表格,也会向服务器发起新的请求 | |
updateColumns | none | none | 同步表格的宽度,用在表格拖拽时,用法:var mygrid=jQuery(“#grid_id”)[0];mygrid.updateColumns(); |
4.1.1. getGridParam
Option | Returns |
getGridParam("url") | the current url from options array |
getGridParam("sortname") | the name of last sorted column |
getGridParam("sortorder") | the last sorted order |
getGridParam("selrow") | the id of the selected row, null if row is not selected |
getGridParam("page") | the current page number. |
getGridParam("rowNum") | the current number of requested rows |
getGridParam("datatype") | the current datatype. |
getGridParam("records") | the current number of records in grid. |
getGridParam("selarrrow") | array of id's of the selected rows when multiselect options is true. Empty array if not selection. |
setGridParam
Method | Description |
setGridParam({url:newvalue}) | Parameters: url - string Set a new url, replacing the older. |
setGridParam({sortname:newvalue}) | Parameters: sortname - string Set a new sort name |
setGridParam({sortorder:newvalue}) | Parameters: sortorder - string (asc or desc) Set a new sort order |
setGridParam({page:newvalue}) | Parameters: page - integer >0 Set a new page number |
setGridParam({rowNum:newvalue}) | Parameters: rownum - integer > 0 Set a new number of requested rows. |
setGridParam({datatype:newvalue}) | Parameters: datatype - string (xml,json.xmlstring,jsonstring, clientSide) Set a new datatype. |
1.1.1. colModel设定各列的参数
jQuery("#grid").jqGrid({ ... colModel: [ { name: 'FInterID', index: 'FInterID', width: 80, sortable: true, hidden: true }, { name: 'FEntryID', index: 'FEntryID', width: 80, sortable: true, hidden: true }], ... }); | ||||
属性: | ||||
名称 | 值类型 | 说明 | 实列 | |
name | string | 为Grid中的每个列设置唯一的名称,这是一个必需选项,其中保留字包括subgrid、cb、rn | name: 'FInterID', | |
index | string | 设置排序时所使用的索引名称,这个index名称会作为sidx参数(prmNames中设置的)传递到Server。 | index: 'FInterID', | |
label | string | 当jqGrid的colNames选项数组为空时,为各列指定题头。如果colNames和此项都为空时,则name选项值会成为题头 | ||
width | int | 设置列的宽度,目前只能接受以px为单位的数值,默认为150 | width: 80, | |
sortable | bool | 设置该列是否可以排序,默认为true | sortable: true, | |
search | bool | 设置该列是否可以被列为搜索条件,默认为true | search: true, | |
resizable | bool | 设置列是否可以变更尺寸,默认为true。 | resizable: true, | |
hidden | bool | 设置此列初始化时是否为隐藏状态,默认为false | hidden: false, | |
align | string | 显示文字的方式,值为: left(默认值),center,right | align: "right", | |
formatter | string | 预设类型或用来格式化该列的自定义函数名。常用预设格式有:integer、date、currency、number等,(具体参见文档 )。 | formatter: 'number', | |
formatoptions | object | 格式化显示列数据 | formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 4, prefix: "" } | |
summaryType | string | 如果汇总页脚行启用,在列模式下设置汇总字段的类型 值列表: sum(求合), count(汇总), avg(平均值), min, max | summaryType:'sum' | |
string | 此选项作为模板可用于在总结页脚行。默认情况下,它的价值被定义为{0} - 这意味着,这将打印的汇总值。该参数可以包含任何有效的HTML代码。详细信息 | summaryTpl: '({0}) 小计:' | ||
classes | string | 设置列的css。多个class之间用空格分隔,如:'class1 class2' 。表格默认的css属性是ui-ellipsis | ||
datefmt | string | 对日期列进行格式化。”/”, ”-”, and ”.”都是有效的日期分隔符。y,Y,yyyy 年YY, yy 月m,mm for monthsd,dd 日. ISO Date (Y-m-d) | ||
defval | string | 查询字段的默认值 | ||
editable | boolean | 单元格是否可编辑.默认值:false | ||
editoptions | array | 对列进行编辑时设置的一些属性 | ||
editrules | array | 对于可编辑单元格的一些额外属性设置 | ||
edittype | string | 可以编辑的类型。可选值:text, textarea, select, checkbox, password, button, image and file, custom | ||
fixed | boolean | 列宽度是否要固定不可变.默认值:false | ||
formoptions | array | 对于form进行编辑时的属性设置 | ||
formatoptions | array | 对某些列进行格式化的设置 | ||
formatter | mixed | 对列进行格式化时设置的函数名或者类型 | ||
hidedlg | boolean | 是否显示或者隐藏此列.默认值:false | ||
index | string | 当排序时定义排序字段名称的索引,参数名为sidx | ||
jsonmap | string | 定义了返回的json数据映射 | ||
key | boolean | 当从服务器端返回的数据中没有id时,将此作为唯一rowid使用,默认只能有一个id属性.默认值:false | ||
search | boolean | 在搜索模式下,定义此列是否可以作为搜索列.默认值:true | ||
searchoptions | array | 设置搜索参数 | ||
sorttype | string | 用在当datatype为local时,定义搜索列的类型,可选值:int/integer - 对integer排序float/number/currency - 排序数字date - 排序日期text - 排序文本.默认值:text | ||
stype | string | 定义搜索元素的类型.默认值:text | ||
surl | string | 搜索数据时的url | ||
cellattr | function | 此功能属性添加到细胞的过程中创造的数据 - 即动态。例如表格单元格的所有有效的属性,可以使用或与不同性质的风格属性。函数应该返回字符串。传递给这个函数的参数是:ROWID - 行ID | null | |
firstsortorder | string | 如果设置为ASC或DESC,将被列在这个方向排序列第一sort.Subsequent各种像往常一样将切换 | null | |
hidden | boolean | 定义如果此列是隐藏在初始化。 | false | |
template | object | 设置有效的colModel属性。如果你想在方便的列模型覆盖了很多的默认值,可以使用此选项。在网格选项,请参阅cmTemplate | null | |
title | boolean | 如果此选项是假的标题是不会显示在该列,当我们悬停用鼠标一个细胞 | true | |
xmlmap | string | 定义XML映射进来的XML文件中列。使用一个CCS规范检索数据 | none | |
unformat | function | “UNFORMAT”编辑请参阅自定义格式化的单元格的值时的自定义功能。 (UNFORMAT也称为排序操作期间由UNFORMAT返回的值是在排序过程中比较值。) | null | |
viewable | boolean | 只有当viewGridRow方法被激活,此选项才有效。当选项设置为false的列是不会出现在视图的形式 | true |
1.1.2. groupingView 分组设置
1.1.3. groupingView 分组设置
1.1.4. groupingView 分组设置
jQuery("#grid").jqGrid({ ... groupingView : { groupField : ['name'], groupDataSorted : true } ... }); | ||||
属性: | ||||
名称 | 值类型 | 说明 | 实列 | |
groupField | Array[] | colModel定义的名称。实现分组的Key,级别从左至右,目前支持1级 | groupField: ['name'], | |
groupOrder | Array[] | 定义组级别的初始排序顺序。默认值是ASC。 | groupOrder: ['asc'],
| |
groupText | Array[] | 将显示在网格中的分组头文字。默认情况下,如果定义的值{0}这意味着组值名称将显示。如果指定{1},那么将显示分组行总数。它是可以在这里设置任何有效的HTML内容。 | groupText: ['<b>{0} - {1}条记录</b>'], | |
groupColumnShow | Array[] | 显示/隐藏列,如果启用了分组,我们将此值设置为true | groupColumnShow: [true], | |
groupSummary | Array[] | 启用或禁用当前组的水平(页脚)行的总结。如果设置了分组,该组的默认值是false。 | groupSummary: [true], | |
showSummaryOnHide | bool | 当折叠组时,是否显示或隐藏小计(页脚)行, | showSummaryOnHide: true, | |
groupDataSorted | bool | 如果这个参数设置为true,将发送到服务器的额外的参数,以告诉他对数据进行排序。 | groupDataSorted: true, | |
groupCollapse | bool | 初始化时是否显示或隐藏组的详细行 | groupCollapse: false, | |
plusicon | string | 收缩时的图标样式 | ui-icon-circlesmall-plus | |
minusicon | string | 展开时的图标样式 | ui-icon-circlesmall-minus |
2. 方法Methods
2.1. addRowData 编辑行
jQuery("#grid_id"). addRowData(rowid,rdata,pos,src); 实例: $("#gvBillEntry").addRowData(rowid, {}, " first"); | ||||
属性: | ||||
名称 | 值类型 | 说明 | 实列 | |
rowid | int | 该行的ID编号 | ||
rdata | bool | 新增时行初始化数据。 | ||
pos | function | 新增类型:pos可以为[first(插入顶行),last(插入尾行默认值),before,after],为后两者是需要指定相对的行ID | Pos: last | |
src | string | 如果pos: 弹出的新增页面 |
2.2. editRow 编辑行
jQuery("#grid_id").editRow(rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc, errorfunc, afterrestorefunc); 实例: jQuery('# jqgajax').editRow(id, true); jQuery("#grid_id").jqGrid('editRow', rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc, errorfunc, afterrestorefunc); 实例:jQuery('#jqgajax').jqGrid('editRow', mydata3[i].id, true, pickdates); | ||||
属性: | ||||
名称 | 值类型 | 说明 | 实列 | |
rowid | int | 该行的ID编号 | ||
keys | bool | 设置为true时,我们可以使用[Enter]键来保存该行[Esc]键取消编辑。 | ||
oneditfunc | function | 成功访问编辑行之前,允许用户输入字段的访问后,火灾。行的ID作为参数传递给这个函数的一个参数。 | ||
succesfunc | string | 如果定义,这个函数被调用后,立即请求成功。此功能是通过从服务器返回的数据。根据从服务器的数据,这个函数应该返回true或false。 | ||
url | string | 如果定义,该参数将替换从选项数组editurl参数。如果设置为“clientArray”,数据是不向服务器发送,而是保存网格(大概后手动储蓄)。 | ||
extraparam | string | 名称类型的数组:值。当设置这些值一起发布到服务器的其他值。 | ||
aftersavefunc | string | 如果定义,该函数被调用后的数据保存到服务器。传递给这个函数的参数的rowid和从服务器请求的响应。事件被称为太URL时设置为“clientArray”。 | ||
errorfunc | string | 如果定义,该函数被调用后的数据保存到服务器。传递给这个函数的参数的rowid和从服务器请求的响应 | ||
afterrestorefunc | string | 如果定义,在restoreRow调用这个函数,(如果该行没有成功保存)后恢复行方法。这个函数,我们通过ROWID |
3. 事件
事件: | |||
名称 | 参数 | 说明 | |
afterInsertRow | Rowid,rowdata,rowelem | 当插入每行时触发。rowid插入当前行的id;rowdata插入行的数据,格式为name: value,name为colModel中的名字 | |
beforeRequest | none | 向服务器端发起请求之前触发此事件但如果datatype是一个function时例外 | |
beforeSelectRow | rowid, e | 当用户点击当前行在未选择此行时触发。rowid:此行id;e:事件对象。返回值为ture或者false。如果返回true则选择完成,如果返回false则不会选择此行也不会触发其他事件 | |
gridComplete | none | 当表格所有数据都加载完成而且其他的处理也都完成时触发此事件,排序,翻页同样也会触发此事件 | |
loadComplete | xhr | 当从服务器返回响应时执行,xhr:XMLHttpRequest 对象 | |
loadError | xhr,status,error | 如果请求服务器失败则调用此方法。xhr:XMLHttpRequest 对象;satus:错误类型,字符串类型;error:exception对象 | |
onCellSelect | rowid,iCol,cellcontent,e | 当点击单元格时触发。rowid:当前行id;iCol:当前单元格索引;cellContent:当前单元格内容;e:event对象 | |
ondblClickRow | rowid,iRow,iCol,e | 双击行时触发。rowid:当前行id;iRow:当前行索引位置;iCol:当前单元格位置索引;e:event对象 | |
onHeaderClick | gridstate | 当点击显示/隐藏表格的那个按钮时触发;gridstate:表格状态,可选值:visible or hidden | |
onPaging | pgButton | 点击翻页按钮填充数据之前触发此事件,同样当输入页码跳转页面时也会触发此事件 | |
onRightClickRow | rowid,iRow,iCol,e | 在行上右击鼠标时触发此事件。rowid:当前行id;iRow:当前行位置索引;iCol:当前单元格位置索引;e:event对象。此事件不支持opera游览器 | |
onSelectAll | aRowids,status | multiselect为ture,且点击头部的checkbox时才会触发此事件。aRowids:所有选中行的id集合,为一个数组。status:boolean变量说明checkbox的选择状态,true选中false不选中。无论checkbox是否选择,aRowids始终有值 | |
onSelectRow | rowid,status | 当选择行时触发此事件。rowid:当前行id;status:选择状态,当multiselect 为true时此参数才可用 | |
onSortCol | index,iCol,sortorder | 当点击排序列但是数据还未进行变化时触发此事件。index:name在colModel中位置索引;iCol:当前单元格位置索引;sortorder:排序状态:desc或者asc | |
resizeStart | event, index | 当开始改变一个列宽度时触发此事件。event:event对象;index:当前列在colModel中位置索引 | |
resizeStop | newwidth, index | 当列宽度改变之后触发此事件。newwidth:列改变后的宽度;index:当前列在colModel中的位置索引 | |
serializeGridData | postData | 向服务器发起请求时会把数据进行序列化,用户自定义数据也可以被提交到服务器端 |
4. 方法
方法: | ||||
名称 | 返回值 | 参数 | 说明 | |
addJSONData | none | data | 使用传来的data数据填充表格。 使用方法:var mygrid = jQuery(”#”+grid_id)[0];var myjsongrid = eval(”(”+jsonresponse.responseText+”)”); mygrid.addJSONData(myjsongrid); myjsongrid = null; jsonresponse =null; | |
addRowData | Bool(成功true,否则false) | rowid,data, position, srcrowid | 根据参数插入一行新的数据,rowid为新行的id,data为新行的数据,position为新增行的位置,srcrowid为新增行的参考位置。 data数据格式:{name1:value1,name2: value2…} name为在colModel中指定的名称 | |
addXMLData | none | data | 根据传来的数据填充表格。 使用方法:var mygrid = jQuery(”#”+grid_id)[0]; mygrid.addXmlData(xmlresponse.responseXML); | |
clearGridData | jqGrid对象 | clearfooter | 清除表格当前加载的数据。如果clearfooter为true时则此方法删除表格最后一行的数据 | |
delRowData | Bool(成功true,否则false) | rowid | 根据rowid删除行,但不会从服务器端删除数据 | |
footerData | jgGrid对象 | action,data, format | 设置或者取得底部数据。action:“get”或者“set”,默认为“get”,如果为“get”返回值为name:value,name为colModel中名称。如果为“set”则值为name:value,name是colModel中的名称。format:默认为true,当为true时,在设置新值时会调用formatter格式化数值 | |
getCell | 单元格内容 | rowid, iCol | 返回指定rowid,iCol的单元格内容,iCol既可以是当前列在colModel中的位置索引也可以是name值。注意:在编辑行或者单元格时不能使用此方法,此时返回的并不是改变的值,而是原始值 | |
getCol | array[] or value | colname, returntype, mathoperation | 返回列的值。colname既可以是当前列在colModel中的位置索引也可以是name值。returntype指定返回数据的类型,默认为false。当为false时,返回的数组中只包含列的值,当为true时返回数组是对象数组,具体格式 {id:rowid, value:cellvalue} ,id为行的id,value为列的值。如: [{id:1,value:1},{id:2,value:2}…]。mathoperation 可选值为'sum, 'avg', 'count' | |
getDataIDs | array[] | none | 返回当前grid里所有数据的id | |
getGridParam | mixed value | name | 返回请求的参数信息 | |
getInd | mixed | rowid,rowcontent | 如果rowcontent为false,返回行所在的索引位置,id为行id。rowcontent默认为false。如果rowconent为ture则返回的为行对象,如果找不到行则返回false | |
getRowData | array{} | rowid or none | 返回指定行的数据,返回数据类型为name:value,name为colModel中的名称,value为所在行的列的值,如果根据rowid找不到则返回空。在编辑模式下不能用此方法来获取数据,它得到的并不是编辑后的值 | |
hideCol | jqGrid对象 | colnameor[colnames] | 如果参数为一个列名则隐藏此列,如果给定的是数组则隐藏指定的所有列。格式: [“name1”,”name2”] | |
remapColumns | none | permutation, updateCells, keepHeader | 调整表格列的显示顺序,permutation为当前列的顺序,假如值是[1,0,2],那么第一列就会在第二位显示。如果updateCells为ture则是对单元格数据进行重新排序,如果keepHeader为true则对header数据显示位置进行调整 | |
resetSelection | jqGrid对象 | none | 选择或者反选行数据,在多选模式下也同样起作用 | |
setCaption | jqGrid对象 | caption | 设置表格的标题 | |
setCell | jqGrid对象 | rowid,colname, data, class, properties | 改变单元格的值。rowid:当前行id;colname:列名称,也可以是列的位置索引,从0开始;data:改变单元格的内容,如果为空则不更新;class:如果是string则会使用addClass方法将其加入到单元格的css中,如果是array则会直接加到style属性中;properties:设置单元格属性 | |
setGridParam | jqGrid对象 | object | 设置grid的参数。有些参数的修改必须要重新加载grid才可以生效,这个方法可以覆盖事件 | |
setGridHeight | jqGrid对象 | new_height | 动态改变grid的高度,只能对单元格的高度进行设置而不能对表格的高度进行动态修改。new_height:可以是象素值,百分比或者"auto" | |
setGridWidth | jqGrid对象 | new_width,shrink | 动态改变表格的宽度。new_width:表格宽度,象素值;shrink:true或者false,作用同shrinkToFit | |
setLabel | jqGrid对象 | colname, data, class, properties | 给指定列设置一个新的显示名称。colname:列名称,也可以是列的位置索引,从0开始;data:列显示名称,如果为空则不修改;class:如果是string则会使用addClass方法将其加入到单元格的css中,如果是array则会直接加到style属性中;properties:设置label的属性 | |
setRowData | Bool(成功true,否则false) | rowid,data, cssprop | 更新行的值,rowid为行id。data值格式:{name1:value1,name2: value2…} name为colModel中名称;cssprop:如果是string则会使用addClass方法将其加入到行的css中,如果是array或者对象则会直接加到style属性中 | |
setSelection | jqGrid对象 | rowid,onselectrow | 选择或反选指定行。如果onselectrow为ture则会触发事件onSelectRow,onselectrow默认为ture | |
showCol | jqGrid | colname | 显示列。colname可以是数组[“name1”,”name2”],但是name1或者name2必须是colModel中的name | |
trigger(“reloadGrid”) | jqGrid对象 | none | 重新加载当前表格,也会向服务器发起新的请求 | |
updateColumns | none | none | 同步表格的宽度,用在表格拖拽时,用法:var mygrid=jQuery(“#grid_id”)[0];mygrid.updateColumns(); |
4.1.1. getGridParam
Option | Returns |
getGridParam("url") | the current url from options array |
getGridParam("sortname") | the name of last sorted column |
getGridParam("sortorder") | the last sorted order |
getGridParam("selrow") | the id of the selected row, null if row is not selected |
getGridParam("page") | the current page number. |
getGridParam("rowNum") | the current number of requested rows |
getGridParam("datatype") | the current datatype. |
getGridParam("records") | the current number of records in grid. |
getGridParam("selarrrow") | array of id's of the selected rows when multiselect options is true. Empty array if not selection. |
setGridParam
Method | Description |
setGridParam({url:newvalue}) | Parameters: url - string Set a new url, replacing the older. |
setGridParam({sortname:newvalue}) | Parameters: sortname - string Set a new sort name |
setGridParam({sortorder:newvalue}) | Parameters: sortorder - string (asc or desc) Set a new sort order |
setGridParam({page:newvalue}) | Parameters: page - integer >0 Set a new page number |
setGridParam({rowNum:newvalue}) | Parameters: rownum - integer > 0 Set a new number of requested rows. |
setGridParam({datatype:newvalue}) | Parameters: datatype - string (xml,json.xmlstring,jsonstring, clientSide) Set a new datatype. |