jqGrid基本用法与示例

转自：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的值是行数据的数组封装

{
"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=de

jqGrid基本用法与示例的更多相关文章

jquery.validate.min.js 用法方法示例
页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
SIP中OPTIONS方法的用法及示例
SIP中OPTIONS方法的用法及示例用OPTIONS方法实现Keep Alive SIP keep-alive方法
Web前端设计:Html强制不换行<nobr>标签用法代码示例
在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现.它起到的作用与word-break:keep-all 是一样的.nobr 是 ...
Jqgrid的用法总结与分页功能的拓展
这是本人写的第一个与技术相关的博客,但是非挑战技术的,而是对工作的总结,另外加一点点拓展. Jqgrid的功能十分强大,强大到可以做到与数据grid相关的任何功能,同时由于在用的过程中总是不能够一气呵 ...
SerialPort类的用法与示例
转:https://www.cnblogs.com/hwBeta/p/6926363.html Microsoft .Net框架SerialPort类的用法与示例从Microsoft .Net 2. ...
(转)轻松掌握shell编程中数组的常见用法及示例
缘起:在老男孩进行linux培训shell编程教学中,发现不少水平不错的网友及同学对数组仍然很迷糊,下面就给大家分享下数组的用法小例子,希望能给大家一点帮助.其实SHELL的数组很简单,好用.我们学习 ...
ioctl在socket中的一些用法及示例
原文: http://blog.chinaunix.net/uid-20692625-id-3172833.html ----------------------------------------- ...
JS定时器的用法及示例
JS定时器的用法及示例目录 js 定时器的四个方法示例一示例二示例三 js 定时器的四个方法 setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式.方法会不停地调用函 ...
[C#] Microsoft .Net框架SerialPort类的用法与示例
从Microsoft .Net 2.0版本以后,就默认提供了System.IO.Ports.SerialPort类,用户可以非常简单地编写少量代码就完成串口的信息收发程序.本文将介绍如何在PC端用C# ...

随机推荐

dos脚本
关于dos命令行脚本编写 dos常用命令另查开始之前先简单说明下cmd文件和bat文件的区别:在本质上两者没有区别,都是简单的文本编码方式,都可以用记事本创建.编辑和查看.两者所用的命令行代码也 ...
php查询快递的类
<?php/** * Express.class.php 快递查询类 * * @copyright widuu * @license ...
yarn不是内部指令 react-native不是内部指令
1.先查看是否全局安装 2.我遇到的是,全局安装了,依然有问题. 昨天装了一个高版本的node,成功后有个黑窗口我点了几个回车,在我的环境变量里加了一大推重复的变量,删除就正常了,如下图是我删完之后的
Js/Bind()的认识
1.bind( eventType [, eventData], handler(eventObject))2.向绑定的对象上面提供一些事件方法的行为.其中三个参数的意义分别代表: 一.eventTy ...
Ubuntu安装lrzsz
本文主要介绍在Ubuntu下安装lrzsz工具,方便windows和linux间的文件上传下载方法1:二进制包自动安装1.1 在终端中,输入命令,自动安装,简单方便: sudo apt-get in ...
AspectJ的拓展学习--织入顺序和通知参数指定
前言: 其实spring的aop非常的强大, 因此研究一下AspectJ还是有必要, 而不是仅仅停留在初级的阶段. 比如spring的事务是基于aop来实现的, 如果不能深入的研究, 可能很多知识点, ...
python 4
一.列表相关操作 l = ['布偶猫', '小断腿', '大白'] # . append l.append('哎呀') print(l) # . insert l.insert(, '小猪佩琪') p ...
hadoop 单机模式伪分布式完全分布式区别
1.单机(非分布式)模式这种模式在一台单机上运行,没有分布式文件系统,而是直接读写本地操作系统的文件系统,一般仅用于本地MR程序的调试 2.伪分布式运行模式这种模式也是在一台单机上运行,但用不同的 ...
jquery绑定回车事件
//回车事件绑定 $(".left-content").keyup(function(event){ var theEvent = event || window.event; v ...
（26）基于cookie的登陆认证（写入cookie、删除cookie、登陆后所有域下的网页都可访问、登陆成功跳转至用户开始访问的页面、使用装饰器完成所有页面的登陆认证）
获取cookie request.COOKIES['key'] request.get_signed_cookie(key, default=RAISE_ERROR, salt='', max_age ...

jqGrid基本用法与示例

jqGrid基本用法与示例的更多相关文章

随机推荐

热门专题