J'utilise flexigrid, un plugin de JQuery, dans le cadre d'un projet pro. L'application est dotée de nombreuses listes (datagrid) effectuant plusieurs requêtes AJAX. L'astuce consiste à créer des objets de chacun de mes composants.

Prenons le cas d'une page HTML simple :

<html>
<head>
 
<script type="text/javascript" src="http://localhost/projet/js/jquery.1.2.6.js"></script>
<script type="text/javascript" src="http://localhost/projet/js/flexigrid.js"></script>
 
<!-- Intégration du composant grid "Exemple" -->
<script type="text/javascript" src="http://localhost/projet/js/gridExemple.js"></script>
 
<script type="text/javascript">
	$(document).ready(function(){ // Quand la page est chargée
		gridExemple.show(); // Création du grid
	});
</script>
</head>
<body>
 
<!-- On le grid sera placé ici -->
<table id="gridExemple"><tr><td></td></tr></table>
 
</body>
</html>

Jusque là, rien d'exceptionnel, on inclut les différentes librairies Javascript nécessaires (JQeury et Flexigrid) ainsi que notre composant "gridExemple". Quand la page est chargée, on appelle la méthode show du composant gridExemple.

Le code de gridExemple.js se présente comme ceci :

var gridExemple = {
 
	name: 'gridExemple'
	,show: function() {
		$("#gridExemple").flexigrid ({
			title: 'Liste des actualités'
			,url: 'liste.php' // Page php qui va générer le contenu de la liste
			,dataType: 'json'
 
			// Définition des colonnes
			,colModel: [
				{ display: 'Id', name: 'id', width: 40, sortable: true, align: 'left' },
				{ display: 'Titre', name: 'titreCourt', width: 300, sortable: false, align: 'left' },
				{ display: 'Publié le', name: 'datePublication', width: 100, sortable: true, align: 'left' },
				{ display: 'Thématique', name: 'thematique', width: 200, sortable: true, align: 'left' },
			]
 
			// Définition des boutons d'action
			,buttons : [
				{ name: 'Ajouter', bclass: 'add', onpress : this.ajouter},
				{ name: 'Modifier', bclass: 'upd', onpress : this.modifier},
				{ name: 'Effacer', bclass: 'delete', onpress : this.effacer }
			]
 
			,sortname: "id"
			,sortorder: "desc"
			,usepager: true
			,rp: 25
			,width: 'auto'
			,height: 400
		})
	} // eo show()
 
	,ajouter: function() { // bouton ajouter
 
		// Ajouter un élément
 
	} // eo ajouter()
 
	,modifier: function(com, grid) { // bouton modifier
 
		// Modifier un élément
 
	} // eo modifier()
 
	,effacer: function(com, grid) { // bouton effacer
 
		alert("Elément effacé");
 
	} // eo effacer()
 
	,methodeX()  {
 
	} // eo methodeX()
 
	,methodeY() {
 
	} // eo methodeY();
 
};

Le composant gridExemple dispose maintenant de 6 méthodes :

  • show() qui affiche le grid
  • ajouter(), pour ajouter un enregistrement
  • modifier(), pour modifier un enregistrement
  • supprimer(), pour supprimer un ou plusieurs enregistrements
  • methodeX()
  • methodeY()

Les méthodes ajouter / modifier et supprimer pourront effectuer un certains nombres d'actions (requêtes AJAX, affichage de notifications à l'utilisateur) et utiliser d'autres méthodes comme la methodeX ou la methodeY. L'intérêt est que l'ensemble des actions liées au gridExemple sont regroupées dans l'objet gridExemple qui lui même est défini dans un seul fichier. Cela simplifie la maintenance et la lisibilité du code.

Cette méthode n'est sans doute pas parfaite et je suis intéressé par les techniques que vous pouvez utiliser. L'objectif étant encore une fois, la lisibilité, la maintenance et la réutilisabilité du code.