jqGrid中文教程.docx

资源描述

jqGrid中文教程.docx

《jqGrid中文教程.docx》由会员分享，可在线阅读，更多相关《jqGrid中文教程.docx（134页珍藏版）》请在冰点文库上搜索。

jqGrid中文教程.docx

jqGrid中文教程

1、jqGrid3.6.2中文文档——安装jqGrid

（1）

在你开始之前

在你开始jqGrid之前，你需要具有基本的JavaScript和jQuery知识。

有关jQuery的知识可访问jQuery网站。

当你已有了这些基础知识后，我们从jqGrid的系统需求开始。

系统需求

基本需求：

Ø 浏览器（MozillaFireFox、Safari、GoogleChrome、Opera、MicrosoftInternetExplorer）

Ø jQuery库v1.3及以上（）

Ø jQueryUI主题（

Ø jqGrid插件（

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

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

下载jqGrid

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

选择你需要的组件

下载生成器列出了所有组件：

base，editing，subgrid，treegrid，import/export和usercontributedmodules。

你选择的组件将合并为一个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

mon.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主题

从jqGrid3.5版开始，jqGrid完全兼容UI主题。

为此，你需要下载所需的主题。

主题可从jQueryUI站点

更新日志（略）

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

安装

这节介绍安装步骤和技巧。

假设你机器上已安装了一个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文件，输入以下代码：

viewplaincopytoclipboardprint?

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

2. "http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml" xml:

lang="en" lang="en">

6.My First Grid

8. href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />

10.

script src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js" type="text/javascript">

script>

11.

—语言的js文件应该在jqGrid的js文件前装入-->

12.

script src="js/i18n/grid.locale-en.js" mce_src="js/i18n/grid.locale-en.js" type="text/javascript">

script>

13.

script src="js/jquery.jqGrid.min.js" mce_src="js/jquery.jqGrid.min.js" type="text/javascript">

script>

14.

15.

至此，你已构建了你的第一个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

mon.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/，代码如下：

viewplaincopytoclipboardprint?

1.function jqGridInclude（）{

2. var pathtojsfiles = "js/src/"; // 需要修改的地方

3. // 如果不需要某些模块，将include设为false

4. var modules = [

5. { include:

true, incfile:

'i18n/grid.locale-en.js'}, // jqGrid translation

6. { include:

true, incfile:

'grid.base.js'}, // jqGrid base

7. { include:

true, incfile:

'mon.js'}, // jqGrid common for editing

8. { include:

true, incfile:

'grid.formedit.js'}, // jqGrid Form editing

9. { include:

true, incfile:

'grid.inlinedit.js'}, // jqGrid inline editing

10. { include:

true, incfile:

'grid.celledit.js'}, // jqGrid cell editing

11. { include:

true, incfile:

'grid.subgrid.js'}, //jqGrid subgrid

12. { include:

true, incfile:

'grid.treegrid.js'}, //jqGrid treegrid

13. { include:

true, incfile:

'grid.custom.js'}, //jqGrid custom

14. { include:

true, incfile:

'grid.postext.js'}, //jqGrid postext

15. { include:

true, incfile:

'grid.tbltogrid.js'}, //jqGrid table to grid

16. { include:

true, incfile:

'grid.setcolumns.js'}, //jqGrid setcolumns

17. { include:

true, incfile:

'grid.import.js'}, //jqGrid import

18. { include:

true, incfile:

'jquery.fmatter.js'}, //jqGrid formater

19. { include:

true, incfile:

'JsonXml.js'}, //xmljson utils

20. { include:

true, incfile:

'jquery.searchFilter.js'} // search Plugin

21. ];

22. var filename;

23. for（var i=0;i

24. if（modules[i].include === true） {

25. filename = pathtojsfiles+modules[i].incfile;

26. if（jQuery.browser.safari） {

27. jQuery.ajax（{ url:

filename,dataType:

'script',

28.async:

false,cache:

true}）;

29. } else {

30. IncludeJavaScript（filename）;

31. }

32. }

33. }

34. function IncludeJavaScript（jsFile） {

35. var oHead = document.getElementsByTagName（'head'）[0];

36. var oScript = document.createElement（'script'）;

37. oScript.type = 'text/javascript';

38. oScript.charset = 'utf-8';

39. oScript.src = jsFile;

40. oHead.appendChild（oScript）;

41. };

42.};

43.jqGridInclude（）;

你的HTML文件如下

viewplaincopytoclipboardprint?

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

2. "http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml" xml:

lang="en" lang="en">

6.My First Grid

8.href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />

10.

11.href="js/src/css/jquery.searchFilter.css" />

12.

style>

13.html, body { margin:

0; padding:

0; font-size:

75%;}

14.-->

style>html, body { margin:

0; padding:

0; font-size:

75%;}

15.

script src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js" type="text/javascript">

script>

16.

script src="js/src/grid.loader.js" mce_src="js/src/grid.loader.js" type="text/javascript">

script>

17.

18.

19.

20.

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

如何使用

了解本节将帮助你更好地使用jqGrid和组件的全部功能。

我们首先必须知道我们有两个部分：

服务器端操作和客户端呈现。

换句话说：

jqGrid是一个组件，使我们能用简单的方法在客户端使用服务器端技术呈现数据库信息并将对数据的操作返回给数据库。

什么是服务器端操作（SSM）?

可能有很多定义，我试图从jqGrid角度来解释。

基本的SSM的意思是服务器端的编辑处理而不是用户浏览器。

SSM不是在页面上可见的。

一切都是在服务器上用一些通用的编程语言做的。

基本上它是服务器上的命令，告诉服务器一旦用户调用，把文件或文本放置到页面上。

从jqGrid角度你应该关心的是：

你必须有一段代码使用脚本语言和web服务器来处理存储在数据库中信息。

使用这段代码你应能返回请求的信息给客户（web浏览器）。

jqGrid使用Ajax请求取得请求的信息并使用JavaScript处理给客户。

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

客户端要构造的表格数据有：

Captionlayer（标题区）Headerlayer（表头区）Bodylayer（表体区）Navigationlayer（导航区）

Captionlayer包含表格的公共信息。

Headerlayer包含列信息：

标签，宽度等。

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

Navigationlayer包含得到的其他信息和请求片段信息的分页。

navigationlayer不仅可以放置在表格的底部，而且可放置在页面的任何地方。

Navigationlayer还是添加编辑、删除新增按钮或链接和搜索表格数据的地方。

表格至少包括Headerlayer和Bodylayer.

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

2、jqGrid3.6.2中文文档——安装jqGrid

（2）收藏

我的第一个表格

作为本教程一个例子将提供整个文档，我们将创建一个有关发票信息的表格。

首先我们需要定义在客户端显示数据：

Invid发票号码

Invdate发票日期

amount发票金额

tax税

total金额总数（含税）

note备注

数据

我们需要以下格式的表格（本例基于MySQL），可按以下方式创建：

viewplaincopytoclipboardprint?

1.CREATE TABLE invheader （

2. invid int（11） NOT NULL AUTO_INCREMENT,

3. invdate date NOT NULL,

4. client_id int（11） NOT NULL,

5. amount decimal（10,2） NOT NULL DEFAULT '0.00',

6. tax decimal（10,2） NOT NULL DEFAULT '0.00',

7. total decimal（10,2） NOT NULL DEFAULT '0.00',

8. note char（100） DEFAULT NULL,

9. PRIMARY KEY （invid））;

然后输入数据。

HTML文件

使用我们安装时建立的文件myfirstgrid.html

viewplaincopytoclipboardprint?

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

2. "http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml" xml:

lang="en" lang="en">

6.My First Grid

8.href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />

10.

style>

11.html, body { margin:

0; padding:

0; font-size:

75%;}

12.-->

style>

展开阅读全文