jqGrid中文教程：快速入门与安装指南

5星 · 超过95%的资源 | 下载需积分: 50 | DOC格式 | 752KB | 更新于2024-07-30 | 177 浏览量 | 举报

2 收藏

"Jqgrid中文使用手册，详细介绍了Jqgrid的安装和使用方法，适合初学者查阅。" JqGrid是一款强大的JavaScript组件，用于在Web应用中展示和操作数据表格。它基于jQuery库，提供了丰富的功能，如数据排序、筛选、分页和编辑等。以下是对JqGrid中文使用手册中部分重要内容的详细说明： ### 1. 安装JqGrid 安装JqGrid非常简单，只需要将必要的CSS和JS文件引入到HTML页面中。按照官方推荐的目录结构，你可以将文件组织如下： - `/myproject/css/` 目录下包含 `ui.jqgrid.css` 和 jQuery UI 的主题文件，如 `ui-lightness/` 文件夹下的 `jquery-ui-1.7.2.custom.css`。 - `/myproject/js/` 目录下放置JqGrid的核心JS文件 `jquery.jqGrid.min.js`，以及本地化文件（如 `grid.locale-bg.js`）和其他可能需要的语言文件。 - 另外，`Changes.txt` 是版本更新记录，`jquery-1.3.2.min.js` 是jQuery库。在HTML页面中，你需要添加以下代码来引入这些资源： ```html <!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>MyFirstGrid</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"/> <link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css"/> <style> html, body { margin: 0; padding: 0; font-size: 75%; } </style> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>  <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> </head> <body>  </body> </html> ``` ### 2. 创建第一个JqGrid 创建JqGrid的基本步骤包括定义表格元素和配置选项。例如： ```javascript $("#gridId").jqGrid({ url: 'server.php', // 数据源 datatype: 'json', // 数据类型 colNames: ['Column1', 'Column2', 'Column3'], // 列标题 colModel: [ {name: 'column1', index: 'column1', width: 50}, {name: 'column2', index: 'column2', width: 75}, {name: 'column3', index: 'column3', width: 100} ], rowNum: 10, // 每页显示的行数 pager: '#pagerId', // 分页器ID gridview: true, rowList: [10, 20, 30], // 分页选项 sortname: 'column1', // 初始排序列 sortorder: 'asc' // 初始排序顺序 }); ``` ### 3. 功能扩展与自定义 JqGrid支持多种功能扩展，例如： - 数据操作：支持增删改查，通过设置编辑行、编辑列等参数实现。 - 数据过滤：可以使用内置的搜索工具或自定义过滤条件。 - 分页：可以通过设置`rowNum`和`pager`实现前端分页，同时可以配置`loadonce`属性进行后端分页。 - 数据格式化：利用`formatter`函数对数据显示进行自定义格式化。 - 事件处理：提供多种事件回调，如`onSelectRow`, `beforeSort`, `afterInsertRow`等，可以进行事件监听和响应。 ### 4. 自定义主题与样式 JqGrid允许你自定义界面风格，通过调整CSS样式实现。默认使用了jQuery UI的主题，你可以根据需要选择其他主题或创建自己的主题。 ### 5. 国际化 JqGrid支持多语言，通过引入对应的`grid.locale-XX.js`文件，可以将界面文字切换成不同的语言，如`grid.locale-zh.js`用于中文。 ### 6. 最新版本与兼容性随着技术的发展，JqGrid也有更新的版本，例如`grid.locale-bg.js`可能对应的是较旧的版本。在实际使用时，建议查看官方最新的文档和下载最新版的库以获取最佳的性能和兼容性。 JqGrid中文使用手册提供了全面的指南，帮助开发者快速掌握JqGrid的使用，创建功能丰富的数据表格。通过深入学习手册中的内容，开发者可以灵活地在项目中应用JqGrid，提升用户体验。

53>,,

653

果 806%55 的值与 ',",16 的值相同，那么

此列就显示正确的值，如果不等那么此列就为

空

9&6+%6'

,%10

B,,

653

是否要显示总记录数

<506

否

9&6+0,%

',0

5%%5

定义排序列的外观跟行为。数据格式：

N<506P96%&'5P%86O#第一个参数是说，是否

都要显示排序列的图标，<506 就是只显示当前

排序列的图标；第二个参数是指图标如何显

示，96%&'5：排序图标垂直放

置，,%&D,35：排序图标水平放置；第三个

参数指单击功能，%86：单击列可排

序，<506：单击图标排序。说明：如果第三个

参数为 <506 则第一个参数必须为 8%6 否则不

能排序

否

+&1

38

B6%

如果设置则按此设置为主，如果没有设置则按

',",16 中定义的宽度计算

3,36

否

/.651

5%%5

对 / 数据结构的描述否

四、jqGrid 学习 -------------- ColModel API

,",16是 A7?%&1 里最重要的一个属性，设置表格列的属性。

用法：

Y595 代码

# AU86%:QT-%&1&1S#A7?%&1QCGG

# ###GG

# GGG',",16*GNGC356*P356PG&316/*P&316/P###FGC###FG###GOGG

# ###GG

# FS;GG

属性数据类型备注默认值

5&-3 0%&3-

定义单元格对齐方式；可选值：6<

'636%%&-#

6<

'50060 0%&3-

设置列的 '00。多个 '500 之间用空格分

隔，如：P'500'500P。表格默认的

'00 属性是 8&6&)0&0

6):

0%&3-

156< 0%&3-

对日期列进行格式化。”JJJ531J#J都

是有效的日期分隔符。:::::年 ::

月 <,%,30111日#

$56

Q1S

16<95 0%&3-

查询字段的默认值空

61&5B6 B,,653

单元格是否可编辑

<506

61&,)&,30 5%%5:

对列进行编辑时设置的一些属性

6):

5%%5:

61&%860 5%%5:

对于可编辑单元格的一些额外属性设置

6):

5%%5:

61&:)6 0%&3-

可以编辑的类型。可选值：6/

6/5%65066''6'@B,/

)500+,%1B8,3&5-6531Z6#

6/

Z/61 B,,653

列宽度是否要固定不可变

<506

<,%,)&,30 5%%5:

对于 <,% 进行编辑时的属性设置

6):

<,%5,)&,3

5%%5:

对某些列进行格式化的设置

3,36

<,%56% &/61

对列进行格式化时设置的函数名或者类型

3,36

&161- B,,653

是否显示或者隐藏此列

<506

&1163 B,,653

在初始化表格时是否要隐藏此列

<506

&316/ 0%&3-

当排序时定义排序字段名称的索引，参数

名为 0&1/

6):

0%&3-

A0,35) 0%&3-

定义了返回的 A0,3 数据映射

3,36

@6: B,,653

当从服务器端返回的数据中没有 &1 时，将

此作为唯一 %,+&1 使用，默认只能有一个

&1 属性

<506

5B6 0%&3-

如果 ',(560 为空则用此值来作为列的

显示名称，如果都没有设置则使用 356

值

3,36

356 0%&3-

必输项，表格列的名称，所有关键字，保

留字都不能作为名称使用包括 08B-%&1'B

531%3#

.678&%61

%60&D5B6 B,,653

是否可以被 %60&D5B6

%86

065%' B,,653

在搜索模式下，定义此列是否可以作为搜

索列

%86

065%',)&,3

5%%5:

设置搜索参数

6):

0,%5B6 B,,653

是否可排序

%86

0,%:)6 0%&3-

用在当 155:)6 为 ,'5 时，定义搜索列

的类型，可选值：&3&36-6%对

&36-6% 排序 [,538B6%'8%%63':

排序数字 156排序日期 6/排序文本

6/

0:)6 0%&3-

定义搜索元素的类型

6/

08% 0%&3-

搜索数据时的 8%

6):

0%&3-

+&1 38B6%

默认列的宽度，只能是象素值，不能是百

分比



剩余48页未读，继续阅读

身份认证购VIP最低享 7 折!

30元优惠券

logybug

粉丝: 0

jqGrid中文教程：快速入门与安装指南

JqGrid中文API文档

jqGrid_api中文文档

jqGrid5.3.1(grid，treegrid) 2018官方最新版本

jqGrid 离线帮助手册

jqGrid 离线帮助手册 来源官方wiki

Jqgrid中文使用指南：快速入门与安装教程

jqGrid手册教程一本通

jqgrid的详细帮助手册(chm格式)

jqgrid中文文档API

jqGrid中文文档.doc

最新资源

jqGrid 离线帮助手册来源官方wiki