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

随机推荐

Asp .Net Core 2.0 登录授权以及多用户登录
用户登录是一个非常常见的应用场景 .net core 2.0 的登录方式发生了点变化,应该是属于是良性的变化,变得更方便,更容易扩展. 配置打开项目中的Startup.cs文件,找到Configur ...
JAVA学习笔记系列2-Java程序的运行机制
计算机高级语言的类型主要有编译型和解释型两种,而java语言是两种类型的结合. java首先利用文本编辑器编写java源程序,源文件后缀名为.java,再利用编译器(javac)将源程序编译成字节码文 ...
ChinaCock界面控件介绍-TCCBarcodeCreator
条码生成器,可以生成各种条码,包括二维码.这是一个不可视控件.用起来依旧简单. 属性说明: BarCodeColor:生成条码的颜色 BarcodeFormat:生成条码的类型,支持的条码类型: Bo ...
Locust 集合点
直接编写接口事务脚本对后台接口进行测试:有时测试需要让所有并发用户完成初始化后再进行压力测试,这就需要类似于LoadRunner中的集合点的概念,由于框架本身没有直接封装,有如下办法实现: from ...
Python语法教程总结规范
Python语法易错点记录本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享. ...
Python全栈之路----数据类型—字典
字典:可变,一种key-value的数据类型 info = { 'stu1101' : 'TengLan Wu' , 'stu1102' : 'LongZe Luola' , 'stu1103' : ...
spring cloud/spring boot同时支持http和https访问
l老规矩为大家祭出原帖:https://www.cnblogs.com/lianggp/p/8136540.html 不再转述
PTA——蠕虫爬井
PTA 7-46 爬动的蠕虫 #include<stdio.h> int main() { ; scanf("%d%d%d",&N,&U,&D) ...
hdu5003 Osu！排序实现水题
Osu! is a famous music game that attracts a lot of people. In osu!, there is a performance scoring s ...
将文本转化为Numpy的矩阵
def file2matrix(filename): fr = open(filename) numberOfLines = len(fr.readlines()) #get the number o ...

jqGrid基本用法与示例

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

随机推荐

热门专题