jqGrid基本用法与示例

2024-10-19 23:30:03

转自：https://chuanlu.iteye.com/blog/1953544

一、jqGrid的基本用法

1、html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqgrid-test</title>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/resources/css/ui.jqgrid.css" />
<script type="text/javascript" src="/resources/scripts/libs/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/resources/scripts/libs/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="/resources/scripts/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="/resources/scripts/init.js"></script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
</body>
</html>

2、init.js文件

jQuery("#list").jqGrid({
// 请求后台json数据的url
url:'list.json',
// 后台返回的数据格式
datatype: "json",
// 列表标题
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
// 列表模型
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name asc, invdate', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
// 一页显示的行记录数
rowNum:10,
// 表格宽度
width:700,
// 表格高度
height:200,
// 翻页控制条中每页显示记录数可选集合
rowList:[10,20,30],
// 翻页DOM
pager: '#pager',
// 默认排序字段
sortname: 'invdate',
// 是否显示行号，默认值是false，不显示
viewrecords: true,
// 默认字段排序顺序，默认asc，正序
sortorder: "desc",
// 列表总标题
caption:"测试",
// 数据加载完成并且DOM创建完毕之后的回调函数
gridComplete: function(){
//TODO
},
// 单元格被点击选择回调函数， rowid为改行数据id值，iCol为改行索引，cellcontent为该行html代码，e为click事件
onCellSelect: function(rowid, iCol, cellcontent,e){
//TODO
}
});

二、后台返回的数据及格式

格式1 ：行数据包含id、cell两个固定属性，id的值是行数据的主键值，cell的值是行数据的数组封装

格式2 ：直接把后台行数据json格式化

{
"page":"1",
"total":2,
"records":"13",
"rows":[
{
"id":"1",
"invdate":"2007-10-06",
"name":"Client 3",
"amount":"1000.00",
"tax":"0.00",
"total":"1000.00",
"note": null
},
{
"id":"2",
"invdate":"2007-10-06",
"name":"Client 3",
"amount":"1000.00",
"tax":"0.00",
"total":"1000.00",
"note": null
},
...
]
}

三、后台返回数据的说明

total	查询的总页数
page	查询的当前页码
records	查询的总记录数
rows	当前查询页的数据集合
id	行数据主键，默认值0
cell	行数据的数组格式封装，默认值“”

四、自定义后台返回数据属性

后台返回的数据格式必须满足上述两种格式，否则jqGrid解析就会错误或者某些功能失效。

更多情况下，后台返回的数据格式是符合上述两种格式之一的，只是属性名不一致而已。

比如jqGrid的page是当前页面，而多数应用程序可能会自定义为currPage，这个时候jqGrid

就无法解析了，不过jqGrid提供了jsonReader属性，可以让我们覆盖它原有的属性。

我们先看一下它的原有属性：

localReader = {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "id",
userdata: "userdata",
subgrid: {root:"rows", repeatitems: true, cell:"cell"}
}

我们只需要定义jqGrid时设置jsonReader属性即可：

$(document).ready(function(){
jQuery("#list").jqGrid({
// 请求后台json数据的url
url:'list.json',
...
// 重写后台返回数据的属性
jsonReader : {
root : 'list', // 将rows修改为list
page : 'currPage', // 将page修改为currPage
total : 'totalPage', // 将total修改为totalPage
records : 'totals' // 将records修改为totals
}
});
});

五、自定义请求参数

jqGrid异步请求的默认请求参数属性包含：

{
page:"page",
rows:"rows",
sort:"sidx",
order:"sord",
search:"_search",
nd:"nd",
id:"id",
oper:"oper",
editoper:"edit",
addoper:"add",
deloper:"del",
subgridid:"id",
npage:null,
totalrows:"totalrows"
}

比如：http://localhost:8080/list.json?_search=false&nd=1381300504786&rows=10&page=1&sidx=invdate&sord=desc

如果需要改写请求参数属性，jqGrid也提供了prmNames这个属性用来修改请求参数属性。

我们只需要定义jqGrid时设置prmNames属性即可：

$(document).ready(function(){
jQuery("#list").jqGrid({
url:'list.json',
...
prmNames : {
'page':'currPage',
'rows':'pageSize'
}
});
});

上面的请求示例就会修改为

http://localhost:8080/list.json?_search=false&nd=1381300504786&pageSize=10&currPage=1&sidx=invdate&sord=de

最新文章

热门文章