1、jqGrid 3.6.2 中文文档——安装jqGrid（1）

在你开始之前

在你开始jqGrid之前，你需要具有基本的JavaScript和jQuery知识。有关jQuery的知识可访问jQuery网站jquery.com。当你已有了这些基础知识后，我们从jqGrid的系统需求开始。

系统需求

基本需求：

浏览器（Mozilla FireFox、Safari、Google Chrome、Opera、Microsoft Internet Explorer）

jQuery库v1.3及以上（http://www.jquery.com）

jQuery UI主题（http://jqueryui.com/themeroller/#themeGallery）

jqGrid插件（http://www.trirand.com/blog/?page_id=6）

本地（静态）数据（如数组数据、XML数据文件或JSON数据文件）

jqGrid主要是为了操作和呈现服务器上的动态数据，因此，你还需要一个web服务器（如IIS、Apache、Tomcat），一个数据库（如PostgreSQL、Oracle、MSSQL、MySQL）和服务器端脚本语言（如PHP、ASP）

下载jqGrid

你可以通过jqGrid网站的jqGrid下载生成器选择你需要的组件，生成适合你要求的jqGrid副本后下载。

选择你需要的组件

下载生成器列出了所有组件：base，editing，subgrid，treegrid，import/export 和user contributed modules。你选择的组件将合并为一个javascript文件——jquery.jqGrid.min.js。

选择完成后，点击Download按钮，你将得到包含你所选内容的压缩文件。

下载后

下载后的压缩文件包括以下文件：

/css/

ui-jqgrid.css

/js/

/i18n/

grid.locale-bg.js

所有语言文件

….

Changes.txt

jquery-1.3.2.min.js

jquery.jqGrid.min.js

/src/

/i18n/

grid.locale-bg.js

所有语言文件

….

/css/

jquery.searchFilter.css

ui-jqgrid.css

grid.base.js

grid.celledit.js

grid.common.js

grid.custom.js

grid.formedit.js

grid.import.js

grid.inlinedit.js

grid.loader.js

grid.postext.js

grid.setcolumns.js

grid.subgrid.js

grid.tbltogrid.js

grid.treegrid.js

jqDnR.js

jqModal.js

jquery.fmatter.js

jquery.searchFilter.js

json2.js

JsonXml.js

从文件结构上看，jqGrid需要的文件在 /css/ 和 /js/ 目录中，这些文件已被简化用于运行环境。此包中还包含了基本jQuery库，你不需要再去下载jQuery库。/src/目录中的文件为源代码，供开发人员修改和改进，为了不使用基本版本，需使用grid.loader.js ，参见“安装”

下载UI主题

从jqGrid 3.5版开始，jqGrid 完全兼容UI主题。为此，你需要下载所需的主题。主题可从jQuery UI站点http://jqueryui.com/themeroller/中下载，你也可以创建你自己的主题，详细信息请访问http://jqueryui.com。如果你只使用表格组件，只需使用基本的CSS文件ui.theme.css和ui.core.css（位于UI主题包的development-bundle/themes目录中）。有了所有需要的文件后，你就可以安装了。

更新日志（略）

这部分介绍了新版本修改的错误和增加的功能

安装

这节介绍安装步骤和技巧。假设你机器上已安装了一个web服务器。

基本安装

解压jqGrid和UI主题压缩文件到一个临时文件夹中；

在web服务器上创建可访问的项目目录（如myproject）；

在myproject目录下创建js 和css两个目录；

将jqGrid包中css目录(非src/css)下的ui-jqgrid.css复制到myproject的css目录下；

将jqGrid包中js目录下的所有目录和文件复制到myproject的js目录下；

将UI主题包中css目录下的所有目录和文件复制到myproject的css目录下；

以上操作后，你服务器中的目录结构应该是：/myproject/css/

ui.jqgrid.css

/ui-lightness/

/images/

jquery-ui-1.7.2.custom.css

/myproject/js/

/i18n/

grid.locale-bg.js

所有语言文件

….

Changes.txt

jquery-1.3.2.min.js

jquery.jqGrid.min.js

使用你喜欢的编辑器在myproject 目录下创建myfirstgrid.html 文件，输入以下代码：

view plain copy to clipboard print

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen"
href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" mce_href="css/ui.jqgrid.css" />
<mce:script src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js" type="text/javascript"></mce:script>
<!—语言的js文件应该在jqGrid的js文件前装入-->
<mce:script src="js/i18n/grid.locale-en.js" mce_src="js/i18n/grid.locale-en.js" type="text/javascript"></mce:script>
<mce:script src="js/jquery.jqGrid.min.js" mce_src="js/jquery.jqGrid.min.js" type="text/javascript"></mce:script>
</head>
<body></body></html>

至此，你已构建了你的第一个jqGrid。

开发安装

目录结构与前面相同，将jqGrid包中的整个src 目录复制到js目录下。结构如下：

/myproject/css/

ui-jqgrid.css

/ui-lightness/

/images/

jquery-ui-1.7.2.custom.css

/myproject/js/

/src/

/i18n/

grid.locale-bg.js

所有语言文件

….

/css/

ui-jqgrid.css

jquery.searchFilter.css

grid.base.js

grid.celledit.js

grid.common.js

grid.custom.js

grid.formedit.js

grid.import.js

grid.inlinedit.js

grid.loader.js

grid.postext.js

grid.setcolumns.js

grid.subgrid.js

grid.tbltogrid.js

grid.treegrid.js

jqDnR.js

jqModal.js

jquery.fmatter.js

jquery.searchFilter.js

json2.js

JsonXml.js

jquery-1.3.2.min.js

打开grid.loader.js文件，修改pathtojsfiles为js/src/，代码如下：

view plain copy to clipboard print

function jqGridInclude(){
var pathtojsfiles = "js/src/"; // 需要修改的地方
// 如果不需要某些模块，将include设为false
var modules = [
{ include: true, incfile:'i18n/grid.locale-en.js'}, // jqGrid translation
{ include: true, incfile:'grid.base.js'}, // jqGrid base
{ include: true, incfile:'grid.common.js'}, // jqGrid common for editing
{ include: true, incfile:'grid.formedit.js'}, // jqGrid Form editing
{ include: true, incfile:'grid.inlinedit.js'}, // jqGrid inline editing
{ include: true, incfile:'grid.celledit.js'}, // jqGrid cell editing
{ include: true, incfile:'grid.subgrid.js'}, //jqGrid subgrid
{ include: true, incfile:'grid.treegrid.js'}, //jqGrid treegrid
{ include: true, incfile:'grid.custom.js'}, //jqGrid custom
{ include: true, incfile:'grid.postext.js'}, //jqGrid postext
{ include: true, incfile:'grid.tbltogrid.js'}, //jqGrid table to grid
{ include: true, incfile:'grid.setcolumns.js'}, //jqGrid setcolumns
{ include: true, incfile:'grid.import.js'}, //jqGrid import
{ include: true, incfile:'jquery.fmatter.js'}, //jqGrid formater
{ include: true, incfile:'JsonXml.js'}, //xmljson utils
{ include: true, incfile:'jquery.searchFilter.js'} // search Plugin
];
var filename;
for(var i=0;i<modules.length; i++) {
if(modules[i].include === true) {
filename = pathtojsfiles+modules[i].incfile;
if(jQuery.browser.safari) {
jQuery.ajax({ url:filename,dataType:'script',
async:false,cache: true});
} else {
IncludeJavaScript(filename);
}
}
}
function IncludeJavaScript(jsFile) {
var oHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.charset = 'utf-8';
oScript.src = jsFile;
oHead.appendChild(oScript);
};
};
jqGridInclude();

你的HTML文件如下

view plain copy to clipboard print

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen"
href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css" mce_href="js/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="js/src/css/jquery.searchFilter.css" />
<mce:style><!--
html, body { margin: 0; padding: 0; font-size: 75%;}
--></mce:style><style mce_bogus="1">html, body { margin: 0; padding: 0; font-size: 75%;}</style>
<mce:script src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js" type="text/javascript"></mce:script>
<mce:script src="js/src/grid.loader.js" mce_src="js/src/grid.loader.js" type="text/javascript"></mce:script>
</head>
<body>
</body>
</html>

至此，你已准备好调试和改进jqGrid。

如何使用

了解本节将帮助你更好地使用jqGrid和组件的全部功能。我们首先必须知道我们有两个部分：服务器端操作和客户端呈现。换句话说：jqGrid是一个组件，使我们能用简单的方法在客户端使用服务器端技术呈现数据库信息并将对数据的操作返回给数据库。

什么是服务器端操作（SSM）可能有很多定义，我试图从jqGrid角度来解释。

基本的SSM的意思是服务器端的编辑处理而不是用户浏览器。SSM不是在页面上可见的。一切都是在服务器上用一些通用的编程语言做的。基本上它是服务器上的命令，告诉服务器一旦用户调用，把文件或文本放置到页面上。

从jqGrid角度你应该关心的是：你必须有一段代码使用脚本语言和web服务器来处理存储在数据库中信息。使用这段代码你应能返回请求的信息给客户（web浏览器）。 jqGrid使用Ajax请求取得请求的信息并使用JavaScript处理给客户。

有了需要的信息，你可通过列模型（colModel）描述jqGrid要构造的表格数据。

客户端要构造的表格数据有：Caption layer（标题区）Header layer（表头区）Body layer（表体区）Navigation layer（导航区）

Caption layer包含表格的公共信息。

Header layer包含列信息：标签，宽度等。

Body layer 是从服务器取得的数据并按列模式定义显示。

Navigation layer 包含得到的其他信息和请求片段信息的分页。navigation layer不仅可以放置在表格的底部，而且可放置在页面的任何地方。Navigation layer还是添加编辑、删除新增按钮或链接和搜索表格数据的地方。

表格至少包括Header layer和Body layer.

为允许自由和灵活性，以及较好的样式， jqGrid依靠CSS管理它的外观。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。