jqGrid基础学习：1认识jqGrid

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个属性的含义。这将放在下一章中。

Related Posts

posted on 2010-04-07 11:25  dhj  阅读(257)  评论(0)  编辑  收藏  举报

导航