一 下载库
官网:http://guriddo.net/
源码:https://github.com/tonytomov/jqGrid
下载地址:
http://guriddo.net/?page_id=103292
引入:
<link href="../css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="../css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../css/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="../js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script>
二 安装
jgGrid需要一个jQueryUI的主题,可以从官网下载
三 jqGrid属性
url string 获取数据的地址datatype string 从服务器端返回的数据类型,默认xml。可选类型:xml,local,json,jsonnp,script,xmlstring,jsonstring,clientside
mtype string ajax提交方式。POST或者GET,默认GET
multiselect boolean 定义是否可以多选
colNames Array 列显示名称,是一个数组对象
colModel Array 常用到的属性:name 列显示的名称;index 传到服务器端用来排序用的列名称;width 列宽度;align 对齐方式;sortable 是否可以排序
pager string 定义翻页用的导航栏,必须是有效的html元素。翻页工具栏可以放置在html页面任意位置
rowNum integer 在grid上显示记录条数,这个参数是要被传递到后台
rowList Array 一个下拉选择框,用来改变显示记录数,当选择时会覆盖rowNum参数传递到后台
sortname string 默认的排序列。可以是列名称或者是一个数字,这个参数会被提交到后台
viewrecords boolean 定义是否要显示总记录数
cellEdit boolean 启用或者禁用单元格编辑功能
datastr boolean xmlstring或者jsonstring
height number 表格高度,可以是数字,像素值或者百分比
width number 如果设置则按此设置为主,如果没有设置则按colModel中定义的宽度计算
jsonReader Array 描述json 数据格式的数组
page integer 设置初始的页码
pgbuttons boolean 是否显示翻页按钮
pginput boolean 是否显示跳转页面的输入框
pgtext boolean 当前页信息
scroll boolean 创建一个动态滚动的表格,当为true时,翻页栏被禁用,使用垂直滚动条加载数据,且在首次访问服务器端时将加载所有数据到客户端。当此参数为数字时,表格只控制可见的几行,所有数据都在这几行中加载
shrinkToFit boolean 此属性用来说明当初始化列宽度时候的计算类型,如果为ture,则按比例初始化列宽度。如果为false,则列宽度使用colModel指定的宽度
sortable boolean 是否可以排序
sortname string 排序列的名称,此参数会被传到后台
sortorder string 排序顺序,升序或者降序(asc or desc)
sopt Array 比较运算符,可任意组合('eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc')
toolbar Array 表格的工具栏。数组中有两个值,第一个为是否启用,第二个指定工具栏位置(相对于body layer),如:[true,”both”] 。工具栏位置可选值:“top”,”bottom”, “both”. 如果工具栏在上面,则工具栏id为“t_”+表格id;如果在下面则为 “tb_”+表格id;如果只有一个工具栏则为 “t_”+表格id
navGrid Array 功能按钮(增删改查,搜,刷新)设置
四 jqGrid-ColModel属性
align string left,center,rightclasses string 设置列的css。多个class之间用空格分隔,如:'class1 class2' 。表格默认的css属性是ui-ellipsis
datefmt string ”/”, ”-”, and ”.”都是有效的日期分隔符。y,Y,yyyy 年YY, yy 月m,mm for monthsd,dd 日.
editable boolean 单元格是否可编辑
fixed boolean 列宽度是否要固定不可变
hidden boolean 在初始化表格时是否要隐藏此列
search boolean 在搜索模式下,定义此列是否可以作为搜索列
searchoptions Array 设置搜索参数
sortable boolean 是否可排序
width number 默认列的宽度,只能是象素值,不能是百分比
五 jqGrid数据-Json
需要定义jsonReader来跟服务器端返回的数据做对应,其默认值:jsonReader : {
root: "rows",
page: "page",//当前页
total: "total",//总页数
records: "records", //查询出的记录数
repeatitems: true,
cell: "cell",//当前行的所有单元格
id: "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"]},
...
]
}
六 jqGrid-事件
afterInsertRow rowidrowdatarowelem 当插入每行时触发。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对象
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 向服务器发起请求时会把数据进行序列化,用户自定义数据也可以被提交到服务器端
示例:
jQuery("#gridid")。jqGrid({
onSelectRow:function(id){
//事件处理代码
}
});