jQuery : un plugin tableau +++ [jqGrid]
552 J'aime !

jQuery : un plugin tableau +++ [jqGrid]

Publié par Yann GROSYEUX

jQuery brille pour son core, son interface, et aussi par ses nombreux et variés plugins. jqGrid est un plugin permettant d’injecter des tableaux dynamiques dans votre page html.

Parmi les fonctionnalités 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

 

jquery-jqgrid-module

 

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 qui est très complet.

 

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.

Un commentaire ? Réagissez !