jqGrid使用教程：jQuery数据网格操作
需积分: 10 4 浏览量
更新于2024-07-25
收藏 783KB DOC 举报
"jQuery+jqGrid 的函数操作指南与学习路径"
jqGrid 是一款基于 jQuery 的数据网格插件，用于在网页上展示和管理表格数据。它提供了丰富的功能，包括数据的增删改查、排序、分页、过滤、编辑等。在学习 jqGrid 时，首先要了解其基本的安装步骤和所需的文件结构。
安装 jqGrid 非常简单，主要包括以下几个步骤：
1. 下载 jqGrid 相关文件，包括 CSS 样式表和 JavaScript 库。通常需要引入 `ui.jqgrid.css` 和 `jquery.jqGrid.min.js` 文件，以及 jQuery 自身的库文件 `jquery-1.3.2.min.js`。此外，为了支持多语言，可能还需要引用 `grid.locale-*.js` 文件，例如 `grid.locale-cn.js` 对应中文。
2. 创建正确的文件目录结构，将 CSS 文件放在 `/myproject/css/` 目录下，JavaScript 文件放在 `/myproject/js/` 目录下，并确保所有依赖文件都在正确的位置。
3. 在 HTML 页面中，引入这些文件并设置合适的路径。同时，确保页面声明了正确的 DOCTYPE，以保证浏览器以标准模式渲染页面。
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/myproject/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="/myproject/css/jquery-ui-1.7.2.custom.css" />
</head>
<body>
<script src="/myproject/js/jquery-1.3.2.min.js"></script>
<script src="/myproject/js/jquery.jqGrid.min.js"></script>
<!-- 如果需要多语言支持，添加以下代码 -->
<script src="/myproject/js/i18n/grid.locale-cn.js"></script>
...
</body>
</html>
```
学习 jqGrid 的过程中，你需要掌握以下几个关键点：
1. 基本配置：创建 jqGrid 实例，设置表格的基本属性，如宽度、高度、列定义等。例如：
```javascript
$("#grid").jqGrid({
url: 'data.php', // 数据来源
datatype: 'json',
colModel: [ // 列定义
{name: 'id', index: 'id', width: 55},
{name: 'name', index: 'name', width: 100},
...
],
...
});
```
2. 数据操作：了解如何从服务器获取数据（如 JSON 或 XML 格式），以及如何处理这些数据。jqGrid 支持异步加载和本地数据。
3. 事件处理：jqGrid 提供了许多内置事件，如 `loadComplete`、`onSelectRow` 等，可以用来扩展和定制功能。
4. 功能组件：jqGrid 提供了多种附加组件，如搜索工具栏、行编辑、行选择、分页等，需要了解如何启用和配置它们。
5. 自定义样式：根据需要对默认样式进行调整，以满足界面设计的要求。
6. API 方法：掌握 jqGrid 提供的各种方法，如 `reloadGrid` 用于刷新数据，`setGridParam` 用于更改配置参数，`getRowData` 获取选定行的数据等。
通过深入学习 jqGrid，你可以构建出功能强大且易于管理的数据展示和交互界面，提升 Web 应用的用户体验。同时，了解与 jqGrid 相关的 jQuery 基础知识和前端开发最佳实践也至关重要，这有助于更好地利用 jqGrid 实现项目需求。
则为 “UIG表格 +
&0
1
-1
'1
只读属性，计算加载数据的时间。目前支持
) 跟 <*&- 数据
否
11+00
5#1
)
1+
数据类型，通常情况下与 +005#1 相同，不会
变
-3
否
11: +
?&&
10-
启用或者禁用 11' + 模式
70*1
否
11: +
&+1
* -
'
11: + 所使用的方法
-1*1+
否
11!&-
*
00
5
树的图标，默认值：@#3*$O3 !&- 0-'1
1O> -3*$O3 !&- 0-'1*O>107$O3
!&-0+ &&WOD
否
11(10
+1
00
5
扩展表格的 !&&+1 且加在 !&&+1 定义的
后面
否
11U&&
U141
-3
1 !
&& 元素的级别，
否
3
* -
'
3 -3
是
3*10
0
00
5
从 1231* 中取得的一些用户信息
1#5
005
否
3*10
0-9&&
1
?&&
10-
当为 31 时把 3*100 放到底部，用法：如
果 3*100 的值与 !&&+1 的值相同，那么
此列就显示正确的值，如果不等那么此列就为
空
70*1
是
4 1%1!
&+*
?&&
10-
是否要显示总记录数
70*1
否
4 1%*&
!&*
00
5
定义排序列的外观跟行为。数据格式：
M70*1>O41 !0O>31N第一个参数是说，是否
都要显示排序列的图标，70*1 就是只显示当前
排序列的图标；第二个参数是指图标如何显
示，41 !0：排序图标垂直放
置，& A&-0：排序图标水平放置；第三个
参数指单击功能，31：单击列可排
序，70*1：单击图标排序。说明：如果第三个
参数为 70*1 则第一个参数必须为 31 否则不
能排序
否
% +
-3
?1
如果设置则按此设置为主，如果没有设置则按
!&&+1 中定义的宽度计算
-&-1
否
)(10+
1
00
5
对 ) 数据结构的描述 否
剩余49页未读，继续阅读
2019-04-07 上传
748 浏览量
131 浏览量
124 浏览量
点击了解资源详情
352 浏览量
223 浏览量
2011-11-04 上传
177 浏览量
121gf
- 粉丝: 0
我的内容管理
展开
最新资源
- Metronomos电脑定时工具V3.3：免费英文版安装指南
- 使用Ansible自动化Mac设置与配置教程
- 实现ASP.NET网页内容可编辑的技巧与实践
- Vectrosity.v4.0.2 Unity插件：2D/3D画线利器
- 基于ARM平台的PWM LED调光技术解析
- Redis在测试任务中的应用及解决方案探讨
- 解决QTP调试脚本404错误的工具：scd10chs.exe
- TinySox：轻量级C++ Socks5服务器设计，优化嵌入式应用
- React项目创建指南及构建流程
- Spark与MongoDB整合: 利用Spark SQL进行数据交互
- 掌握高效图片缓存管理：picasso-2.3.3.jar与2.4.0.jar
- 深入理解Spring源码：cglib与objenesis依赖解析
- Node.js socket聊天室：实时消息广播与交互
- 专业RMVB修复软件：宏宇向导v2.000.9绿色注册版
- 基于JAVA的StarOA OA系统网站代码解析
- Kube-Scheduler V1.11.1 镜像文件加载指南
