Pour des besoins de saisie / recherche / modification de données complexes, une datagrid simple et rapide à mettre en place est indispensable. Après quelques recherches, on s'aperçoit rapidement que l'offre des datagrid sur mootools est très réduite. La seul Grid qui sort du lot à mon goût est celle d'omindatas : omnigrid. Cependant malgré la simplicité du concept, on se retrouve très vite limité dans les évolutions et l'ajout de fonctionnalités.

C'est donc de ce constat qu'est née GridSolution, une grille orientée objet de manipulation de données.

Ce script n'en est qu'à ses prémisses mais s'avère assez prometteur.

Les objectifs pour une première version tagguée "stable" sont :

- pouvoir instancier des groupes de colonnes :

var myGroup = new GridSolutionGroup({
      label : 'my group',
      isResizable : true,
      cssClass : 'group'
});

- pouvoir instancier des colonnes :

var myColumn = new GridSolutionColumn({
      label : 'id',
      model : 't.id',   // => alias du modèle de données
      cssClass : 'right',
      sortable : true, //=> autorise le classement vertical
      width : 40
});

- grouper des colonnes :

myGroup.options.columns = [myColumn];

- instancier la grille :

window.addEvent("domready", function(){
    var datagrid = new GridSolution($('mygrid'), {
      showHeader : true,
      resizeColumns : true,
      selectRow : true,
      sortOn : 'id',
      sortBy : 'DESC',
      getDataUrl : 'getData.php',
      getDataMethod : 'post',
      page : 1,
      perPageOptions : [10, 15, 20, 50],
      perPage : 20,
      header : myGroup,
      height : 300,
      imagesPath : '/grid/sfGridSolutionPlugin/images'
    });
  });

- filtrer les colonnes par type de données :

var myColumns = new GridSolutionColumn({
        label : 'Sended at',
          model : 't.charging_at',
          filterable : true,           // => initialise le filtre
          dataType : 'dateTime',  // => génère un dateTimePicker
          sortable : true,
          width : 200,
          tip : ''         
        });

- éditer les lignes de façon asynchrone :

myColumn.options.editable = true;
datagrid.options.setDataUrl = 'setData.php';

- affichage des erreurs renvoyées par le serveur :

- afficher le détail d'une ligne :

- une manipulation des données orientées opérateurs de saisies (100% manipulable sans le pointeur de la souris).

Ce sont les fonctionnalités actuellement présentes sur la version de développement.

Pour le date picker, j'ai choisi datepicker, mais ce choix reste sous réserve pour des questions de compatibilité IE6 (/performances) et d'ergonomie (il n'est pas 100% navigable au clavier).

Je vous laisse faire un tour sur la démo en attendant une version stable et téléchargeable sous license MIT qui devrait voir le jour début septembre après arrêt des nouvelles fonctionnalités, débug, tests et optimisations du code. A noter qu'en parallèle, un plugin pour symfony / doctrine est en cours de réalisation pour permettre des développements rapides d'interfaces complexes.