**JqGrid 使用手册**
JqGrid 是一个基于 jQuery 的数据网格插件，它提供了丰富的功能，用于在网页上展示和操作数据集。这个插件允许用户以表格形式展示大量数据，并支持排序、分页、搜索、编辑和更多高级功能。在本手册中，我们将深入探讨 JqGrid 的核心概念、配置选项以及常见用法。
### 1. 安装与引入
你需要在项目中安装 JqGrid 和 jQuery。通常，这可以通过下载库文件或使用 CDN 链接来完成。确保在 HTML 文件中正确引入 jQuery 和 JqGrid CSS、JS 文件。
```html
<script src="path/to/jquery.js"></script>
<link rel="stylesheet" href="path/to/ui.jqgrid.css" />
<script src="path/to/i18n/grid.locale-cn.js"></script>
<script src="path/to/jquery.jqgrid.src.js"></script>
```
### 2. 基本配置
创建 JqGrid 需要一个容器元素，通常是 `div`，并使用 `$("#container").jqGrid()` 初始化。基本配置包括：
- `url`: 数据来源的 URL。
- `datatype`: 数据类型，如 `'json'` 或 `'xml'`。
- `colModel`: 列定义，包含列名、宽度、可编辑性等信息。
- `gridview`: 是否开启快速渲染模式。
- `pager`: 分页器元素的选择器。
例如：
```javascript
$("#grid").jqGrid({
url: 'data.php',
datatype: 'json',
colModel: [
{name: 'id', index: 'id', width: 50, editable: false},
{name: 'name', index: 'name', width: 100},
// 更多列...
],
gridview: true,
pager: '#pager'
});
```
### 3. 数据处理
JqGrid 支持多种数据格式，包括 JSON、XML 和纯文本。服务器返回的数据应包含必要的信息，如记录总数、每页记录数等。JqGrid 将自动处理分页、排序和过滤请求。
### 4. 功能扩展
JqGrid 提供了丰富的可选功能，如：
- **排序**: 用户点击表头时，会按照指定列进行排序。可以通过 `sortname` 和 `sortorder` 配置默认排序。
- **搜索**: 可以使用内置搜索框或自定义搜索条件。
- **编辑与添加**: 行内编辑、弹出编辑窗口、行添加等操作，支持 CRUD 操作。
- **导出数据**: 可以将数据导出为 CSV、Excel 或 PDF 格式。
- **工具栏**: 自定义工具栏，可以放置按钮、搜索框等。
### 5. 事件处理
JqGrid 提供多种事件回调，如 `loadComplete`（加载完成后触发）、`beforeSelectRow`（选择行前触发）等，方便自定义行为。
### 6. 表格样式与响应式设计
JqGrid 兼容 Bootstrap 和其他 CSS 框架，可以通过 `ui_theme` 参数切换主题。此外，`responsive` 参数启用响应式布局，适应不同屏幕尺寸。
### 7. 升级与社区
JqGrid 有多个版本，包括免费的开源版 (trirand) 和商业版 (Guriddo)，它们都有活跃的社区支持。遇到问题时，可以在官方论坛或 Stack Overflow 寻求帮助。
通过以上介绍，你应该对 JqGrid 有了初步的认识。实际使用时，可以参考 JqGrid 的完整文档，了解更详细的配置选项和用法，以满足各种复杂需求。在实践中不断探索，JqGrid 能帮助你构建功能强大的数据管理界面。
