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;
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个属性的含义。这将放在下一章中。
Related Posts
- 2010-03-03 -- jqGrid基础学习：11jqGrid的查询时和后台的交互
- 2010-03-03 -- jqGrid基础学习：10jqGrid的多字段查询
- 2010-03-03 -- jqGrid基础学习：9jqGrid的单字段查询
- 2010-03-02 -- jqGrid基础学习：8jqGrid中在导航条使用按钮
- 2010-03-02 -- jqGrid基础学习：7jqGrid中使用分页
- 2010-02-08 -- jqGrid基础学习：6jqGrid中方法使用
- 2010-02-08 -- jqGrid基础学习：5jqGrid中事件的使用
- 2010-02-08 -- jqGrid基础学习：4jqGrid的ColModel API
- 2010-02-06 -- jqGrid基础学习：3jqGrid与后台的交互（基于 struts2）
- 2010-02-05 -- jqGrid基础学习：2第一个jqGrid