Premiers pas avec jqgrid

La première grille

JqGrid est implémenté en tant que plugin jQuery, notre plugin utilise jQuery UI CSS ou Bootstrap CSS pour le style. Ainsi, il faudrait inclure les fichiers JavaScript et CSS correspondants. La deuxième chose de base, qu’il faut savoir, est le fait que jqGrid gratuit utilise HTML

en interne. Il faudrait créer un élément
vide pour réserver l’endroit où la grille doit être créée.

Enfin, il faut appeler jQuery("#tableId").jqGrid({/*options*/}); pour créer la grille. Différentes options de jqGrid fournissent les données du corps de la table et les informations sur la partie extérieure de la grille. Par exemple, le code ci-dessous

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

Les différences entre jqGrid gratuit et un tableau HTML standard sont les suivantes :

  • Colonnes triables : On peut cliquer sur l’en-tête de colonne pour trier les lignes par le contenu de la colonne.

  • Effets de survol : jqGrid gratuit vous donne la possibilité d’utiliser des effets de survol pour les lignes et les cellules de la grille.

  • Lignes sélectionnables : On peut cliquer sur une ligne de la grille pour la sélectionner/désélectionner et in-place-edit the cells as well.

  • Lignes multi-sélectionnables : on peut sélectionner plusieurs lignes.

  • Lignes sélectionnables : On peut cliquer sur une ligne de la grille pour la sélectionner.

  • Colonnes redimensionnables : On peut redimensionner les colonnes de manière intuitive, comme montré dans l’image animée ci-dessous.

==> Certaines différences d’avance consistent en :

  • Rechercher/filtrer : On peut rechercher ou filtrer la table sur eq, lt, lte, gt etc.

    --Search : A new popup comes for searching
    

    –Filter : A text-box appears on the top of each column of the grid

- Fonctionnalité de ligne Pagination/Réductible.

Exemple complet :

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