Dynamisez vos tableaux avec jqGrid

Dans un article du blog officiel, j’ai présenté rapidement JQuery comme une librairie facilitant grandement l’utilisation du javascript dans les interfaces html. Cependant, l’un des autres intérêts de JQuery se trouve dans la variété des plugins disponibles (après tout, nous ne sommes pas là pour réinventer la roue).

Aujourd’hui, je vais vous présenter jqGrid.
exemple de tableau jqGrid

Ce plugin permet d’injecter des tableaux dynamiques dans votre page html.
Parmi tous les avantages que propose ce plugin, je citerai:

    • la possibilité de redimensionner les colonnes du tableau par drag-&-drop
    • le tri et le filtrage des données assurés au niveau du javascript
    • la pagination des données gérée par le javascript
    • la possibilité d’alimenter le tableau à partir de données xml ou Json
    • les cellules du tableau pouvant basculer en mode “édition” afin d’en modifier le contenu

Pour celà, il faut déclarer un élément html vide de type table (une convention de jqGrid).

<table id="grid_id"></table>

Une fois la table déclarée, il suffit d’appeler la fonction jqGrid() au chargement de la page pour y injecter le code html de notre tableau.

 jQuery("#grid_id").jqGrid(options);

Le paramètre options est une collection de couples clés/valeurs permettant de définir la configuration de notre tableau. Ces valeurs vont du booléen à la fonction javascript.
Je ne vous citerai pas l’exhaustivité des paramètres utilisables. Si vous voulez les connaitre, je vous invite à consulter la documentation sur le wiki de jqGrid.

Comme tous les outils puissants et complexes, il faut faire preuve de pragmatisme au moment de l’utiliser. Par exemple, il est possible de configurer le nombre d’enregistrements retournés par appel au serveur. En effet, jqGrid récupère les données après l’affichage de la page en interrogeant le serveur avec des requêtes AJAX ou en lisant un tableau statique défini dans la configuration du composant. Cette configuration peut se révéler critique selon la volumétrie des données ou la complexité des traitements qui les récupèrent.

Je vous encourage à regarder les démos accompagnées de leurs codes sources qui vous donneront certainement de bonnes idées.

VN:R_U [1.9.22_1171]
Rating: +1 (from 1 vote)
Share
Ce contenu a été publié dans Trucs & astuces, avec comme mot(s)-clef(s) , , , , . Vous pouvez le mettre en favoris avec ce permalien.

3 réponses à Dynamisez vos tableaux avec jqGrid

  1. J’ai regardé un peu et effectivement, ce composant a l’air très sympa.

    Les frameworks orientés composants, comme JSF, revendiquent une approche “plug and play” : ils fournissent tout côté client et côté serveur.
    Après avoir été pieds et poings liés pendant plus d’un an et demi avec une librairie de composants JSF (RichFaces en l’occurrence) et galéré sur des problèmes de performances, je considère que cette approche est à côté de la plaque.

    Back to the basics : un bon framework orienté action, genre Spring MVC, des composants JQuery “à la carte” et des flux light en JSON!

    VN:R_U [1.9.22_1171]
    Rating: 0 (from 0 votes)
  2. Ping : Smelly tables | Excilys Labs

  3. Ping : Savez-vous planter des arbres à la mode de Javascript? | Excilys Labs

Laisser un commentaire