第一個網格

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>