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>