jqGrid中文教程

1、jqGrid 3.6.2 中文文档——安装jqGrid(1)

在你开始之前

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

系统需求

基本需求：

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

jQuery库v1.3及以上（https://www.doczj.com/doc/c318121460.html,）

jQuery UI主题（https://www.doczj.com/doc/c318121460.html,/themeroller/#themeGallery）

jqGrid插件（https://www.doczj.com/doc/c318121460.html,/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

https://www.doczj.com/doc/c318121460.html,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主题

从jqGrid 3.5版开始，jqGrid 完全兼容UI主题。为此，你需要下载所需的主题。主题可从jQuery UI站点https://www.doczj.com/doc/c318121460.html,/themeroller/中下载，你也可以创建你自己的主题，详细信息请访问https://www.doczj.com/doc/c318121460.html,。如果你只使用表格组件，只需使用基本的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 plaincopy to clipboardprint?

1.

2. "http://www.w

https://www.doczj.com/doc/c318121460.html,/TR/xhtml1/DTD/xhtml1-strict.dtd">

3.

4.

5.

6.

7.

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

9.

10.

11.

12.

13.

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

https://www.doczj.com/doc/c318121460.html,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/，代码如下：

view plaincopy to clipboardprint?

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:'https://www.doczj.com/doc/c318121460.html,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文件如下

view plaincopy to clipboardprint?

1.

2. "http://www.w

https://www.doczj.com/doc/c318121460.html,/TR/xhtml1/DTD/xhtml1-strict.dtd">

3.

4.

5.

6.

7.

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

9.

10.

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

12.

15.

16.

17.

18.

19.

20.

至此，你已准备好调试和改进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管理它的外观。

2、jqGrid 3.6.2 中文文档——安装jqGrid（2）收藏

我的第一个表格

作为本教程一个例子将提供整个文档，我们将创建一个有关发票信息的表格。首先我们需要定义在客户端显示数据：Invid 发票号码

Invdate 发票日期

amount 发票金额

tax 税

total 金额总数（含税）

note 备注

数据

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

view plaincopy to clipboardprint?

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

view plaincopy to clipboardprint?

1.

2. "http://www.w

https://www.doczj.com/doc/c318121460.html,/TR/xhtml1/DTD/xhtml1-strict.dtd">

3.

4.

5.

6.

7.

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

9.

10.

13.

14.

15.

16.

31. rowNum:10,

32. rowList:[10,20,30],

33. sortname: 'invid',

34. sortorder: 'desc',

35. viewrecords: true,

36. caption: 'My first grid'

37. });

38.});

39.// -->

40.

41.

42.

43.

44.

45.

在标记间定义表格的位置。

view plaincopy to clipboardprint?

1.

2.…

3.

4.

5.…

6.

通过HTML的

定义表格，在html文档中给这个表格一个独特的ID号。表格的Cellspacing, cellpadding和border 属性由jqGrid给定，不需要在中给出。

我们还需要分页操作，所以我们使用常用的

其中：grid_id 是HTML中

表格的id。

options 是“名称：值”对格式的设置数组。有些设置是值，有些是事件的响应函数，有些是jqGrid 工作必须的选项。

从XML文件中读取数据的例子：

从json中读取数据的例子：

HTML代码：