1、在项目中，使用一款合适的表格软件会让开发事半功倍，jqGrid提供搜索、分页功能，添加、编辑、删除和搜索表中记录等，是一款优秀的Grid的。

2、jqGrid是基于jQuery，作为jQuery的插件存在的，所以，使用前必须先导入jQuery包,同时，它支持Query的UI theme（from3.6）。

3、支持数组、json、xml、本地等格式作为数据源，一般情况下均使用json或xml和后台交互，本文以json为例，使用java环境（PHP可以参考官方演示的案例http://trirand.com/jqgrid/jqgrid.html）

3、安装

(1)安装顺序:先引入ui.grid.css样式和ui theme样式表

<link rel="stylesheet" type="text/css" media="screen"
href="${ctx }/jquery-ui-1.7.2.custom/css/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="${ctx }/jqgrid/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="${ctx }/jqgrid/css/datepicker.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="${ctx }/alert/jquery.alerts.css" />

再引入jQuery 核心文件,UI theme核心包以及jqGrid核心包、语言包，切记：语言包要先于核心包引入。

<script src="${ctx }/jqgrid/js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="${ctx }/jquery-ui-1.7.2.custom/js/jquery-ui-1.7.2.custom.min.js"></script>
<script src="${ctx }/jqgrid/i18n/grid.locale-cn-gbk.js"
type="text/javascript"></script>
<script src="${ctx }/jqgrid/js/jquery.jqGrid.min.js"
type="text/javascript"></script>

再写入以下css代码

html,body {
	margin: 10; /* Remove body margin/padding */
	padding: 0;
	overflow: hidden; /* Remove scroll bars on browser window */
	font-size: 75%;
}

.ui-tabs-nav li {
	position: relative;
}

.ui-tabs-selected a span {
	padding-right: 10px;
}

.ui-tabs-close {
	display: none;
	position: absolute;
	top: 3px;
	right: 0px;
	z-index: 800;
	width: 16px;
	height: 14px;
	font-size: 10px;
	font-style: normal;
	cursor: pointer;
}

.ui-tabs-selected .ui-tabs-close {
	display: block;
}

.ui-layout-west .ui-jqgrid tr.jqgrow td {
	border-bottom: 0px none;
}

.ui-datepicker {
	z-index: 1200;

2、在要插入jqGrid的地方写入以下代码

<table id="list"></table>
<div id="pager"></div>

其中table是用于显示数据，paper用于显示分页。table必须，paper可选。这个在jqGrid是基础配置，必须条件。
3、写jqGrid属性。
在写jqGrid属性配置文件前，必须先了解下jqGrid个属性的含义。这将放在下一章中。