Bootstrap嵌入jqGrid，使你的table牛逼起来

下面是“Bootstrap嵌入jqGrid，使你的table牛逼起来”的完整攻略：

一、什么是Bootstrap？

Bootstrap是一款用于第一平台CSS、HTML和Javascript的框架，可以自适应不同尺寸的显示设备，使开发响应式和移动优先的网站变得更加容易。它包含大量的CSS样式和Javascript组件，可以大大简化开发过程。

二、什么是jqGrid？

jqGrid是一款功能强大、灵活、用户友好的jQuery表格插件，可以用于构建各种类型的表格，包括本地数据、从服务器获取的数据和JSON数据。

三、如何嵌入jqGrid？

以下是嵌入jqGrid的步骤：

1. 在页面中引入Bootstrap和jqGrid的样式和脚本文件。

<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/jqgrid/5.6.0/jquery-ui.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/jqgrid/5.6.0/ui.jqgrid.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jqgrid/5.6.0/jquery.jqGrid.min.js"></script>

1. 创建一个
   元素作为表格的容器。

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

1. 编写Javascript代码来创建和配置表格，例如：

$(document).ready(function () {
    var data = [
        { id: 1, name: "John", age: 22 },
        { id: 2, name: "Jane", age: 25 },
        { id: 3, name: "Bob", age: 30 }
    ];
    $("#grid").jqGrid({
        data: data,
        datatype: "local",
        colNames: ["ID", "Name", "Age"],
        colModel: [
            { name: "id", width: 50 },
            { name: "name", width: 100 },
            { name: "age", width: 50 }
        ],
        height: "auto",
        rowNum: 10,
        pager: "#pager"
    });
});

在这个示例中，我们使用了本地数据来生成表格，包括三列：ID、Name和Age。我们还设置了表格高度和每页行数，并添加了一个分页控件。

四、示例说明

示例一：使用服务器端数据

以下是使用服务器端数据的示例代码：

$(document).ready(function () {
    $("#grid").jqGrid({
        url: "data.php",
        datatype: "json",
        mtype: "GET",
        colNames: ["ID", "Name", "Age"],
        colModel: [
            { name: "id", width: 50 },
            { name: "name", width: 100 },
            { name: "age", width: 50 }
        ],
        height: "auto",
        rowNum: 10,
        pager: "#pager"
    });
});

在这个示例中，我们使用了一个PHP脚本来返回JSON格式的数据。我们设置了一个URL来指定数据源，并使用datatype参数来指定数据类型。mtype参数用于指定HTTP请求方法（GET或POST）。其他参数与本地数据示例相同。

示例二：使用插件

可以使用一些插件来增强jqGrid的功能，例如编辑、排序、搜索、分组等。以下是一个使用了搜索插件的示例代码：

$(document).ready(function () {
    $("#grid").jqGrid({
        url: "data.php",
        datatype: "json",
        mtype: "GET",
        colNames: ["ID", "Name", "Age"],
        colModel: [
            { name: "id", width: 50 },
            { name: "name", width: 100 },
            { name: "age", width: 50 }
        ],
        height: "auto",
        rowNum: 10,
        pager: "#pager",
        search: true,
        postData: {
            filters: JSON.stringify({
                groupOp: "AND",
                rules: [
                    { field: "name", op: "cn", data: "" }
                ]
            })
        }
    });
});

在这个示例中，我们添加了search参数来启用搜索插件。我们还使用postData参数来设置搜索条件，这里我们只搜索名称包含特定字符的行。其他参数与服务器端数据示例相同。

以上就是使用Bootstrap嵌入jqGrid的完整攻略，希望对您有所帮助！