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# ...

随机推荐

nodejs -- event 模块, 事件模块.
1. 注册事件 on 或者 addListener,触发事件 emit 1-1简单的使用: var EventEmitter = require('events').EventEmitter; var ...
入门项目 A5-2 interface-shop 第三方接口2
from db import db_handler # 从db数据包下面调用db处理模块,以使用其内部的名称空间与函数功能 # 添加购物车接口 def add_shopping_cart_interf ...
ubuntu下安装php7
apt-cache pkgnames | grep php7.0 sudo apt-get install -y php7.0 libapache2-mod-php7.0 php7.0-cli php ...
自动化测试-8.selenium操作元素之键盘和鼠标事件
前言在前面的几篇中重点介绍了一些元素的定位方法,定位到元素后,接下来就是需要操作元素了.本篇总结了web页面常用的一些操作元素方法,可以统称为行为事件有些web界面的选项菜单需要鼠标悬停在某个元素 ...
HttpConnection详解【转】
HttpConnection详解[转] HttpURLConnection对象 1.从Internet获取网页,发送请求,将网页以流的形式读回来. 步骤:1)创建一个URL对象:URL url ...
【转载】强化学习（九）Deep Q-Learning进阶之Nature DQN
原文地址: https://www.cnblogs.com/pinard/p/9756075.html ------------------------------------------------ ...
How Region Split works in Hbase
A region is decided to be split when store file size goes above hbase.hregion.max.filesize or accord ...
Win10+Ubuntu双系统删除Ubuntu方法
前情提要 Win10下试了许多种方法,什么MbrFix.EasyBCD.亦或是Boot Option.都不行.前两者不行,操作之后重启无法直接进入Windows,后者也不行,找不到所谓的Delete ...
django jquery ajax 知识点
示例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div id='d'>1</div> <div> <div id='i1' nam ...
oracle左关联+号表示方式
1.emp表和dept表 2.emp表中empno为8888的这条数据,没有部门编号,以emp表为主表,左关联查询部门信息sql语句如下: select * from emp e,dept d whe ...

jqGrid基本用法与示例

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

随机推荐

热门专题