### JqGrid中文使用手册知识点概述
#### 一、JqGrid安装与配置
JqGrid是一款基于jQuery的网格插件，它提供了丰富的功能用于展示和管理数据表格。本章节详细介绍了如何安装JqGrid，并给出了一个简单的示例。
**安装步骤**：
- 将所需的CSS和JS文件添加到项目中。根据文档提供的目录结构，这些文件通常包含：
- CSS文件夹下的`ui.jqgrid.css`和子文件夹`ui-lightness`中的`images`文件夹和`jquery-ui-1.7.2.custom.css`。
- JS文件夹下的`i18n`文件夹，其中包含了语言文件如`grid.locale-bg.js`以及其他语言文件列表。此外还包括`Changes.txt`、`jquery-1.3.2.min.js`和`jquery.jqGrid.min.js`等文件。
**示例代码**：
```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>My First Grid</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/src/grid.loader.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
```
为了确保jqGrid和jQuery UI的字体大小一致，需要在页面上添加额外的样式以调整字体大小。
#### 二、JqGrid皮肤设置
JqGrid自3.5版本开始，完全支持jQuery UI的主题风格，用户可以根据需要自定义或下载主题。
**设置方法**：
- 从官方资源网站`http://jqueryui.com/themeroller/`下载所需的主题。
- 编辑自定义主题。
- 只需引入核心CSS文件“ui.theme.css”和“ui.core.css”，这两份文件位于`development-bundle/themes`目录下。
#### 三、JqGrid参数详解
这一部分深入讲解了JqGrid的一些基本参数及其作用，对于初学者来说非常有用。
**常见参数及其含义**：
| 参数名 | 描述 |
|----------|--------------------------------------------------------------|
| `url` | 获取数据的URL地址。 |
| `datatype` | 从服务器返回的数据格式，默认为XML。可选项包括：XML、LOCAL、JSON、JSONNP等。 |
| `mtype` | AJAX请求方式，可选值为POST或GET，默认为GET。 |
| `colNames` | 列的显示名称，以数组形式给出。 |
| `colModel` | 列属性设置，同样是以数组形式。包括列名、索引、宽度、对齐方式等。 |
| `pager` | 定义分页器的位置，可以放在页面的任意位置。 |
| `rowNum` | 显示的行数，该参数会被发送到后端处理。 |
| `rowList` | 下拉列表，用于改变每页显示的行数。 |
| `sortname` | 默认排序的列名。 |
| `viewrecord` | 是否显示记录总数。 |
| `caption` | 表格标题。 |
通过了解这些参数的意义，可以帮助开发者更好地定制和优化JqGrid的表现和功能，满足不同的需求场景。
- 1
- 2
- 3
- 4
- 5
前往页