第一个网格

Created: November-22, 2018

JqGrid 是作为 jQuery 插件实现的，我们的插件使用 jQuery UI CSS 或 Bootstrap CSS 进行样式化。因此，必须包含相应的 JavaScript 和 CSS 文件。第二个基本的东西，应该知道的是，免费的 jqGrid 在内部使用 HTML。必须创建一个空元素来保留应该创建网格的位置。

最后应该调用 jQuery("#tableId").jqGrid({/*options*/}); 来创建网格。jqGrid 的不同选项提供表体的数据和有关网格外部的信息。例如，下面的代码

$(function () {
        "use strict";
        $("#grid").jqGrid({
            colModel: [
                { name: "firstName" },
                { name: "lastName" }
            ],
            data: [
                { id: 10, firstName: "Angela", lastName: "Merkel" },
                { id: 20, firstName: "Vladimir", lastName: "Putin" },
                { id: 30, firstName: "David", lastName: "Cameron" },
                { id: 40, firstName: "Barack", lastName: "Obama" },
                { id: 50, firstName: "François", lastName: "Hollande" }
            ]
        });
    });

free jqGrid 和标准 HTML 表之间的区别如下：

可排序列： 可以单击列标题以按列中的内容对行进行排序。
悬停效果 ：免费的 jqGrid 使你能够为行和网格上的单元格使用悬停效果。
可选行 ：可以单击网格的一行来选择/取消选择它，也可以
就地编辑单元格。
多选行：可以选择多行。
可选行 ：可以单击网格的一行来选择它。
可调整大小的列：可以以直观的方式调整列的大小，如下面的动画图像所示。

==> 一些预付差异包括：

搜索/过滤 ：可以在 eq，lt，lte，gt 等上搜索或过滤表格。

- 搜索：一个新的弹出窗口用于搜索

--Filter：文本框出现在网格的每列顶部
分页/可折叠行功能。

完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Your page title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/jquery.jqgrid.min.js"></script>
    <script>
    //<![CDATA[
    $(function () {
        "use strict";
        $("#grid").jqGrid({
            colModel: [
                { name: "firstName" },
                { name: "lastName" }
            ],
            data: [
                { id: 10, firstName: "Angela", lastName: "Merkel" },
                { id: 20, firstName: "Vladimir", lastName: "Putin" },
                { id: 30, firstName: "David", lastName: "Cameron" },
                { id: 40, firstName: "Barack", lastName: "Obama" },
                { id: 50, firstName: "François", lastName: "Hollande" }
            ]
        });
    });
    //]]>
    </script>
</head>
<body>
<table id="grid"></table>
</body>
</html>