Jqgrid 中文文档
jqGrid学习 ----------- 原理 .................................................................................................................................2 jqGrid学习之 --------- 皮肤 ...............................................................................................................................2 jqGrid学习 ...............................................................................................................................................................2 jQuery学习之：jqGrid表格插件——参数配置..........................................................................................4 jqGrid学习 --------------自定义搜索 ...............................................................................................................14 jqGrid学习 -------------- 搜索工具栏.............................................................................................................16 jqGrid学习 -------------- 搜索...........................................................................................................................17 jqGrid学习 -------------- 自定义格式化类型...............................................................................................19 jqGrid学习 -------------- 格式化 ......................................................................................................................21 jqGrid学习 -------------- 自定义按钮.............................................................................................................26 jqGrid学习 -------------- 翻页（2） ...............................................................................................................28 jqGrid学习 -------------- 翻页...........................................................................................................................33 jqGrid学习 -------------- 配置json ..................................................................................................................35 jqGrid学习 -------------- 方法...........................................................................................................................37 jqGrid学习 jqGrid学习 jqGrid学习 jqGrid学习
----------- 事件 ...............................................................................................................................45 ----------- 数据 ...............................................................................................................................47 -------------- ColModel API...........................................................................................................55 ----------- 参数（2）....................................................................................................................57
jqGrid学习 ------------------ jqGrid参数 .........................................................................................................63 jqGrid学习 ----------------- 第一个实例 ........................................................................................................63 使用jqGrid修改数据并检查 ...........................................................................................................................69
1
Jqgrid中文文档---整理:沧浪雾月客
jqGrid学习 ----------- 原理
jqGrid是典型的B/S架构，服务器端只是提供数据管理，客户端只提供数据显示。换句话说，jqGrid可以以一种更加简单的方式来展现你数据库的信息，而且也可以把客户端数据传回给服务器端。
对于jqGrid我们所关心的就是：必须有一段代码把一些页面信息保存到数据库中，而且也能够把响应信息返回给客户端。jqGrid是用ajax来实现对请求与响应的处理。
jqGrid学习之 --------- 皮肤
jqGrid皮肤
从3.5版本开始，jqGrid完全支持jquery UI的theme。我们可以从
http://jqueryui.com/themeroller/下载我们所需要的theme。当然，你也可以编辑自己的theme。jqGrid
也并不需要把所有的css文件都引入进来，只需导入核心css文件“ui.theme.css ” 以及“ui.core.css”即可，文件位于目录development-bundle/themes下。
jqGrid学习
jqGrid学习之 ------------- 安装
jqGrid安装很简单，只需把相应的css、js文件加入到页面中即可。 按照官网文档： *
/myproject/css/ o
ui.jqgrid.css o
/ui-lightness/ +
/images/ +
jquery-ui-1.7.2.custom.css *
/myproject/js/ o
/i18n/
2
Jqgrid中文文档---整理:沧浪雾月客
+
grid.locale-bg.js +
list of all language files +
„. o
Changes.txt o
jquery-1.3.2.min.js o
jquery.jqGrid.min.js
目录结构如上。 在页面中写法： Java代码
1. //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
2. en\"> 3.
4. -8\" />
5.
7. /ui-lightness/jquery-ui-1.7.1.custom.css\" />
8. src/css/ui.jqgrid.css\" />
9. src/css/jquery.searchFilter.css\" /> 10.
11. 18.
19.
20. 26.
27.
20. 26.
27.
需要说明的：
所有的搜索都是使用url来到服务器端查询数据。 当执行搜索时会用查询数据填充postData array 发送到服务器端搜索字符串的名称为_search 当点击刷新按钮时不会使用搜索条件 每个搜索方法都有自己的数据清空方法
jqGrid学习 -------------- 自定义格式化类型
Java代码
1.
19
Jqgrid中文文档---整理:沧浪雾月客
定义的参数 Java代码
1. function myformatter ( cellvalue, options, rowObject ) 2. {
3. // format the cellvalue to new format 4. return new_formated_cellvalue; 5. }
cellvalue：要被格式化的值
options：对数据进行格式化时的参数设置，格式为： { rowId: rid, colModel: cm} rowObject：行数据
数据的反格式化跟格式化用法相似。 Java代码
1.
20
Jqgrid中文文档---整理:沧浪雾月客
表格中数据实际值为123.00，但是显示的是$123.00; 我们使用getRowData ，getCell 方法取得的值是123.00。 创建通用的格式化函数 定义如下： Java代码
1.
具体使用： Java代码
1.
使用格式化后 Java代码
1.
结果是，表格的数据值为1或者2但是现实的是One或者Two。
对超链接使用select类型的格式化： Java代码
1.
输出结果： Java代码
1. http://localhost/someurl.php?id=123&action=edit
如果想改变id值则 Java代码
1.
输出为
Java代码
1. http://localhost/someurl.php?myid=123&action=edit
jqGrid学习 -------------- 自定义按钮
用法：
Java代码
1.
如果使用新API
26
Jqgrid中文文档---整理:沧浪雾月客
Java代码
1.
默认参数 Java代码
1. { caption:\"NewButton\
on:null, position: \"last\
caption：按钮名称，可以为空，string类型
buttonicon：按钮的图标，string类型，必须为UI theme图标 onClickButton：按钮事件，function类型，默认null position：first或者last，按钮位置 title：string类型，按钮的提示信息
cursor：string类型，光标类型，默认为pointer id：string类型，按钮id
如果设置多个按钮： Java代码
1. ...
2. jQuery(\"#grid_id\")
3. .navGrid('#pager',{edit:false,add:false,del:false,search:false}
)
4. .navButtonAdd('#pager',{ 5. caption:\"Add\
6. buttonicon:\"ui-icon-add\7. onClickButton: function(){ 8. alert(\"Adding Row\"); 9. },
10. position:\"last\" 11.})
12..navButtonAdd('#pager',{ 13. caption:\"Del\
14. buttonicon:\"ui-icon-del\15. onClickButton: function(){ 16. alert(\"Deleting Row\");
27
Jqgrid中文文档---整理:沧浪雾月客
17. },
18. position:\"last\" 19.}); 20....
按钮间的分隔 Java代码
1.
默认参数： Java代码
1. {sepclass : “ui-separator”,sepcontent: ''}
sepclass：ui-jqgrid的属性名 sepcontent：分隔符的内容
jqGrid学习 -------------- 翻页（2）
jqGrid的翻页导航是一个方法，你可以事先定义一些其他操作，比如：编辑、新增、删除及搜索。也可以增加自定义的函数。导航工具栏是定义到翻页控件上的。定义如下： Java代码
1. ... 2.
3. ...4.
28
Jqgrid中文文档---整理:沧浪雾月客
JS的用法： Java代码
1.
如果使用新API： Java代码
1.
或者：
Java代码
1.
grid_id ：表格id
gridpager ：导航栏id parameters ：参数列表
prmEdit, prmAdd, prmDel, prmSearch, prmView ：事件 参数使用： Java代码
1. $.jgrid = { 2. ...
3. search : {
4. caption: \"Search...\5. Find: \"Find\6. Reset: \"Reset\
7. odata : ['equal', 'not equal', 'less', 'less or equal','gr
eater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'],
8. groupOps: [ { op: \"AND\
\"any\" } ],
9. matchText: \" match\10. rulesText: \" rules\" 11. },
12. edit : {
13. addCaption: \"Add Record\14. editCaption: \"Edit Record\15. bSubmit: \"Submit\16. bCancel: \"Cancel\17. bClose: \"Close\
18. saveData: \"Data has been changed! Save changes?\19. bYes : \"Yes\20. bNo : \"No\
21. bExit : \"Cancel\22. },
23. view : {
24. caption: \"View Record\25. bClose: \"Close\" 26. },
27. del : {
28. caption: \"Delete\
29. msg: \"Delete selected record(s)?\30. bSubmit: \"Delete\
30
Jqgrid中文文档---整理:沧浪雾月客
31. bCancel: \"Cancel\" 32. },
33. nav : {
34. edittext: \"\
35. edittitle: \"Edit selected row\36. addtext:\"\
37. addtitle: \"Add new row\38. deltext: \"\
39. deltitle: \"Delete selected row\40. searchtext: \"\
41. searchtitle: \"Find records\42. refreshtext: \"\
43. refreshtitle: \"Reload Grid\44. alertcap: \"Warning\
45. alerttext: \"Please, select row\46. viewtext: \"\
47. viewtitle: \"View selected row\" 48. }, 49....
详细参数说明 属性 类型 add addicon addtext addtitle alertcap alerttext
boolean string
说明 默认值
是否启用新增功能，当点击按钮时
true
会触发editGridRow事件
ui-icon-plus 空
给新增功能设置图标，只有UI theme里的图标才可以使用
string 新增按钮上的文字 string string
当鼠标移到新增按钮上时显示的提
新增一行
示
当我们edit,delete or view一行
警告
记录时出现的提示信息
当edit,delete or view一行记录
string 请选择一行记录
时的文本提示
true
是否启用删除功能，启用时会触发
true
事件delGridRow
设置删除按钮的图标，只有UI theme里的图标才可以使用
ui-icon-trash 空
closeOnEscape boolean 是否可以使用esc键关闭对话框 del delicon deltext deltitle
boolean string
string 设置到删除按钮上的文字信息 string
当鼠标移到删除按钮上时出现的提
删除锁选择的行
示
31
Jqgrid中文文档---整理:沧浪雾月客
edit editicon edittext edittitle position
boolean string
是否启用可编辑功能，当编辑时会
true
触发事件editGridRow 设置编辑按钮的图标，只有UI theme里的图标才可以使用
ui-icon-pencil 空
string 编辑按钮上文字 string string
当鼠标移到编辑按钮上出现的提示
编辑所选择的行
信息
定义按钮位置，可选值left, center and right.
left
refresh
是否启用刷新按钮，当点击刷新按钮时会触发
boolean true
trigger(“reloadGrid”)事件，而且会清空搜索条件值
设置刷新图标，只有UI theme里的
ui-icon-refresh
图标才可以使用
空
refreshicon string
refreshtext string 刷新按钮上文字信息
refreshtitle string 当鼠标移到刷新按钮上的提示信息 重新加载 指明表格如何刷新。firstpage：从
refreshstate string 第一页开始刷新；current：只刷新firstpage
当前页内容 afterRefresh function 当点击刷新按钮之后触发此事件 search
boolean
是否启用搜索按钮，会触发
searchGrid 事件
设置搜索按钮的图标，只有UI theme里的图标才可以使用
null true
ui-icon-search 空
searchhicon string searchtext
string 搜索按钮上的文字
是否启用查看按钮，会触发事件viewGridRow
设置查看按钮的图标，只有UI theme里的图标才可以使用
searchtitle string 当鼠标移到搜索按钮上的提示信息 搜索 view viewicon viewtext viewtitle
实例：
Java代码 1.
jqGrid学习 -------------- 翻页
jqGrid的翻页要定义在html里，通常是在grid的下面，且是一个div对象： Java代码
1.
2. ...3.
js代码： Java代码
1. jQuery(\"#grid_id\").jqGrid({ 2. ...
3. pager : '#gridpager', 4. ... 5. });
不必给翻页设置任何的css属性。在jqGrid里定义的翻页可以是：:pager : '#gridpager', pager : 'gridpager' or pager : jQuery('#gridpager'). 推荐使用前两个，当使用其他方式时jqGrid的导入导出功能时会引起错误。
导航栏的属性：
33
Jqgrid中文文档---整理:沧浪雾月客
Java代码
1. $.jgrid = {
2. defaults : {
3. recordtext: \"View {0} - {1} of {2}\4. emptyrecords: \"No records to view\5. loadtext: \"Loading...\6. pgtext : \"Page {0} of {1}\" 7. }, 8. ... 9. }
如果想改变这些设置： 1、方法一： Java代码
1. jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: \"Nothing to
display\
2、方法二： Java代码
1. jQuery(\"#grid_id\").jqGrid({ 2. ...
3. pager : '#gridpager',
4. emptyrecords: \"Nothing to display\5. ... 6. });
导航栏的属性 属性名
类型
说明
是否可以
默认值
被修改 0
NO
lastpage pager pagerpos
integer 只读属性，总页数 mixed string
导航栏对象，必须是一个有效的html元素，空字符
NO
位置可以随意 串 定义导航栏的位置，默认分为三部分：翻页，
center NO
导航工具及记录信息
34
Jqgrid中文文档---整理:沧浪雾月客
pgbuttons boolean 是否显示翻页按钮 pginput pgtext
boolean 是否显示跳转页面的输入框 string
true true
NO NO
页面信息，第一个值是当前页第二个值是总
语言包 YES
页数
reccount
只读属性，实际记录数，千万不能跟records 参数搞混了，通常情况下他们是相同的，假
integer 如我们定义rowNum=15，但我们从服务器端0
返回的记录为20即records=20，而
reccount=15，表格中也显示15条记录。
定义记录信息的位置，可选值：left, center, right
NO
recordpos string records
right NO none
NO
integer 只读属性，从服务器端返回的记录数
recordtext string rowList rowNum
显示记录的信息，只有当viewrecords为
语言包 yes
true时起效，且记录数必须大于0
可以改变表格可以显示的记录数，格式为空
array[] no
[10,20,30] array[] integer 设置表格可以显示的记录数
20
yes
false no
viewrecords boolean 是否要显示总记录数信息
所有这些参数都是可以修改的，比如： Java代码
1.
跟翻页相关的事件只有一个：onPaging 事件名 参数 说明
当点击翻页按钮但还为展现数据时触发此事件，当然这跳转onPaging pgButton 栏输入页码改变页时也同样触发此事件。参数pgButton可选
值： first,last,prev,next
jqGrid学习 -------------- 配置json
IE8，FF3以及Chrome 3已经支持JSON，配置： Java代码
35
Jqgrid中文文档---整理:沧浪雾月客
1. //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
2. en\"> 3.
4. -8\" />
5.
7. /ui-lightness/jquery-ui-1.7.1.custom.css\" />
8. /ui.jqgrid.css\" /> 9.
10.
12.
15.
这段代码要放到语言包之后jqGrid.js文件之前。
如果浏览器不支持JSON，那么我们只能用eval函数解析json。
除了jqGrid本身提供对json的类库外，我们可以使用JSON.parse来处理JSON，配置如下：
36
Jqgrid中文文档---整理:沧浪雾月客
Java代码
1. //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
2. en\"> 3.
4. -8\" />
5.
7. /ui-lightness/jquery-ui-1.7.1.custom.css\" />
8. /ui.jqgrid.css\" /> 9.
10. 11.
13. 21.
22. 23.
24....25. 26.
jqGrid学习 -------------- 方法
jqGrid的方法，从3.6开始已经完全兼容jQuery UI库。 用法：
Java代码
37
Jqgrid中文文档---整理:沧浪雾月客
1.
grid_id:表格的id；jqGridMethod：用到表格上的方法；parameter1,„parameterN ：参数列表
此方法并不是返回请求的数据值而是返回一个jqGrid对象。 Java代码
1.
如果使用新的API： Java代码
1.
grid_id:表格id；jqGrid：表格实例；method：表格支持的方法名；parameter1,...parameterN ：参数列表
具体实例： Java代码
1.
jqGrid配置使用新的api Java代码
1. //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
2. en\"> 3.
4. -8\" />
5.
7. /ui-lightness/jquery-ui-1.7.1.custom.css\" />
8. /ui.jqgrid.css\" /> 9.
10.
12.
15.
39
Jqgrid中文文档---整理:沧浪雾月客
这段代码必须放在语言包之后jqGrid.js文件之前。
jqGrid方法
方法名 addJSONData
addRowData
addXMLData
clearGridData delRowData footerData
参数 data
rowid,data, position, srcrowid data
clearfooter rowid
action,data, format 返回
值
说明
使用传来的data数据填充表格。使用方法：var mygrid =
jQuery(”#”+grid_id)[0];var myjsongrid =
none eval(”(”+jsonresponse.responseTex
t+”)”);
mygrid.addJSONData(myjsongrid); myjsongrid = null; jsonresponse =null;
成功为
根据参数插入一行新的数据，rowid为新true行的id，data为新行的数据，position, 否为新增行的位置，srcrowid为新增行的参则为
考位置。data数据格式：
fals{name1:value1,name2: value2„} namee
为在colModel中指定的名称
根据传来的数据填充表格。用法：var none
mygrid = jQuery(”#”+grid_id)[0]; mygrid.addXmlData(xmlresponse.responseXML);
jqGr清除表格当前加载的数据。如果
id对clearfooter为true时则此方法删除表
象 格最后一行的数据
成功为true
否则
根据rowid删除行，但不会从服务器端删为除数据 false
jgGr
设置或者取得底部数据。action：“get”id对
或者“set”，默认为“get”，如果为
象
“get”返回值为name:value，name为
colModel中名称。如果为“set”则值为
40
getCell
getCol
getDataIDs
getGridParam getInd
getRowData
hideCol
remapColumns
Jqgrid中文文档---整理:沧浪雾月客
name：value，name是colModel中的名称。format：默认为true，当为true时，在设置新值时会调用formatter格式化数值
返回指定rowid，iCol的单元格内容，iCol单元既可以是当前列在colModel中的位置索
rowid, iCol 格内引也可以是name值。注意：在编辑行或
容 者单元格时不能使用此方法，此时返回的
并不是改变的值，而是原始值 返回列的值。colname既可以是当前列在colModel中的位置索引也可以是name值。returntype指定返回数据的类型，默colname,
arra认为false。当为false时，返回的数组
returntype,
y[] 中只包含列的值，当为true时返回数组
mathoperatio
or 是对象数组，具体格式 {id:rowid,
n
valuvalue:cellvalue} ，id为行的id，value
e 为列的值。如：
[{id:1,value:1},{id:2,value:2}„]。mathoperation 可选值为'sum, 'avg', 'count' none
arra
y[]
返回当前grid里所有数据的id mixename
d
valu返回请求的参数信息 e
如果rowcontent为false，返回行所在的
rowid,rowconmixe索引位置，id为行id。rowcontent默认tent d 为false。如果rowconent为ture则返回
的为行对象，如果找不到行则返回false 返回指定行的数据，返回数据类型为name:value，name为colModel中的名称，rowid or none
arravalue为所在行的列的值，如果根据rowid
y{} 找不到则返回空。在编辑模式下不能用此
方法来获取数据，它得到的并不是编辑后的值 colnameor[co
jqGr如果参数为一个列名则隐藏此列，如果给
lnames]
id对定的是数组则隐藏指定的所有列。格式：
象 [“name1”,”name2”] 调整表格列的显示顺序,permutation为
permutation, 当前列的顺序，假如值是[1,0,2]，那么updateCells, none 第一列就会在第二位显示。如果keepHeader updateCells为ture则是对单元格数据
进行重新排序，如果keepHeader为true
41
Jqgrid中文文档---整理:沧浪雾月客
则对header数据显示位置进行调整
resetSelection none
jqGr
选择或者反选行数据，在多选模式下也同id对
setCaption setCell
setGridParam
setGridHeight setGridWidth
setLabel
setRowData
setSelection
象
样起作用 jqGr
caption
id对设置表格的标题 象
改变单元格的值。rowid：当前行id；colname：列名称，也可以是列的位置索
rowid,colnam引，从0开始；data：改变单元格的内容，
e, data, jqGr
class, id对
如果为空则不更新；class：如果是string
properties 象
则会使用addClass方法将其加入到单元
格的css中，如果是array则会直接加到
style属性中；properties：设置单元格属性 jqGr设置grid的参数。有些参数的修改必须object
id对要重新加载grid才可以生效，这个方法象 可以覆盖事件
jqGr
动态改变grid的高度，只能对单元格的new_height
id对
高度进行设置而不能对表格的高度进行象
动态修改。new_height：可以是象素值，百分比或者\"auto\"
new_width,sh
jqGr动态改变表格的宽度。new_width:表格宽
rink
id对度，象素值；shrink：true或者false，
象 作用同shrinkToFit
给指定列设置一个新的显示名称。
colname：列名称，也可以是列的位置索colname, jqGr引，从0开始；data：列显示名称，如果data, class, id对为空则不修改；class：如果是string则properties 象
会使用addClass方法将其加入到单元格的css中，如果是array则会直接加到style属性中；properties：设置label的属性
成功更新行的值，rowid为行id。data值格式：{name1:value1,name2: value2„} namerowid,data,
true
为colModel中名称；cssprop：如果是cssprop
否则
falsstring则会使用addClass方法将其加入e
到行的css中，如果是array或者对象则会直接加到style属性中
rowid,onsele
jqGr选择或反选指定行。如果onselectrow为
ctrow
id对ture则会触发事件onSelectRow，
象 onselectrow默认为ture
42
Jqgrid中文文档---整理:沧浪雾月客
showCol colname
显示列。colname可以是数组jqGr
[“name1”,”name2”],但是name1或者id
name2必须是colModel中的name jqGr
重新加载当前表格，也会向服务器发起新id对
的请求 象
同步表格的宽度，用在表格拖拽时，用法：var none
mygrid=jQuery(”#grid_id”)[0];mygrid.updateColumns();
trigger(“reloa
none
dGrid”)
updateColumns none
jqGrid的通用方法和设置
这些方法并不和jqGrid对象绑定，可以随意使用： Java代码
1.
jgrid.jqGridFunction 是函数名 parameter1,„parameterN 参数列表 函数名
参数
返回值
说明
这个函数可以改变jqgrid中用到的ajax请求参数，这个函数可以覆盖当前所有ajax请求设置。从3.6版本开始起有3个级别的ajax设置：第一个级别就是在模块中设置ajax请求；第二个级别就是通过此函数设置；第三级别的设置是控制全局ajax请求的设置：
jQuery.extend(jQuery.ajax({method specific options}, ajaxOptions,
ThirdLevelajaxSettinds)); 当然我们也可以单独设置ajax的参数 转义字符串，把两个反斜杠(\\\\)转化为单个反斜杠(\\)
ajaxOptions 空对象 none
jqID string
解析后的string
43
Jqgrid中文文档---整理:沧浪雾月客
jgrid.htmlDecode string jgrid.htmlEncode string
转换后string 编码后的string
把转码后的字符串还原 把字符串编码
简单字符串模板。用法：Example jQuery.jqgformat(“Please enter a value between {0} and {1}.”, 4,
result : “Please enter a
jgrid.format string
格式化后string
value between 4 and 8.”
jgrid.getCellInd
cell
ex
index
这个方法是用来修复在ie7里的一个bug
把xmlstring转换为dom对象
jgrid.stringToDo
xmlstring xmlDoc
c
jgrid.stripHtml content jgrid.parse
jqGrid的方法 方法名 参数
返
回说明 值
new_conten
去掉html标签返回标签中内容
t
把一个jsonstring转换为json对象，
jsonstrin
对象
g
HTM
filterGgrid_id,param构造jqGrid的查询界面。grid_id:表格id；
L对
rid s params：参数
象 filterT
params
oolbar
jqGrid
同上。不同的是搜索输入框在header层下方 对象
arr
ay{返回指定列的属性集合。name为colModel中名称 }
成功tru
e否从dom上删除此grid 则false 成
跟GridDestroy不同的是table对象跟pager对
44
getColP
colname
rop
GridDes
grid_id
troy
GridUnlgrid_id
Jqgrid中文文档---整理:沧浪雾月客
oad
功象并不会被删除，以便下次使用 true否则false
jqG
rid设置grid的状态，显示或者隐藏。这个方法不会对触发onHeaderClick 事件。 象 jqGrid对象
设置新的属性，对于动态改变列属性是非常有用的，但是有些属性的修改并不会起效。用法：jQuery(”#grid_id”).setColProp('colname',{editoptions:{value:“True:False”}}); 按指定列进行排序。效果同
setGridParam({sortname:'myname'}).trigger('reloadGrid'). 如果reload为true则会重新加载数据
修改表格中某行的数据，data数据格式：[{name:value,name1:value1„},
{name:value,name2:value2„}]，name为colModel中的名称；rowidname某行的名称。jsonreader：boolean值，默认false。如果为true则是定义数据的格式，data的值并不是name：value形式而只是value
setGrid
state
State
setColPcolname, rop properties
jqGsortGricolname, ridd reload 对
象 成功tru
updateGdata,rowidname否ridRows e,jsonreader 则
为false
jqGrid学习 ----------- 事件
jqGrid中的事件：
语法：
Java代码
1. var lastSel;
2. jQuery(\"#gridid\").jqGrid({ 3. ...
4. onSelectRow: function(id){ 5. if(id && id!==lastSel){
6. jQuery('#gridid').restoreRow(lastSel); 7. lastSel=id; 8. }
9. jQuery('#gridid').editRow(id, true);
45
10. }, 11.... 12.}); 事件
afterInsertRow beforeRequest beforeSelectRow gridComplete loadComplete loadError onCellSelect
ondblClickRow onHeaderClick onPaging
Jqgrid中文文档---整理:沧浪雾月客
参数
备注
当插入每行时触发。rowid插入rowidrowdatarowelem
当前行的id；rowdata插入行的数据，格式为name: value，name为colModel中的名字 向服务器端发起请求之前触发none
此事件但如果datatype是一个function时例外
当用户点击当前行在未选择此行时触发。rowid：此行id；e：rowid, e
事件对象。返回值为ture或者false。如果返回true则选择完成，如果返回false则不会选择此行也不会触发其他事件 当表格所有数据都加载完成而none
且其他的处理也都完成时触发此事件，排序，翻页同样也会触发此事件
xhr
当从服务器返回响应时执行，xhr：XMLHttpRequest 对象 如果请求服务器失败则调用此xhr,status,error
方法。xhr：XMLHttpRequest 对象；satus：错误类型，字符串类型；error：exception对象
当点击单元格时触发。rowid：rowid,iCol,cellcontent,e
当前行id；iCol：当前单元格
索引；cellContent：当前单元格内容；e：event对象
双击行时触发。rowid：当前行rowid,iRow,iCol,e
id；iRow：当前行索引位置；iCol：当前单元格位置索引；e:event对象
当点击显示/隐藏表格的那个按gridstate 钮时触发；gridstate：表格状态，可选值：visible or hidden pgButton
点击翻页按钮填充数据之前触
46
onRightClickRow rowid,iRow,iCol,e
onSelectAll aRowids,status
onSelectRow rowid,status
onSortCol index,iCol,sortorder
resizeStart event, index
resizeStop newwidth, index
serializeGridData postData
jqGrid学习 ----------- 数据
47
Jqgrid中文文档---整理:沧浪雾月客
发此事件，同样当输入页码跳转页面时也会触发此事件 在行上右击鼠标时触发此事件。rowid：当前行id；iRow：当前行位置索引；iCol：当前单元格位置索引；e：event对象。此事件不支持opera游览器 multiselect为ture，且点击头部的checkbox时才会触发此事件。aRowids：所有选中行的id集合，为一个数组。status：boolean变量说明checkbox的选择状态，true选中false不选中。无论checkbox是否选择，aRowids始终有值
当选择行时触发此事件。rowid：当前行id；status：选择状态，当multiselect 为true时此参数才可用
当点击排序列但是数据还未进行变化时触发此事件。index：name在colModel中位置索引；iCol：当前单元格位置索引；sortorder：排序状态：desc或者asc
当开始改变一个列宽度时触发此事件。event：event对象；index：当前列在colModel中位置索引
当列宽度改变之后触发此事件。newwidth：列改变后的宽度；index：当前列在colModel中的位置索引
向服务器发起请求时会把数据进行序列化，用户自定义数据也可以被提交到服务器端
Jqgrid中文文档---整理:沧浪雾月客
jqGrid可支持的数据类型：xml、json、jsonp、local or clientSide、xmlstring、jsonstring
、script、function („)。 Json数据
需要定义jsonReader来跟服务器端返回的数据做对应，其默认值： Java代码
1. jQuery(\"#gridid\").jqGrid({ 2. ...
3. jsonReader : { 4. root: \"rows\5. page: \"page\6. total: \"total\
7. records: \"records\8. repeatitems: true, 9. cell: \"cell\10. id: \"id\
11. userdata: \"userdata\12. subgrid: {root:\"rows\13. repeatitems: true, 14. cell:\"cell\" 15. } 16. }, 17.... 18.});
这样服务器端返回的数据格式： Java代码
1. {
2. total: \"xxx\3. page: \"yyy\4. records: \"zzz\5. rows : [
6. {id:\"1\7. {id:\"2\8. ... 9. ] 10.}
jsonReader的属性
48
total 总页数 page 当前页
records 查询出的记录数
rows 包含实际数据的数组 id 行id
cell
当前行的所有单元格
* root
这个元素指明表格所需要的数据从哪里开始。 Java代码
1. jQuery(\"#gridid\").jqGrid({ 2. ...
3. jsonReader : {root:\"invdata\4. ... 5. });
从服务器端返回数据格式为： Java代码
1. {
2. total: \"xxx\3. page: \"yyy\4. records: \"zzz\5. invdata : [
6. {id:\"1\7. {id:\"2\8. ... 9. ] 10.}
* page * total * records
定义翻页所需要的信息 Java代码
1. jQuery(\"#gridid\").jqGrid({ 2. ...
3. jsonReader : {
49
Jqgrid中文文档---整理:沧浪雾月客
4. root:\"invdata\5. page: \"currpage\6. total: \"totalpages\7. records: \"totalrecords\" 8. }, 9. ... 10.});
服务器端返回数据： Java代码
1. {
2. totalpages: \"xxx\3. currpage: \"yyy\
4. totalrecords: \"zzz\5. invdata : [
6. {id:\"1\7. {id:\"2\8. ... 9. ] 10.}
* cell
当前行所包含的单元格数据 Java代码
1. jQuery(\"#gridid\").jqGrid({ 2. ...
3. jsonReader : {
4. root:\"invdata\5. page: \"currpage\6. total: \"totalpages\
7. records: \"totalrecords\8. cell: \"invrow\" 9. }, 10.... 11.});
从服务器端返回数据： Java代码
50
Jqgrid中文文档---整理:沧浪雾月客
Jqgrid中文文档---整理:沧浪雾月客
1. {
2. totalpages: \"xxx\3. currpage: \"yyy\
4. totalrecords: \"zzz\5. invdata : [
6. {id:\"1\7. {id:\"2\8. ... 9. ] 10.}
* id 行id
Java代码
1. jQuery(\"#gridid\").jqGrid({ 2. ...
3. jsonReader : {
4. root:\"invdata\5. page: \"currpage\6. total: \"totalpages\
7. records: \"totalrecords\8. cell: \"invrow\9. id: \"invid\" 10. }, 11.... 12.});
从服务器端返回数据： Java代码
1. {
2. totalpages: \"xxx\3. currpage: \"yyy\
4. totalrecords: \"zzz\5. invdata : [
6. {invid:\"1\7. {invid:\"2\8. ... 9. ] 10.}
51
Jqgrid中文文档---整理:沧浪雾月客
cell 可以设置为空字符串，id也可以设置为数字： Java代码
1. jQuery(\"#gridid\").jqGrid({ 2. ...
3. jsonReader : {
4. root:\"invdata\5. page: \"currpage\6. total: \"totalpages\
7. records: \"totalrecords\8. cell: \"\9. id: \"0\" 10. }, 11.... 12.});
从服务器端返回： Java代码
1. {
2. totalpages: \"xxx\3. currpage: \"yyy\
4. totalrecords: \"zzz\5. invdata : [
6. {\"1\7. {\"2\8. ... 9. ] 10.}
* repeatitems
指明每行的数据是可以重复的，如果设为false，则会从返回的数据中按名字来搜索元素，这个名字就是colModel中的名字： Java代码
1. jQuery(\"#gridid\").jqGrid({ 2. ...
3. jsonReader : {
4. root:\"invdata\5. page: \"currpage\6. total: \"totalpages\
52
Jqgrid中文文档---整理:沧浪雾月客
7. records: \"totalrecords\8. repeatitems: false, 9. id: \"0\" 10. }, 11.... 12.});
从服务器端返回数据： Java代码
1. {
2. totalpages: \"xxx\3. currpage: \"yyy\
4. totalrecords: \"zzz\5. invdata : [
6. {invid:\"1\
total:\"1234\
7. {invid:\"2\
total:\"2345\8. ... 9. ] 10.}
此例中，id属性值为“invid”。 一旦当此属性设为false时，我们就不必把所有在colModel定义的name值都赋值。因为是按name来进行搜索元素的，所以他的排序也不是按colModel中指定的排序结果。 Java代码
1. {
2. totalpages: \"xxx\3. currpage: \"yyy\
4. totalrecords: \"zzz\5. invdata : [
6. {invid:\"1\
7. {invid:\"2\
8. ... 9. ] 10.}
53
Jqgrid中文文档---整理:沧浪雾月客
用户数据（user data） 在某些情况下，我们需要从服务器端返回一些参数但并不想直接把他们显示到表格中，而是想在别的地方显示，那么我们就需要用到userdata标签。 Java代码
1. jsonReader: { 2. ...
3. userdata: \"userdata\4. ... 5. }
从服务器端返回数据： Java代码
1. {
2. total: \"xxx\3. page: \"yyy\4. records: \"zzz\
5. userdata: {totalinvoice:240.00, tax:40.00}, 6. rows : [
7. {id:\"1\8. {id:\"2\9. ... 10. ] 11.}
在客户端我们得到的数据为： Java代码
1. userData = {totalinvoice:240.00, tax:40.00}
在客户端我们可以有下面两种方法得到这些额外信息： 1. 使用 getGridParam 方法: Java代码
1. jQuery(\"grid_id\").getGridParam('userData')
2. 使用getUserData()方法
54
Jqgrid中文文档---整理:沧浪雾月客
Java代码
1. jQuery(\"grid_id\").getUserData()
如果想获得某个值则为： Java代码
1. jQuery(\"grid_id\").getUserDataItem( key )
jqGrid学习 -------------- ColModel API
ColModel 是jqGrid里最重要的一个属性，设置表格列的属性。 用法：
Java代码
1. jQuery(\"#gridid\").jqGrid({ 2. ...
3. colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],
4. ... 5. }); 属性 align
数据类型 备注
定义单元格对齐方式；可选值：left, string
center, right.
默认值 left
classes
设置列的css。多个class之间用空格分隔，
empty
string 如：'class1 class2' 。表格默认的css属
string
性是ui-ellipsis 对日期列进行格式化。”/”, ”-”,
ISO Date
string and ”.”都是有效的日期分隔符。y,Y,yyyy
(Y-m-d)
年YY, yy 月m,mm for monthsd,dd 日. string 查询字段的默认值 boolean 单元格是否可编辑
对列进行编辑时设置的一些属性 对于可编辑单元格的一些额外属性设置
55
datefmt defval editable
空 false empty array empty array
editoptions array editrules
array
Jqgrid中文文档---整理:沧浪雾月客
edittype fixed
可以编辑的类型。可选值：text, textarea,
string select, checkbox, password, button, text
image and file. boolean 列宽度是否要固定不可变
对于form进行编辑时的属性设置 对某些列进行格式化的设置
false empty none false false
formoptions array formatoptions array formatter hidedlg hidden index jsonmap key
mixed
对列进行格式化时设置的函数名或者类型 none
boolean 是否显示或者隐藏此列
boolean 在初始化表格时是否要隐藏此列 string
当排序时定义排序字段名称的索引，参数名empty
为sidx string
none
string 定义了返回的json数据映射
当从服务器端返回的数据中没有id时，将
boolean 此作为唯一rowid使用，默认只能有一个idfalse
属性 string
如果colNames为空则用此值来作为列的显
none
示名称，如果都没有设置则使用name 值
label
name resizable search
必输项，表格列的名称，所有关键字，保留
string 字都不能作为名称使用包括subgrid, cb Required
and rn. boolean 是否可以被resizable boolean
true
在搜索模式下，定义此列是否可以作为搜索
true
列
设置搜索参数 empty
true
searchoptions array sortable
boolean 是否可排序
sorttype
用在当datatype为local时，定义搜索列的类型，可选值：int/integer - 对integer
string text
排序float/number/currency - 排序数字date - 排序日期text - 排序文本 string 定义搜索元素的类型 string 搜索数据时的url number string
text empty string
stype surl width xmlmap unformat
默认列的宽度，只能是象素值，不能是百分
150
比
定义当前列跟返回的xml数据之间的映射关
none
系
null
function ‘unformat’单元格值
有一些参数当表格初始化完成后是不能被修改的： *
56
Jqgrid中文文档---整理:沧浪雾月客
name *
width *
resizable *
label (method avail.)
jqGrid学习 ----------- 参数（2）
是否可以被修改 是 是
参数名称
参数
描述 类型
默认值
ajaxGridobje对ajax参数进行全局设置，可以覆盖ajax事件：
空值
Options ct error，complete 和 beforeSend ajaxGridobje
对ajax参数进行全局设置
Options ct
ajaxSele对ajax的select参数进行全局设置，设置
obje
ctOptioneditoptions跟searchoptions 参数的select
ct
s 属性值
空值
空值 是
是
，但
ui-priorit需
Stri用来指定行显示的css，可以编辑自己的css文
altclass y-secondar要
ng 件，只有当altRows设为 ture时起作用
y 重
新加载
是，需重新加载 是
altRows
bool
设置表格 zebra-striped 值 ean
false
autoencobool
当为 ture 时对url进行编码
de ean
57
false
Jqgrid中文文档---整理:沧浪雾月客
如果为ture时，则当表格在首次被创建时会根
autowidtbool据父元素比例重新调整表格宽度。如果父元素宽
false
h ean 度改变，为了使表格宽度能够自动调整则需要实
现函数：setGridWidth
否
caption
Stri
定义表格名称 ng
空值
否，但是可以用api修改 否
定义了单元格padding + border 宽度。通常不
cellLayointe
必修改此值。初始值为5，paddingLef⇒5
ut ger
2+paddingRight⇒2+borderLeft⇒1=5 bool
cellEdit 启用或者禁用单元格编辑功能 false
ean cellsubmStri定义了单元格内容保存位置：“remote”，it ng “clientArray” cellurl colModel colNames
Stri
单元格提交的url ng
arra
描述列信息的数组 y
是
‘remote’ 是 空值 空值
是 否 否 是 是
arra
放置列名称的数组，必须与colModel大小相同 空数组 y[] Stri
datastr xmlstring或者jsonstring 空值
ng datatype
stri表格可以被接受的数据类型：xml，xmlstring，
xml
ng json，local，function
deselect
bool只有当datatype为local时起作用。当排序时
AfterSortrue
ean 不选择当前行
t
directiostri表格中文字的显示方向，从左向右（ltr）或者
ltr
n ng 从右向左（rtr）。 editurl
stri
定义对form编辑时的url ng
空值
是
否 是
emptyrecstri当返回的数据行数为0时显示的信息。只有当属
在语言包中 是
ords ng 性 viewrecords 设置为ture时起作用
58
Jqgrid中文文档---整理:沧浪雾月客
ExpandCobool当为true时，点击展开行的文本时，treeGrid
lClick ean 就能展开或者收缩，不仅仅是点击图片
true
ExpandCostri指定那列来展开tree grid，默认为第一列，只
lumn ng 有在treeGrid为true时起作用 空值
footerrobool
w ean 当为true时，会在翻页栏之上增加一行
false
forceFit
bool当为ture时，调整列宽度不会改变表格的宽度。
ean 当shrinkToFit 为false时，此属性会被忽略
false
gridstatstri
e ng 定义当前表格的状态：'visible' or 'hidden' visible
构造一行数据后添加到grid中，如果设为true
gridview bool则是将整个表格的数据都构造完成后再添加到
ean grid中，但treeGrid, subGrid, or
false
afterInsertRow 不能用 height
mixe
d
表格高度，可以是数字，像素值或者百分比 150
当为ture时，表格不会被显示，只显示表格的
hiddengrbool标题。只有当点击显示表格的那个按钮时才会去
id ean 初始化表格数据。只有当caption 属性不为空而
false
且hidegrid为ture时才起作用 hidegrid
bool启用或者禁用控制表格显示、隐藏的按钮，只有
ean 当caption 属性不为空时起效
true
hoverrowbool
s ean 当为false时mouse hovering会被禁用
false jsonReadarra
er y 描述json 数据格式的数组，
lastpage inte
ger
只读属性，定义了总页数 0
lastsort
inte
ger
只读属性，定义了最后排序列的索引，从0开始 0 如果为ture则数据只从服务器端抓取一次，之loadonce bool
ean
后所有操作都是在客户端执行，翻页功能会被禁false
用 loadtext stri
Loading...
ng
当请求或者排序时所显示的文字内容
.
当执行ajax请求时要干什么。disable禁用ajaxloadui
stri执行提示；enable默认，当执行ajax请求时的
ng 提示； block启用Loading提示，但是阻止其他
enable
操作 mtype stri
ng
请求的类型：(“POST” or “GET”) GET
59
否 否 否 否 否
是
否
否
否 是 否 否 否
否
否
是
是
Jqgrid中文文档---整理:沧浪雾月客
只有在multiselect设置为ture时起作用，定stri
multikey 义使用那个key来做多选。shiftKey，altKey，空值
ng
ctrlKey 只有当multiselect = true.起作用，当
multiboxbool
multiboxonly 为ture时只有选择checkbox才false
only ean
会起作用， multiselbool
定义是否可以多选
ect ean
false
是
是
否 否 是
multiselinte当multiselect为true时设置multiselect列
20
ectWidth ger 宽度 page
inte
设置初始的页码 ger
1
pager
指定分页栏对象，必须为一个有效的html元素。mixe
可以是'pager', '#pager', jQuery('#pager').空值 d
推荐用'#pager' stri
指定分页栏的位置 ng
center true true
否
pagerpos 否 否 否
pgbuttonbool
是否显示翻页按钮
s ean pginput pgtext
bool
是否显示跳转页面的输入框 ean
stri
当前页信息 ng
语言包中设
是
置
Default valuesprmNames:
{page:“page”,rows:“rows”, sort: arra
prmNames “sidx”,order: “sord”, none
y
search:“_search”, nd:“nd”, npage:null} 当参数为null时不会被发到服务器端 postData
arra此数组内容直接赋值到url上，参数类型：y {name1:value1„}
空array
是
是
只读属性，定义了grid中确切的行数。通常情况下与records属性相同，但有一种情况例外，inte
reccount 假如rowNum=15，但是从服务器端返回的记录数0
ger
是20，那么records值是20，但reccount值仍然为15，而且表格中也只显示15条记录。 recordpostri
定义了记录信息的位置： left, center, right right
s ng records
inte
只读属性，定义了返回的记录数 ger
none
否
否 否 是
recordtestri显示记录数信息。{0} 为记录数开始，{1}为记
语言包
xt ng 录数结束。 viewrecords为ture时才能起效，
60
Jqgrid中文文档---整理:沧浪雾月客
且总记录数大于0时才会显示此信息
resizeclstri定义一个class到一个列上用来显示列宽度调整
空值
ass ng 时的效果 一个数组用来调整表格显示的记录数，此参数值
arra
rowList 会替代rowNum参数值传给服务器端。如果为空[]
y[]
则不显示，设置格式：[10,20,30]。 rownumbebool如果为ture则会在表格左边新增一列，显示行
false
rs ean 顺序号，从1开始递增。此列名为'rn'.
设置表格中显示的记录数，参数会被自动传到后
inte台。如果此参数设为10，但是从服务器端返回
20
ger 15条记录，那么在表格中只会显示10条记录。
如果设为-1则禁用此检查
否
否
否
rowNum 是
rownumWiinte如果rownumbers为true，则可以设置column的
25
dth ger 宽度 savedRow
arra
只读属性，只用在编辑模式下保存数据 y
空值
否 否
scroll
bool创建一个动态滚动的表格，当为true时，翻页ean 栏被禁用，使用垂直滚动条加载数据，且在首次
or 访问服务器端时将加载所有数据到客户端。当此false inte参数为数字时，表格只控制可见的几行，所有数ger 据都在这几行中加载
18 false
否
scrollOfinte
设置垂直滚动条宽度
fset ger
scrollrobool
当为true时让所选择的行可见
ws ean selarrroarra
只读属性，用来存放当前选择的行
w y-[] selrow
stri
只读属性，最后选择行的id ng
否 是
empty array
否
[] null
否
此属性用来说明当初始化列宽度时候的计算类
shrinkTobool
型，如果为ture，则按比例初始化列宽度。如果true
Fit ean
为false，则列宽度使用colModel指定的宽度 sortable sortname
bool
是否可排序 ean
stri
排序列的名称，此参数会被传到后台 ng
false 空字符串 asc false
否
否 是 是 否
sortordestri
排序顺序，升序或者降序（asc or desc）
r ng subGrid
bool
是否使用suggrid ean
subGridMarrasubgrid模型
61
empty array 否
Jqgrid中文文档---整理:沧浪雾月客
odel y-[]
null
是 是 否
subGridTmixe
如果为空则使用表格的dataType
ype d
subGridUstri加载subgrid数据的url，jqGrid会把每行的id
空值
rl ng 值加到url中 subGridWinte
subgrid列的宽度
idth ger
20
表格的工具栏。数组中有两个值，第一个为是否
启用，第二个指定工具栏位置（相对于body layer），如：[true,”both”] 。工具栏位置arra
toolbar 可选值：“top”,”bottom”, “both”. 如果[false,''] 否
y
工具栏在上面，则工具栏id为“t_”+表格id；如果在下面则为 “tb_”+表格id；如果只有一个工具栏则为 “t_”+表格id totaltiminte只读属性，计算加载数据的时间。目前支持xml
0
e ger 跟json数据 treedatamixe数据类型，通常情况下与datatype相同，不会
null
type d 变 treeGrid
bool
启用或者禁用treegrid模式 ean
false nested
否 否 否 否
treeGridstri
treeGrid所使用的方法
Model ng
树的图标，默认值：
treeIconarra{plus:'ui-icon-triangle-1-e',minus:'ui-ic
s y on-triangle-1-s',leaf:'ui-icon-radio-off'
} treeReadarra扩展表格的colModel且加在colModel定义的后
er y 面 tree_roonume
root元素的级别，
t_level ric url userData
stri
url ng
arra
从request中取得的一些用户信息 y
0 null
否
否 否 是
empty array 否
当为true时把userData放到底部，用法：如果
userDatabool
userData的值与colModel的值相同，那么此列false
OnFooter ean
就显示正确的值，如果不等那么此列就为空 viewrecobool
是否要显示总记录数
rds ean
false
是
否 否
viewsortarra定义排序列的外观跟行为。数据格式：
cols y [false,'vertical',true].第一个参数是说，是
62
Jqgrid中文文档---整理:沧浪雾月客
否都要显示排序列的图标，false就是只显示当前排序列的图标；第二个参数是指图标如何显示，vertical：排序图标垂直放置，horizontal：排序图标水平放置；第三个参数指单击功能，true：单击列可排序，false：单击图标排序。说明：如果第三个参数为false则第一个参数必须为ture否则不能排序
width
numb如果设置则按此设置为主，如果没有设置则按er colModel中定义的宽度计算
none
否 否
xmlReadearra
对xml数据结构的描述
r y
jqGrid学习 ------------------ jqGrid参数
url datatype mtype colNames colModel
获取数据的地址
从服务器端返回的数据类型，默认xml。可选类型：xml，local，
json，jsonnp，script，xmlstring，jsonstring，clientside ajax提交方式。POST或者GET，默认GET 列显示名称，是一个数组对象。
对显示列属性的设置，是一个数组对象。常用到的属性：name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable 是否可以排序
定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置
在grid上显示记录条数，这个参数是要被传递到后台
一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台
默认的排序列。可以是列名称或者是一个数字，这个参数会被提交到后台 表格名称
pager rowNum rowList sortname
viewrecords 定义是否要显示总记录数 caption
jqGrid学习 ----------------- 第一个实例
1、html文件 Java代码
1. //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
63
Jqgrid中文文档---整理:沧浪雾月客
2. en\"> 3.
4. -8\" />
5.
7. /ui-lightness/jquery-ui-1.7.1.custom.css\" />
8. /ui.jqgrid.css\" /> 9.
10. 17.
18.
20. 60.
61. 62.
63.
66. 67.
jqGrid需要我们事先指定一个table对象，且有一个唯一的id属性。其他表格属性比如Cellspacing、cellpadding跟border 不要自己设置，jqGrid会设置。
因为我们要分页，所以要定义一个分页的div对象，同样必须有id属性。
jqGrid的用法： Java代码
1. jQuery('#grid_selector').jqGrid( options )
65
Jqgrid中文文档---整理:沧浪雾月客
grid_selector就是table的id值， optoins是一个json对象： Java代码
1. {
2. url:WEB_PATH+'/example/JqGridExample.action', 3. //url:WEB_PATH+'/excludes/post.jsp', 4. datatype: 'json',
5. colNames:['编号','姓名','密码','年龄','地址','出生日期
'],
6. colModel:[
7. {name:'id',index:'id', width:90,sorttype:\"int\8. {name:'username',index:'name', width:110,sorttype:\"int\"
},
9. {name:'password',index:'password', width:80}, 10. {name:'age',index:'age', width:80},
11. {name:'address',index:'address', width:80},
12. {name:'time',index:'time', width:80,sorttype:\"date\
13. ], 14.
15. imgpath: WEB_PATH+'/resources/javascript/plugins/jqgrid/c
ss/smoothness/images', 16. rowNum:10,
17. rowList:[10,20,30], 18. pager: \"pjmap\19.
20. multiselect: false, 21. sortname: 'id',
22. viewrecords: true, 23. sortorder: \"desc\24. jsonReader: { 25. root: \"dataRows\
26. repeatitems : false 27. },
28. caption: \"jqGrid test\29. height: 220 30.}
4、服务端文件
66
Jqgrid中文文档---整理:沧浪雾月客
Java代码
1. package com.test.json.action; 2.
3. import java.util.ArrayList; 4. import java.util.HashMap; 5. import java.util.List; 6. import java.util.Map; 7.
8. import org.apache.struts2.json.annotations.JSON; 9.
10.import net.sf.json.JSONArray; 11.import net.sf.json.JSONObject; 12. 13.
14.import com.web.action.BaseAction; 15.
16.public class JqGridAction extends BaseAction 17.{ 18.
19. /** 20. * 21. */
22. private static final long serialVersionUID = 1L; 23.
24.
25. private int page = 1; 26.
27. private int total = 3; 28.
29. private int rows = 0; 30.
31. private List dataRows = new ArrayList(); 32.
33. public String execute() 34. {
35. JSONArray t_list = new JSONArray(); 36. for(int i=0;i<3;i++){
37. JSONObject student = new JSONObject(); 38. //Map student = new HashMap(); 39. student.put(\"username\王三\"); 40. student.put(\"password\41. student.put(\"age\20+i);
42. student.put(\"address\
67
Jqgrid中文文档---整理:沧浪雾月客
43. student.put(\"id\
44. dataRows.add(i,student); 45. } 46.
47. //JSONArray ay =JSONArray.fromObject(rows);
48.System.out.println(\"tttttttttttt======\"+t_list.toString());
49. //this.outJsonString(t_list.toString() ); 50. return SUCCESS; 51. } 52.
53. //@JSON(serialize=false) 54. public int getPage() 55. {
56. return page; 57. } 58.
59. public void setPage(int page) 60. {
61. this.page = page; 62. } 63.
64. //@JSON(serialize=false) 65. public int getTotal() 66. {
67. return total; 68. } 69.
70. public void setTotal(int total) 71. {
72. this.total = total; 73. } 74.
75. //@JSON(serialize=false) 76. public int getRows() 77. {
78. return rows; 79. } 80.
81. public void setRows(int rows) 82. {
83. this.rows = rows; 84. } 85.
68
Jqgrid中文文档---整理:沧浪雾月客
86. public List getDataRows() 87. {
88. return dataRows; 89. } 90.
91. public void setDataRows(List dataRows) 92. {
93. this.dataRows = dataRows; 94. } 95. 96. 97.}
返回的json数据格式： Java代码
1. {\"dataRows\":[{\"password\":\"123\20,\"address\":\"USA\
me\":\"王三
\0},{\"password\":\"123\21,\"address\":\"USA\:\"王三
\1},{\"password\":\"123\22,\"address\":\"USA\:\"王三\2}],\"page\":1,\"rows\":10,\"total\":3} 11:43
浏览 (329)
使用jqGrid修改数据并检查
文章分类:Web前端
jqGrid可以有三种方式，让我们来修改显示在jqGrid中的数据。这三种方式分别是：
Cell Editing——只允许修改某一个单元格内容.（所有图片均来自jqGrid的wiki或者jqGrid的Demo截图）
69
Jqgrid中文文档---整理:沧浪雾月客
Inline Editing——允许在jqGrid中直接修改某一行的数据
Form Editing——弹出一个新的编辑窗口进行编辑和新增
70
Jqgrid中文文档---整理:沧浪雾月客
暂时先不管这三种方式，我们来看看如何让一个jqGrid的数据能够进行编辑呢？
其实很简单，就是在jqGrid的colModel属性中，设置几个属性： editable
可选值是true或者false，默认是false。用来说明这个列的数据是否可编辑。特别要注意的是，jqGrid的隐藏字段就算设置了这个属性为true，一样不能被编辑。在Cell Editing以及Inline Editing模式下，只能通过把这些字段设置为可见来修改。在Form Editing模式下，可以通过editoptions参数来设置是否可以修改隐藏列。 edittype
可选的值是'text', 'textarea', 'select', 'checkbox', 'password', 'button', 'image', 'file'以及'custom'。默认值是text。
根据名字就可以看出来，这个属性是设置编辑框的HTML样式的。比如，设置为text值，并且可以在editoptions中设置size以及maxlength等属性。这样生成的HTML样式有点类似这样。
其中有几个要注意：
设置checkbox的时候，需要在editoptions中指定value值，第一个值应该是checked的时候的值。比如editoptions:{value:\"Yes:No\会设定这个checkbox编辑框，选中的时候，值是Yes，没选中的时候值是No。建议最好都设定一下这个值。
设置select的时候，editoptions中需要设定select下拉框的值。 一种方式是用字符串设置editoptions的value属性，像这样
editoption: { value: “FE:FedEx; IN:InTime; TN:TNT” }，这就为下拉框设置了三个可选值。注意，冒号前面的代表的是值，冒号后面代表的是显示值。 第二种方式是用对象来设置editoptions的value属性，这个时候，value值要用{}包括起来，像这样： editoptions:{value:{1:'One',2:'Two'}}。
71
Jqgrid中文文档---整理:沧浪雾月客
第三种方式，是为editoptions设置dataUrl参数。意思就是select的值，是通过一个URL来获取的，比如一个Ajax请求的返回值。特别需要注意的是，在这种情况下，URL的返回值必须是包括select以及option这些HTML标签的。就像这样：.这种情况下，还可以在editoptions中设置是否允许多选，size等等。
设置image的时候，editoptions的src属性用来指定图片的地址。
custom类型就是通过一个函数来指定需要编辑的元素，并返回需要提交的值。
函数的定义在editoptions中说明，分别是custom_element用来指定哪一个函数用来创建编辑框，注意这里函数必须返回一个新的DOM元素，函数的参数一个是值Value，另外一个是colModel的editoptions值。
另外一个是custom_value，这个函数用来在编辑完成之后返回本编辑框的值，这个函数的参数是元素对象。大概的调用格式如下：
editoptions
除了上面介绍的editoptions选项外，我们还可以设置defaultValue等等，更复杂的东西，比如dataEvents就不介绍了。 editrules
editrules是用来设置一些可用于可编辑列的colModel的额外属性的。大
72
Jqgrid中文文档---整理:沧浪雾月客
多数的时候是用来在提交到服务器之前验证用户的输入合法性的。比如editrules:{edithidden:true, required:true....}。 可选的属性包括：
edithidden：只在Form Editing模式下有效，设置为true，就可以让隐藏字段也可以修改。
required：设置编辑的时候是否可以为空（是否是必须的）。
number：设置为true，如果输入值不是数字或者为空，则会报错。 integer： minValue： maxValue： email：
url：检查是不是合法的URL地址。 date： time：
custom：设置为true，则会通过一个自定义的js函数来验证。函数定义在custom_func中。
custom_func:传递给函数的值一个是需要验证value，另一个是定义在colModel中的name属性值。函数必须返回一个数组，一个是验证的结果，true或者false，另外一个是验证错误时候的提示字符串。形如[false,”Please enter valid value”]这样。 自定义验证的例子： < function mypricecheck(value, colname) { if (value < 0 && value >20) return [false,\"Please enter value between 0 and 20\"]; else return [true,\"\"]; } jQuery(\"#grid_id\").jqGrid({ ... colModel: [ ... {name:'price', ..., editrules:{custom:true,
custom_func:mypricecheck....}, editable:true }, ... ] ... }); // >
73
Jqgrid中文文档---整理:沧浪雾月客
formoptions（只在Form Editing方式下有效），他的主要作用是用来重新排序Form中的编辑元素，同时可以在编辑元素前或者编辑元素后增加一些信息（比如，一些提示信息，或者一个红色的*表示必须要填写等等）。 可选的属性如下：
elmprefix：字符串值，如果设置了，则会在编辑框之后出现一些内容(可能是HTML的内容)
elmsuffix：字符串值，如果设置了，则会在编辑框之前出现一些内容(可能是HTML的内容)
label：字符串值，如果设置了，则这个值会替换掉colNames中的值出现作为该编辑框的标签显示 rowpos：数字值，决定元素行在Form中的位置（相对于文本标签again with the text-label）
colpos：数字值，决定元素列在Form中的位置（相对于标签again with the label）
两个编辑框可以有相同的rowpos值，但是colpos值不同，这会把这两个编辑框放到Form的同一行中。
特别注意：如果设置了rowpos以及colpos的值，强烈推荐为所有的其他编辑元素都设置这些值。
74
因篇幅问题不能全部显示，请点此查看更多更全内容