jqgrid教程（项目实战）

原创

于 2016-07-23 08:06:54 发布 · 1.6w 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#jqgrid #ajax #grid #javascript

jqGrid是一款强大的web表格组件，采用ajax技术实现客户端异步数据加载，适用于多种后端语言。本文将从背景介绍、原理、参数、ColModel API、事件、方法、实战应用及更多功能进行详尽解析，帮助开发者更好地掌握和运用jqGrid。

后台管理助手jqgrid

jqGrid是使用ajax技术代表和处理web表格数据的一种解决方案，由于在客户端使用ajax异步加载数据，使得它能够与许多的后端语言如：PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl中的任何一种结合起来进行开发。下面我从jqGrid的背景到项目实战进行介绍，对于有的功能可能存在疑问的可以参考：jqGrid官方网站

jqGrid背景介绍
jqGrid原理
jqGrid参数说明
jqGrid中ColModel API
jqGrid事件
jqGrid方法
项目实战之jqGrid应用
jqGrid其他功能介绍
项目源码

jqGrid背景介绍

jqGrid是Trirand软件开发公司的Tony Tomov开发的一个方便人们开发使用的web组件，它包含了许多免费和开源的库如：jQuery, ThemeRoller, & jQuery UI等，同时最新的版本已经支持bootstrapUI，Tony最初的时候是因为他需要一种方式来表示数据库信息，这种方式有速度上的要求同时还要独立于服务器端技术和后台数据库，于是jqGrid诞生了，从最初的版本到现在已经升级到了Guriddo jqGrid 5.0.2 ，之前的各个版本都是在不断的修复bug以及添加符合需求的新功能。jqGrid越来越趋于完善。

jqGrid原理

jqGrid是典型的B/S架构，服务器端只是提供数据管理，客户端只提供数据显示。换句话说，jqGrid可以以一种更加简单的方式来展现你数据库的信息，而且也可以把客户端数据传回给服务器端。

jqGrid参数说明

名称	类型	描述	默认值	可修改
url	string	获取数据的地址
datatype	string	从服务器端返回的数据类型，默认xml。可选类型：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside
mtype	string	ajax提交方式。POST或者GET，默认GET
colNames	Array	列显示名称，是一个数组对象
colModel	Array	常用到的属性：name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable 是否可以排序
pager	string	定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置
rowNum	int	在grid上显示记录条数，这个参数是要被传递到后台
rowList	array	一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台
sortname	string	默认的排序列。可以是列名称或者是一个数字，这个参数会被提交到后台
viewrecords	boolean	定义是否要显示总记录数
caption	string	表格名称
ajaxGridOptions [a1]	object	对ajax参数进行全局设置，可以覆盖ajax事件	null	是
ajaxSelectOptions [a2]	object	对ajax的select参数进行全局设置	null	是
altclass	String	用来指定行显示的css，可以编辑自己的css文件，只有当altRows设为 ture时起作用	ui-priority-secondary
altRows	boolean	设置表格 zebra-striped 值
autoencode	boolean	对url进行编码	false	是
autowidth	boolean	如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：setGridWidth	false	否
cellLayout	integer	定义了单元格padding + border 宽度。通常不必修改此值。初始值为	5	是
cellEdit	boolean	启用或者禁用单元格编辑功能	false	是
cellsubmit	String	定义了单元格内容保存位置	‘remote’	是
cellurl	String	单元格提交的url	空值	是
datastr	String	xmlstring或者jsonstring	空值	是
deselectAfterSort	boolean	只有当datatype为local时起作用。当排序时不选择当前行	true	是
direction	string	表格中文字的显示方向，从左向右（ltr）或者从右向左（rtr）	ltr	否
editurl	string	定义对form编辑时的url	空值	是
emptyrecords	string	当返回的数据行数为0时显示的信息。只有当属性 viewrecords 设置为ture时起作用		是
ExpandColClick	boolean	当为true时，点击展开行的文本时，treeGrid就能展开或者收缩，不仅仅是点击图片	true	否
ExpandColumn