lundi 30 mai 2011

CGridView : les colonnes à la une

Le composant CGridView (son nom complet est zii.widgets.grid.CGridView) fait partie des widgets de base du framework Yii. Il est utilisé notamment par Gii, le générateur de code intégré, lors de la création des fameux CRUD (Create, Read, Update, Delete). Si vous ne voyez toujours pas de qui je parle, allez faire un tour du côté de la démo Blog (pour vous connecter c'est demo/demo).
Ce joli tableau présente donc les valeurs des objets lus depuis la base de données par pages de 10 (défaut). Voyons un peu comment personnaliser le rendu des colonnes.
Pour cet exemple, nous allons nous baser sur une classe dérivée de CActiveRecord que nous appellerons MyRecord. Cette classe (hypothétique) comportera plusieurs attributs, qui devront apparaître dans chaque colonne du CGridView : 'id', 'name', 'create_time', etc ....

<?php $this->widget('zii.widgets.grid.CGridView', array(
   'id'=>'myrecord-grid',
   'dataProvider'  => $model->search(),
   'filter'        => $model,
   'columns'       => array(
      // 'id' et 'name' seront affichés normalement
      'id',
      'name',

      // Si MyRecord contient une relation nommée 'my_relation' et que l'objet 
      // en relation contient lui même un attribut nommé 'code', on peut
      // directement écrire :
      'my_relation.code'

      // 'create_time' est du type DATETIME : il sera affiché automatiquement
      // comme une date
      'create_time',

      // 'website_url' est ... une url ! il sera affiché en tant que lien
      // hypertexte
      array(
         'name' => 'website_url',
         'type' => 'url'
      ),

      // 'color' est une couleur (ex: #555343). Nous voulons l'utiliser pour
      // pour l'affichage de la valeur. Par exemple, la valeur 'red' sera 
      // affichée en rouge.
      array(
         'header' => 'Ma Couleur'   // nom de la colonne (entête)
         'name'   => 'color',       // nom de l'attribut
         'filter' => '',            // pas de filtre de colonne
         'type'   => 'raw',         // pas de conversion des caractères 
                                    // spéciaux
         'value'  => '"<span style=\"color:$data->color\">$data->color</span>"'     
      ),
      array(
         'class'=>'CButtonColumn',
      ),
   ),
)); ?>
Les valeurs disponibles pour le 'type' sont définies au niveau de la classe CFormatter


Modifier le nombre de lignes
Pour que votre CGridView affiche le nombre de ligne que vous souhaitez (par défaut : 10), il vous faudra intervenir au niveau du data provider. La ligne 03 affecte le data provider renvoyé par la méthode search(), à votre grid. C'est donc dans la méthode search() que nous allons changer les paramètres d'initialisation du data provider.

return new CActiveDataProvider(get_class($this), array(
         'criteria'=>$criteria,
          'pagination'=>array(
              // on va choisir d'afficher 20 lignes par page
              'pageSize'=>20,
          ),
      ));

Notons que le data provider prend en charge tout ce qui concerne la pagination

Voilà pour un premier aperçu de cette widget standard Yii. Il y a encore beaucoup à dire sur le sujet et les possibilités de personnalisation sont légions. Ce sera l'objet d'un prochain post (peut-être).
Pour aller plus loin, voici quelques liens utiles :

Aucun commentaire:

Enregistrer un commentaire