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

Posted on 2010-02-04 at 10:32 上午 | Filed: jqGrid | Tags: ,
Entry RSS 2.0 feed | Leave a Trackback | Post a comment |

Related Posts


3 Responses to “jqGrid基础学习：1认识jqGrid”

  1. jqGrid基础学习：7jqGrid中使用分页 -华水的地方 说：
    2010-03-02于4:23 下午

    [...] jqGrid分页首先要在页面设置一个DIV的层。例如,在第一章就提到的 <table id="list"></table> <div id="pager"></div><!–分页专用,如果要使用分页导航必须有该标记–> [...]

    回复
  2. 亮亮 说：
    2010-05-18于10:28 上午

    我现在碰到一个问题，左下角的编辑，搜索按钮都出不来，如果换成jqgrid 3.5就可以。望指点。

    我用的jquery 1.4.2
    jquery-ui 1.8.1,如果用jqgrid 3.6 就出不来。

    我的邮箱zhoujinliang@gmail.com不胜感激

    回复
  3. 阿祝 说：
    2010-07-29于8:49 下午

    我也碰到楼上那个按钮显示不出来的，我用的是最新jqgrid3.7.2，望指教，用的是jquery 1.4.2，jquery-ui-1.8.2

    回复

Post a Comment