Looking for jqgrid Answers? Try Ask4KnowledgeBase
Looking for jqgrid Keywords? Try Ask4Keywords

jqgridjqgrid入門


備註

本節概述了jqgrid是什麼,以及開發人員可能想要使用它的原因。

它還應該提到jqgrid中的任何大型主題,並鏈接到相關主題。由於jqgrid的文檔是新的,因此您可能需要創建這些相關主題的初始版本。

第一個網格

JqG​​rid是作為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>