jqGrid是一款功能强大的jQuery插件，用于创建交互式的网格视图。它提供了数据的分页、排序、过滤、编辑等多种功能，广泛应用于Web应用程序中显示和管理大量结构化数据。在"jqGrid实例demo"中，我们可以看到一个实际的jqGrid应用示例，帮助我们理解和学习如何在项目中运用这个工具。
1. **安装与引入**
在开始使用jqGrid前，我们需要下载jqGrid的JavaScript和CSS文件，并将其引入到HTML文档中。这通常涉及到在`<head>`标签内添加链接引用，确保jqGrid库和必要的样式表能够正确加载。
2. **基本结构**
jqGrid的HTML结构通常包括一个空的`<table>`元素，其ID属性对应于jqGrid的实例名称。例如，`id="myGrid"`，这样我们可以通过`$("#myGrid")`来初始化jqGrid。
3. **初始化jqGrid**
使用jQuery选择器选择表格元素，然后调用`.jqGrid()`方法进行初始化。在这个过程中，我们需要传递一个配置对象，设置列名、数据源、分页参数等。例如：
```javascript
$("#myGrid").jqGrid({
url: 'server.php', // 数据源
datatype: 'json',
colNames: ['Column1', 'Column2', 'Column3'], // 列标题
colModel: [ ... ], // 列定义
pager: '#pager', // 分页控件ID
rowNum: 10, // 每页显示行数
...
});
```
4. **数据源**
jqGrid支持多种数据源，包括本地数据、XML、JSON等。在上述示例中，数据源是服务器端的'server.php'，通过HTTP请求获取数据。在实际应用中，你需要根据自己的后端接口来调整这个URL。
5. **列模型（colModel）**
`colModel`是一个数组，包含了每一列的详细配置，如字段名、宽度、可编辑性等。例如：
```javascript
colModel: [
{name: 'field1', width: 80, editable: true},
{name: 'field2', width: 120, align: 'right'},
...
]
```
6. **分页配置**
jqGrid内置了强大的分页功能，可以通过设置`rowNum`、`pager`等选项实现。`pager`参数是指定分页控件的ID，可以自定义分页样式。
7. **事件处理**
jqGrid提供了一系列的事件，如`loadComplete`、`beforeSelectRow`等，允许我们在特定时刻执行自定义逻辑。例如，监听数据加载完成事件：
```javascript
loadComplete: function () {
// 自定义操作
}
```
8. **功能扩展**
jqGrid还支持行选择、编辑、添加、删除、搜索等功能。通过设置`selrow`、`editurl`、`viewrecords`等属性，可以启用这些功能。例如，开启行编辑功能：
```javascript
editurl: 'server.php', // 编辑操作的URL
cellsubmit: 'remote', // 细胞编辑提交方式
...
```
9. **自定义样式和主题**
jqGrid允许你使用预定义的主题或创建自定义样式，以适应项目的需求。通过更改CSS样式，可以改变表格的外观和交互效果。
通过"jqGrid实例demo"中的代码，我们可以深入理解jqGrid的工作原理和使用方法，从而在实际项目中更有效地利用它来展示和管理数据。同时，这也是一个很好的起点，帮助我们进一步探索jqGrid的高级特性和定制功能。
zhengrongjun2014-01-24不能用啊！
