jqgridAan de slag met jqgrid


Opmerkingen

Deze sectie geeft een overzicht van wat jqgrid is en waarom een ontwikkelaar het misschien wil gebruiken.

Het moet ook alle grote onderwerpen binnen jqgrid vermelden en naar de gerelateerde onderwerpen verwijzen. Aangezien de Documentatie voor jqgrid nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.

Het eerste rooster

JqGrid is geïmplementeerd als jQuery-plug-in, onze plug-in gebruikt jQuery UI CSS of Bootstrap CSS voor styling. Dus zou men de overeenkomstige JavaScript- en CSS-bestanden moeten opnemen. Het tweede fundamentele ding, dat men moet weten, is het feit dat gratis jqGrid HTML intern gebruikt. Je zou een leeg element moeten maken om de plaats te reserveren waar het raster moet worden gemaakt.

Ten slotte moet men jQuery("#tableId").jqGrid({/*options*/}); om het raster te maken. Verschillende opties van jqGrid bieden de gegevens van de tabel en de informatie over het buitenste deel van het raster. Bijvoorbeeld de onderstaande code

$(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" }
            ]
        });
    });
 

De verschillen tussen gratis jqGrid en een standaard HTML-tabel zijn als volgt:

  • Sorteerbare kolommen: men kan op de kolomkop klikken om de rijen te sorteren op inhoud in de kolom.

  • Zweefeffecten : gratis jqGrid biedt u de mogelijkheid om zwevende effecten te gebruiken voor rijen en de cellen op het raster.

  • Selecteerbare rijen : men kan op een rij van het raster klikken om het te selecteren / deselecteren en kan
    plaats ook de cellen.

  • Multi-selecteerbare rijen : men kan meerdere rijen selecteren.

  • Selecteerbare rijen : men kan op een rij van het raster klikken om het te selecteren.

  • Aanpasbare kolommen : men kan het formaat van de kolommen op een intuïtieve manier wijzigen, zoals weergegeven in de geanimeerde afbeelding hieronder.

==> Sommige vervroegde verschillen bestaan uit:

  • Zoeken / filteren : men kan de tabel zoeken of filteren op eq, lt, lte, gt etc.

    --Zoeken: een nieuwe pop-up komt om te zoeken

    --Filter: er verschijnt een tekstvak bovenaan elke kolom van het raster

  • Paginatie / opvouwbare rijfunctie .

Volledig voorbeeld:

<!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>