jQuery 重新加载已加载的 jqGrid，使用不同的表格数据

在本文中，我们将介绍如何使用 jQuery 重新加载已经加载的 jqGrid，并且使用不同的表格数据。jqGrid 是一个流行的 jQuery 插件，用于快速构建强大的网格控件。

什么是 jqGrid

jqGrid 是一个开源的 jQuery 插件，用于创建灵活和强大的网格控件。它提供了丰富的功能，包括排序、分页、编辑、导出等。jqGrid 可以从本地数据和远程服务器数据源中加载表格数据，并且可以对表格数据进行增删改查操作。

如何加载 jqGrid

要加载 jqGrid，我们需要引入 jQuery 和 jqGrid 的相关文件，并在 HTML 页面中创建一个容器元素来放置表格。

<!DOCTYPE html>
<html>
<head>
    <title>jqGrid Demo</title>
    <link rel="stylesheet" type="text/css" href="path/to/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="path/to/ui.jqgrid.css">
    <script src="path/to/jquery.js"></script>
    <script src="path/to/grid.locale-en.js"></script>
    <script src="path/to/jquery.jqGrid.js"></script>
</head>
<body>
    <table id="grid"></table>
</body>
</html>

然后，在 JavaScript 中，我们可以使用以下代码来加载 jqGrid：

$(document).ready(function(){
    $("#grid").jqGrid({
        url: "path/to/data.json",
        datatype: "json",
        colModel: [
            {name: "id", label: "ID", width: 100},
            {name: "name", label: "Name", width: 200},
            {name: "age", label: "Age", width: 100}
        ],
        rowNum: 10,
        width: 600,
        height: "auto",
        pager: "#gridPager"
    });
});

在以上示例中，我们将 jqGrid 绑定到 id 为 “grid” 的表格上。我们通过指定 url 和 datatype 来加载数据，colModel 定义了表格的列，并且可以设置各列的宽度。rowNum 设置每页显示的行数，width 设置表格的宽度，height 设置表格的高度，pager 指定分页控件的容器。

重新加载 jqGrid

有时候我们需要在表格加载完成后更换表格的数据源，这时候可以使用 jqGrid 的 reloadGrid 方法来重新加载数据。

首先，我们需要将 jqGrid 绑定到一个变量，并给该变量一个唯一的标识符：

var grid = $("#grid");

然后，在需要重新加载数据时，我们可以使用以下代码来重新加载 jqGrid：

grid.jqGrid("clearGridData")
    .jqGrid("setGridParam", { url: "path/to/new-data.json" })
    .trigger("reloadGrid");

以上代码中，clearGridData 方法用于清空原有的表格数据，setGridParam 方法用于更新表格的 URL，trigger 方法用于触发表格重新加载数据。通过更换 URL，我们可以加载不同的数据源，从而实现重新加载 jqGrid，并使用不同的表格数据。

示例

为了更好地理解如何使用 jQuery 重新加载已加载的 jqGrid，并且使用不同的表格数据，我们来实现一个简单的示例。

在示例中，我们有一个包含学生信息的表格。初始时，表格加载了来自 data.json 文件的学生数据。当用户点击一个按钮时，我们通过重新加载 jqGrid，并使用不同的数据源来展示不同的学生数据。以下是示例的完整代码：

<!DOCTYPE html>
<html>
<head>
    <title>jqGrid Demo</title>
    <link rel="stylesheet" type="text/css" href="path/to/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="path/to/ui.jqgrid.css">
    <script src="path/to/jquery.js"></script>
    <script src="path/to/grid.locale-en.js"></script>
    <script src="path/to/jquery.jqGrid.js"></script>
</head>
<body>
    <table id="grid"></table>
    <button id="reloadButton">Load New Data</button>

    <script>
        (document).ready(function(){
            var grid =("#grid");

            // 初始加载数据
            grid.jqGrid({
                url: "path/to/data.json",
                datatype: "json",
                colModel: [
                    {name: "id", label: "ID", width: 100},
                    {name: "name", label: "Name", width: 200},
                    {name: "age", label: "Age", width: 100}
                ],
                rowNum: 10,
                width: 600,
                height: "auto",
                pager: "#gridPager"
            });

            // 点击按钮重新加载数据
            $("#reloadButton").click(function(){
                grid.jqGrid("clearGridData")
                    .jqGrid("setGridParam", { url: "path/to/new-data.json" })
                    .trigger("reloadGrid");
            });
        });
    </script>
</body>
</html>