jqgrid 加载json数据 代码示例

jqGrid是一个基于jQuery的表格插件，可以方便地在网页中展示和管理数据。使用jqGrid加载JSON数据的步骤如下：

我们需要在HTML页面中引入所需的JavaScript和CSS文件。例如：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqgrid@5.4.0/css/ui.jqgrid.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jqgrid@5.4.0/js/jquery.jqgrid.min.js"></script>

接下来，我们需要创建一个表格容器，用于展示jqGrid。例如：

<table id="grid"></table>
<div id="pager"></div>

然后，我们可以使用JavaScript代码初始化jqGrid，并指定加载JSON数据的方式。例如：

$(function() {
  $("#grid").jqGrid({
    url: "data.json",  // 指定数据源的URL
    datatype: "json",  // 指定数据类型为JSON
    colModel: [  // 定义表格的列模型
      { name: "id", label: "ID", width: 50 },
      { name: "name", label: "姓名", width: 100 },
      { name: "age", label: "年龄", width: 50 }
    ],
    pager: "#pager",  // 指定分页器的ID
    rowNum: 10,  // 指定每页显示的行数
    rowList: [10, 20, 30],  // 指定可选择的每页行数
    sortname: "id",  // 指定默认排序列
    sortorder: "asc",  // 指定默认排序方式
    viewrecords: true,  // 显示总记录数
    autowidth: true,  // 自动调整表格宽度
    height: "auto"  // 自动调整表格高度
  });
});

在上述代码中，我们通过`url`属性指定了数据源的URL，通过`datatype`属性指定了数据类型为JSON。然后，通过`colModel`属性定义了表格的列模型，包括每列的名称、标签和宽度。通过`pager`属性指定了分页器的ID，通过`rowNum`属性指定了每页显示的行数，通过`rowList`属性指定了可选择的每页行数。通过其他属性设置了一些表格的显示和行为方式。

当页面加载完成后，jqGrid会自动发送请求到指定的URL获取JSON数据，并将数据展示在表格中。分页器也会根据数据的总记录数进行相应的调整。

需要注意的是，上述示例中的数据源URL为"data.json"，实际使用时需要根据需求修改为正确的URL。还需要根据实际情况调整其他属性的取值，以满足具体的需求。