JqGrid帮助⽂档
JQGrid是⼀个在jquery基础上做的⼀个表格控件，以ajax的⽅式和服务器端通信。
是⼀个在线的演⽰项⽬。在这⾥，可以知道jqgrid可以做什么事情。
下⾯是转⾃其他⼈blog的⼀个学习资料，与其说是学习资料，说成查询帮助⽂档更加合适。
jqGrid学习之 ------------- 安装
jqGrid安装很简单，只需把相应的css、js⽂件加⼊到页⾯中即可。
按照官⽹⽂档:
/myproject/css/
ui.jqgrid.css
/ui-lightness/
/images/
jquery-ui-1.7.2.custom.css
/myproject/js/
/i18n/
grid.locale-bg.js
list of all language files
….
<
jquery-1.3.2.min.js
jquery.jqGrid.min.js
在页⾯中写法：
Java代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="/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="js/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/src/grid.loader.js" type="text/javascript"></script>
</head>
<body>
...
</body>
</html>
需要说明的是，jquery-ui的字体⼤⼩与jqgrid字体⼤⼩不⼀致，故需要在页⾯上在加上⼀段
style来指定页⾯上⽂字⼤⼩。
jqGrid⽪肤
jqGrid原理
jqGrid是典型的B/S架构，服务器端只是提供数据管理，客户端只提供数据显⽰。换句话说，jqGrid可以以⼀种更加简单的⽅式来展现你数据库的信息，⽽且也可以把客户端数据
传回给服务器端。
对于jqGrid我们所关⼼的就是：必须有⼀段代码把⼀些页⾯信息保存到数据库中，⽽且也能够把响应信息返回给客户端。jqGrid是⽤ajax来实现对请求与响应的处理。jqGrid参数
名称类型描述默认值可修改
url string获取数据的地址
datatype string从服务器端返回的数据类型，默认xml。可选类型：
xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside
mtype string ajax提交⽅式。POST或者GET，默认GET
colNames Array列显⽰名称，是⼀个数组对象
colModel Array常⽤到的属性：name 列显⽰的名称；index 传到服务器端⽤来排序⽤
的列名称；width 列宽度；align 对齐⽅式；sortable 是否可以排序
pager string定义翻页⽤的导航栏，必须是有效的html元素。翻页⼯具栏可以放置
在html页⾯任意位置
rowNum int在grid上显⽰记录条数，这个参数是要被传递到后台
rowList array⼀个下拉选择框，⽤来改变显⽰记录数，当选择时会覆盖rowNum参jq字符串转数组
数传递到后台
sortname string默认的排序列。可以是列名称或者是⼀个数字，这个参数会被提交到
后台
viewrecords boolean定义是否要显⽰总记录数
caption string表格名称
[a1] object对ajax参数进⾏全局设置，可以覆盖ajax事件null是
[a2] object对ajax的select参数进⾏全局设置null是
altclass String⽤来指定⾏显⽰的css，可以编辑⾃⼰的css⽂件，只有当altRows设
为 ture时起作⽤ui-priority-secondary
altRows boolean设置表格 zebra-striped 值
autoencode boolean对url进⾏编码false是autowidth boolean如果为ture时，则当表格在⾸次被创建时会根据⽗元素⽐例重新调整
表格宽度。如果⽗元素宽度改变，为了使表格宽度能够⾃动调整则需
要实现函数：setGridWidth
false否
cellLayout integer定义了单元格padding + border 宽度。通常不必修改此值。初始值为5是cellEdit boolean启⽤或者禁⽤单元格编辑功能false是cellsubmit String定义了单元格内容保存位置‘remote’是cellurl String单元格提交的url空值是datastr String xmlstring或者jsonstring空值是deselectAfterSort boolean只有当datatype为local时起作⽤。当排序时不选择当前⾏true是direction string表格中⽂字的显⽰⽅向，从左向右（ltr）或者从右向左（rtr）ltr否editurl string定义对form编辑时的url空值是emptyrecords string当返回的数据⾏数为0时显⽰的信息。只有当属性 viewrecords 设置为
ture时起作⽤
是ExpandColClick boolean当为true时，点击展开⾏的⽂本时，treeGrid就能展开或者收缩，不仅
仅是点击图⽚
true否ExpandColumn string指定那列来展开tree grid，默认为第⼀列，只有在treeGrid为true时起
作⽤
空值否[a3] boolean当为true时，会在翻页栏之上增加⼀⾏false否forceFit boolean当为ture时，调整列宽度不会改变表格的宽度。当shrinkToFit 为false
时，此属性会被忽略
false否gridstate string定义当前表格的状态：'visible' or 'hidden'visible否gridview boolean构造⼀⾏数据后添加到grid中，如果设为true则是将整个表格的数据都
构造完成后再添加到grid中，但treeGrid, subGrid, or
afterInsertRow 不能⽤
false是
height mixed表格⾼度，可以是数字，像素值或者百分⽐150否hiddengrid boolean当为ture时，表格不会被显⽰，只显⽰表格的标题。只有当点击显⽰
表格的那个按钮时才会去初始化表格数据。
false否hidegrid boolean启⽤或者禁⽤控制表格显⽰、隐藏的按钮，只有当caption 属性不为空
时起效
true否hoverrows boolean当为false时mouse hovering会被禁⽤false是jsonReader array描述json 数据格式的数组否lastpage integer只读属性，定义了总页数0否lastsort integer只读属性，定义了最后排序列的索引，从0开始0否loadonce boolean如果为ture则数据只从服务器端抓取⼀次，之后所有操作都是在客户
端执⾏，翻页功能会被禁⽤
false否loadtext string当请求或者排序时所显⽰的⽂字内容否loadui string当执⾏ajax请求时要⼲什么。disable禁⽤ajax执⾏提⽰；enable默
认，当执⾏ajax请求时的提⽰； block启⽤Loading提⽰，但是阻⽌其
他操作
enable是
multikey string只有在multiselect设置为ture时起作⽤，定义使⽤那个key来做多选。
shiftKey，altKey，ctrlKey
空值是
multiboxonly boolean只有当multiselect = true.起作⽤，当multiboxonly 为ture时只有选择
checkbox才会起作⽤
false是multiselect boolean定义是否可以多选false否multiselectWidth integer当multiselect为true时设置multiselect列宽度20否page integer设置初始的页码1是pagerpos string指定分页栏的位置center否pgbuttons boolean是否显⽰翻页按钮true否pginput boolean是否显⽰跳转页⾯的输⼊框true否pgtext string当前页信息是prmNames array Default valuesprmNames: {page:“page”,rows:“rows”, sort:
“sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 当参数为
null时不会被发到服务器端
none是
postData array此数组内容直接赋值到url上，参数类型：{name1:value1…}空array是reccount integer只读属性，定义了grid中确切的⾏数。通常情况下与records属性相
同，但有⼀种情况例外，假如rowNum=15，但是从服务器端返回的记
0否
20，那么records值是20，但reccount值仍然为15，⽽且表格中
15条记录。
string left, center, right否
integer否
string{0} 为记录数开始，{1}为记录数结束。viewrecords
ture时才能起效，且总记录数⼤于0时才会显⽰此信息
string class到⼀个列上⽤来显⽰列宽度调整时的效果否
array rowNum参数否
否
boolean ture则会在表格左边新增⼀列，显⽰⾏顺序号，从1开始递增。
'rn'.
integer rownumbers为true，则可以设置column的宽度否
array否
boolean true时，翻页栏被禁⽤，使⽤垂直滚否
integer否
boolean true时让所选择的⾏可见是
array否
false，则列宽度使⽤colModel指定的宽度
boolean否
string是
string asc or desc）是
boolean suggrid否
array模型否
mixed dataType是
否
array
body layer），如：[true,”both”] 。⼯具栏位置可选
“top”,”bottom”, “both”. 如果⼯具栏在上⾯，则⼯具栏id为“t_”+表格
；如果在下⾯则为 “tb_”+表格id；如果只有⼀个⼯具栏则为 “t_”+表
id
boolean treegrid模式否
string所使⽤的⽅法否
array{plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-否
array colModel且加在colModel定义的后⾯否
numeric元素的级别，否
array request中取得的⼀些⽤户信息否
boolean true时把userData放到底部，⽤法：如果userData的值与
是
的值相同，那么此列就显⽰正确的值，如果不等那么此列就
boolean否
false就是只显⽰当前排序列的
vertical：排序图标垂直放
horizontal：排序图标⽔平放置；第三个参数指单击功能，true：
false：单击图标排序。说明：如果第三个参数为false
ture否则不能排序
number colModel中定义的宽度否
array xml数据结构的描述否
Jqgrid学习 -------ColModel API
ColModel 是jqGrid⾥最重要的⼀个属性，设置表格列的属性。
属性数据类型备注默认值
align string left, center, right.left
classes string设置列的css。多个class之间⽤空格分隔，如：'class1 class2' 。表格默认的css属性是ui-ellipsis empty string 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编辑的⼀系列选项。
empty
{name:’__department_id’,index:’__department_id’,width:200,editable:true,edittype:’select’,editoptions:
{dataUrl:”${ctx}/admin/deplistforstu.action”}}，这个是演⽰动态从服务器端获取数据。
empty editrules array编辑的规则{name:’age’,index:’age’, width:90,editable:true,editrules:
{edithidden:true,required:true,number:true,minValue:10,maxValue:100}}，设定年龄的最⼤值为100，最
⼩值为10，⽽且为数字类型，并且为必输字段。
edittype string可以编辑的类型。可选值：text, textarea, select, checkbox, password, button, image
fixed boolean列宽度是否要固定不可变false formoptions array对于form进⾏编辑时的属性设置empty formatoptions array对某些列进⾏格式化的设置none formatter mixed对列进⾏格式化时设置的函数名或者类型
none
{name:’sex’,index:’sex’, align:’center’,width:60,editable:true,edittype:’select’,editoptions: {value:’0：待
定;1：男;2:⼥’},formatter:function(cellvalue, options, rowObject){
var temp = “<img src=’${ctx}/jquery-ui-1.7.2.custom/css/img/”
if(cellvalue==1){
temp = temp +”user-white.png”;
} else if(cellvalue==2){
temp = temp +”user-white-female.png”;
} else {
temp = temp + “user-silhouette.png”;
}
temp = temp + “‘ border=’0′ />”
return temp;
}},//返回性别的图标。
hidedlg boolean是否显⽰或者隐藏此列false hidden boolean在初始化表格时是否要隐藏此列false index string索引。其和后台交互的参数为sidx empty 定义了返回的json数据映射
当从服务器端返回的数据中没有id时，将此作为唯⼀rowid使⽤只有⼀个列可以做这项设置。如果设置
多于⼀个，那么只选取第⼀个，其他被忽略
如果colNames为空则⽤此值来作为列的显⽰名称，如果都没有设置则使⽤name 值
表格列的名称，所有关键字，保留字都不能作为名称使⽤包括subgrid, cb and rn.
是否可以被resizable
在搜索模式下，定义此列是否可以作为搜索列
设置搜索参数
float/number/currency - 排序数字date - 排序⽇期text - 排序⽂本
搜索数据时的url
默认列的宽度，只能是象素值，不能是百分⽐
定义当前列跟返回的xml数据之间的映射关系
‘unformat’单元格值
Jqgrid学习 -------数据
jqGrid可⽀持的数据类型：xml、json、jsonp、local or clientSide、xmlstring、jsonstring
、script、function (…)。
Json数据
需要定义jsonReader来跟服务器端返回的数据做对应，其默认值：
· jsonReader : {
· root: "rows",
·
page: "page",
· total: "total",
· records: "records",
· repeatitems: true,
· cell: "cell",
· id: "id",
· userdata: "userdata",
· subgrid: {root:"rows",
· repeatitems: true,
· cell:"cell"
· }
这样服务器端返回的数据格式：
· {
· total: "xxx",
· page: "yyy",
· records: "zzz",
· rows : [
· {id:"1", cell:["cell11", "cell12", "cell13"]},
· {id:"2", cell:["cell21", "cell22", "cell23"]},
· ...
· ]
· }
jsonReader的属性
total总页数
total总页数
page当前页
records查询出的记录数
rows包含实际数据的数组
id⾏id
cell当前⾏的所有单元格
⾃定义：
· jQuery("#gridid").jqGrid({
· ...
·
jsonReader : {
· root:"invdata",
· page: "currpage",
· total: "totalpages",
· records: "totalrecords",
· cell: "invrow"
· },
· ...
· });
· totalpages: "xxx",
· currpage: "yyy",
·
totalrecords: "zzz",
· invdata : [
· {id:"1", invrow:["cell11", "cell12", "cell13"]},
· {id:"2", invrow:["cell21", "cell22", "cell23"]},
· ...
· ]
repeatitems
指明每⾏的数据是可以重复的，如果设为false，则会从返回的数据中按名字来搜索元素，这个名字就是colModel中的名字
· jsonReader : {
· root:"invdata",
· page: "currpage",
· total: "totalpages",
· records: "totalrecords",
· repeatitems: false,
· id: "0"
· }
· totalpages: "xxx",
· currpage: "yyy",
· totalrecords: "zzz",
· invdata : [
· {invid:"1",invdate:"cell11", amount:"cell12", tax:"cell13", total:"1234", note:"somenote"},
· {invid:"2",invdate:"cell21", amount:"cell22", tax:"cell23", total:"2345", note:"some note"},
·
...
· ]
此例中，id属性值为“invid”。
⼀旦当此属性设为false时，我们就不必把所有在colModel定义的name值都赋值。因为是按name来进⾏搜索元素的，所以他的排序也不是按colModel中指定的排序结果。
⽤户数据（user data）
在某些情况下，我们需要从服务器端返回⼀些参数但并不想直接把他们显⽰到表格中，⽽是想在别的地⽅显⽰，那么我们就需要⽤到userdata标签
· jsonReader: {
· ...
· userdata: "userdata",
· ...
· }
· {
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论