一、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> <!-- 引用jQueryUI的start主题 --> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css" /> <!-- 引用jqGrid样式 --> <link rel="stylesheet" type="text/css" href="/resources/css/ui.jqgrid.css" /> <!-- 引用jQuery --> <script type="text/javascript" src="/resources/scripts/libs/jquery-1.10.2.min.js"></script> <!-- 引用jqGrid --> <script type="text/javascript" src="/resources/scripts/libs/jquery.jqGrid.min.js"></script> <!-- 引用jqGrid提供的国际化，否则中文会报JS错误 --> <script type="text/javascript" src="/resources/scripts/i18n/grid.locale-cn.js"></script> <!-- 引用jqGrid测试js --> <script type="text/javascript" src="/resources/scripts/init.js"></script> </head> <body> <!-- jqGrid必要DOM，用于创建表格列表 --> <table id="list"></table> <!-- jqGrid必要DOM，用于创建翻页 --> <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的值是行数据的数组封装
{
"page":"1",
"total":2,
"records":"13",
"rows":[
{
"id":"13",
"cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00",null]
},{
"id":"12",
"cell":["12","2007-10-06","Client 2","700.00","140.00","840.00",null]
},{
"id":"11",
"cell":["11","2007-10-06","Client 1","600.00","120.00","720.00",null]
},{
"id":"10",
"cell":["10","2007-10-06","Client 2","100.00","20.00","120.00",null]
},{
"id":"9",
"cell":["9","2007-10-06","Client 1","200.00","40.00","240.00",null]
},{
"id":"8",
"cell":["8","2007-10-06","Client 3","200.00","0.00","200.00",null]
},{
"id":"7",
"cell":["7","2007-10-05","Client 2","120.00","12.00","134.00",null]
},{
"id":"6",
"cell":["6","2007-10-05","Client 1","50.00","10.00","60.00",""]
},{
"id":"5",
"cell":["5","2007-10-05","Client 3","100.00","0.00","100.00","no tax at all"]
},{
"id":"4",
"cell":["4","2007-10-04","Client 3","150.00","0.00","150.00","no tax"]
}
]
}
格式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=desc
相关推荐
jqgrid全套示例代码
jqGrid tree 树 懒加载 示例. 虽然不是难题,但是没有接触过 jqgrid 的人,还是要花点时间的. 项目为 springboot 项目 说明1: 展开节点时, jqGrid 会自动向 url 发送请求, 请求会附带一系列参数, 其中 nodeid :当前...
在ASP.NET 下的jqgrid 的示例
jqGrid源文件+官方MVC示例,从官方网站下载下来的.
一个简单的jqGrid示例，文件内包含多个文件夹(文件夹内是css和js为html页面引用)和三个html页面，一个页面为文档，另外两个页面显示数据，这两个页面都是从Javascript数组为数据源来加载数据，只是两个数据的内容...
jqgrid文档及api的部分翻译。 以及html头文件的导入方法。
MVC4网站中集成jqGrid表格插件-示例源代码
简单json数据类型的jqGrid完整项目示例，代码里有详尽注释。eclipse直接导入，配置好tomcat6.0即可运行。可以帮助jqGrid快速入门。
MVC4网站中集成jqGrid表格插件-示例源代码,包含基础basecontroller,以及5个controller
第一个jqGrid例子 第一个jqGrid例子 第一个jqGrid例子
jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40，官网上面demo40下载下来是没法用的，因为里面有些东西是错的，当然我这个demo40还是还有是些不足，比喻说数据库中少表导致...
jqGrid4.1一个简单的例子。使用jquery+wcf+json的方式说明addJSONData方法。
jqGrid 4.1 以json方式传递参数实现添加、删除、更新操作
jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid 学习 2 jQuery 学习之：jqGrid 表格插件 参数配置 4 ...使用 jqGrid 修改数据并检查 69">jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid [更多]
在mvc 中 应用 jqgrid技术，一个在mvc中应用 最广泛的表格插件。
jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料。 jqGrid中文文档.doc------附加放在这里的其它资料。 jqGrid的使用.doc------附加放在这里的其它资料。
jqGrid详解及高级应用
jqgrid
JqGrid中文API文档，包含了基础的JqGrid控件的属性方法事件等，有如何使用JqGrid的Demo.
jqgrid中文文档API，使用JQGRID