Another GridSolution beta introducing datagrid state persistance in cookie : samples.

svn co http://svn-gridsolution.dev-solutions.fr/tags/beta-3

Ca y est, voici la première version téléchargeable de sfGridSolutionPlugin. Attention, il s'agit d'une version alpha pas encore vraiment débuggée sur IE, des fonctionnalités risquent fortement de changer.

Vous pouvez jeter un oeil sur la démo.

Exemple d'implémentation :

Dans votre contrôleur symfony :

/**
   * getting main data
   * @param sfWebRequest $request A request object
   */
  public function executeGetData(sfWebRequest $request)
  {
    //initialise
    $gridAction = new sfGridSolutionQuery($request);
    //defining get datas query
    $gridAction->setQuery(
      Doctrine_Query::create()
                     ->select('*')
                     ->from('Exemple e')
    );
    die($gridAction->execute());
  }
 /**
  * Showing demo grid
  * @param sfRequest $request A request object
  */
  public function executeIndex(sfWebRequest $request)
  {
    //init grid
    $this->grid = new sfGridSolution('grid', 'mygrid', array(
      'showHeader'     => true,
      'resizeColumns'  => true,
      'selectRow'      => true,
      'sortOn'         => 'id',
      'sortBy'         => 'DESC',
      'getDataUrl'     => 'Exemple/getData',   // => route to find datas
      'saveDataUrl'    => 'Exemple/saveData', // => route to save data
      'getDataMethod'  => 'post',
      'page'           => 1,
      'perPageOptions' => array(10, 15, 20, 50),
      'perPage'        => 20,
      'height'         => 300,
      'imagesPath'     => 'sfGridSolutionPlugin/images'
    ));
    //adding id
    $this->grid->addGroup(
      new sfGridSolutionGroup(
        array(
          'label'       => ' ',
          'isResizable' => true,
          'cssClass'    => 'group',
          'columns'     => array(
            new sfGridSolutionColumn(
              array(
                'label'      => 'id',
                'model'      => 'id',
                'align'   => 'right',
                'filterable' => true,
                'sortable'   => true,
                'width'      => '90',
                'actions'    => array(
                  new sfGridSolutionAction(
                    array(
                      'title'   => 'Show details',
                      'method'  => 'showDetails', // => will call javascript showDetails() method
                      'icon'    => 'viewmag.png'
                    )
                  )
                )
              )
            )
          )
        )
      )
     );
    //group1
    $this->grid->addGroup(
      new sfGridSolutionGroup(
        array(
          'label'       => 'group1',
          'isResizable' => true,
          'cssClass'    => 'group',
          'collapsable' => 'true',
 
          'collapse' => false,
          'columns'     => array(
            new sfGridSolutionColumn(
              array(
                'label'      => 'int_field1_1',
                'model'      => 'int_field1_1',
                'align'   => 'right',
                'filterable' => false,
                'sortable'   => true,
                'width'      => '90'
              )
            ),
            new sfGridSolutionColumn(
              array(
                'label'      => 'char_field1_2',
                'model'      => 'char_field1_2',
                'align'   => 'right',
                'filterable' => true,
                'sortable'   => true,
                'editable' => true,
                'width'      => '90'
              )
            ),
            new sfGridSolutionColumn(
              array(
                'label'      => 'date_field1_3',
                'model'      => 'date_field1_3',                
                'editable' => true,
                'align'      => 'left',
                'filterClass' => 'DateFilter',
                'filterable' => true,
                'sortable'   => true,
                'width'      => '130'
              )
            )
          )
        )
      )
    );

Dans la vue :

<h1>Demo Data Grid</h1>
 
<div id="mygrid" style=""></div>
 
<?php echo $grid->render();?>
 
<script type="text/javascript">
  function showDetails(event, action, cell){
    cell.row.buildExpandTip('Exemple/getDetails?id=' + cell.row.datas['id'].value);
  }
</script>

Un peu plus de doc verra le jour au fur et à mesure du développement.

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.