jqgrid 5.8.2 使用教程

jqGrid 是一款基于 jQuery 的表格插件，它可以快速地将数据以表格形式呈现在网页上，并且支持分页、排序、筛选、编辑等功能。下面是 jqGrid 5.8.2 的使用教程：

1. 引入必需的文件

在 HTML 页面中引入 jQuery 和 jqGrid 的 CSS 和 JavaScript 文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/5.8.2/css/ui.jqgrid.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/5.8.2/jquery.jqgrid.min.js"></script>

2. 创建表格

在 HTML 页面中创建一个空的 `<table>` 标签，用于显示表格：

<table id="myGrid"></table>

然后在 JavaScript 中定义表格的配置项：

var myGrid = $("#myGrid");

myGrid.jqGrid({
  url: "data.json",
  datatype: "json",
  colModel: [
    { name: "id", label: "ID", width: 50 },
    { name: "name", label: "Name", width: 150 },
    { name: "age", label: "Age", width: 50 },
    { name: "email", label: "Email", width: 200 }
  ],
  autowidth: true,
  height: "auto",
  rowNum: 10,
  pager: true,
  caption: "My Grid"
});

上述代码中，`url` 属性指定了表格要加载的数据源，`datatype` 属性指定了数据源的类型（这里是 JSON），`colModel` 属性指定了表格的列模型，`autowidth` 属性开启了自动宽度，`height` 属性指定了表格的高度（这里是自适应高度），`rowNum` 属性指定了每页显示的行数，`pager` 属性开启了分页功能，`caption` 属性指定了表格的标题。

3. 加载数据

在上述代码中，我们指定了表格的数据源为 `data.json`，因此需要在服务器端生成这个数据源。数据源的格式如下：

{
  "page": 1,
  "total": 3,
  "records": 30,
  "rows": [
    { "id": 1, "name": "John", "age": 30, "email": "john@example.com" },
    { "id": 2, "name": "Mary", "age": 25, "email": "mary@example.com" },
    { "id": 3, "name": "Peter", "age": 35, "email": "peter@example.com" },
    ...
  ]
}

其中，`page` 属性表示当前页码，`total` 属性表示总页数，`records` 属性表示总记录数，`rows` 属性表示当前页的数据行。

4. 其他功能

除了上述功能外，jqGrid 还支持许多其他功能，比如排序、筛选、编辑等。具体使用方法可以参考 jqGrid 的官方文档。