Edited at
Yii2Day 21

Yii2のGridViewについて

More than 3 years have passed since last update.


はじめに

私はPHP経験はほとんどなかったのですが、ひょんなことからYii2Frameworkを使うことになりました。

あまり色々なフレームワークを知っている方ではないですが(特にPHPは全然知らない)、Yii2は初期テンプレートやCRUD生成、各種ウィジットの力で、綺麗なUIのシステムがさくさく開発できてよいなぁと思っています。

というわけで今日はその中から、便利ウィジットの一つであるGridViewについて書いてみます。


GridViewとは

GridViewとは、Yii2で用意されているData widgetsのひとつです。

DataProviderを用意して紐づけるだけで、いい感じの表(ソート、ページング機能付き)を出力してくれます。

例:Newsモデルの内容を表出力する

<?php

use app\models\News;
use yii\grid\GridView;
use yii\data\ActiveDataProvider;

$dataProvider = new ActiveDataProvider([
'query' => News::find(),
'pagination' => [
'pageSize' => 20,
],
]);
echo GridView::widget([
'dataProvider' => $dataProvider,
]);

表示結果


フィルタリング(検索)機能

filterModelが設定されていると、列のフィルタリングが可能となります。

    $searchModel = new NewsSearch();

echo GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
]);

表示結果

ここまでの部分については、モデル情報からGiiで自動生成することができます。


カスタマイズ

少し表をカスタマイズしてみます。


表示列を変更

columnsプロパティを設定すると、定義した列のみが表示されます。

<?= GridView::widget([

'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'date',
'news',
],
]); ?>

SerialColumnは行番号を出力してくれるクラスです。


フォーマット

例えば、以下のような整数型タイムスタンプはそのまま出すと

こんな感じなわけですが、

...

'columns' => [
...
'created_at:datetime',
'updated_at:datetime',

のように指定すると

フォーマットされます。

フォーマットについてはこちら参照。

http://www.yiiframework.com/doc-2.0/guide-output-data-widgets.html#data-column


ボタン表示

行を操作するためのボタン(編集や削除)を表示したい場合、ActionColumnクラスを使います。

<?= GridView::widget([

'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
...
['class' => 'yii\grid\ActionColumn'],
],
]); ?>

何も設定しないとこんな感じで、表示・編集・削除ボタンが表示されます。

(この辺はActionColumnクラスの中身参照)

このボタンを、編集・削除ボタンのみにしてボタンデザインもカスタマイズしてみます。

['class' => 'yii\grid\ActionColumn',

'template' => '{update} {delete}',
'buttons' => [
'update' => function ($url) {
return Html::a('編集', $url, [
'title' => Yii::t('yii', 'Update'),
'data-pjax' => '0',
'class' => 'btn btn-primary',
]);
},
'delete' => function($url) {
return Html::a('削除', $url, [
'title' => Yii::t('yii', 'Delete'),
'data-confirm' => Yii::t('yii', 'Are you sure you want to delete this item?'),
'data-method' => 'post',
'data-pjax' => '0',
'class' => 'btn btn-danger',
]);
}
]],

templateプロパティにアクションIDを設定。

templateに定義した順番で、buttonsプロパティの設定がレンダリングされます。


列に文字列以外を出力

DataColumnクラスを用いると、もっと柔軟な出力が可能となります。

例) Boolean型のis_activeをチェックボックス表示

'columns' => [

...
['class' => 'yii\grid\DataColumn' ,
'attribute' => 'is_active',
'format' => 'raw',
'value' => function(News $data){
return Html::activeCheckbox($data, 'is_active', [
'label' => ''
]);
} ],

ここに更にフィルタリングを付けたい場合。


  • 全表示

  • On

  • Off

をドロップダウンで選択できるようにしてみます。

'columns' => [

['class' => 'yii\grid\SerialColumn'],

'id',
'date',
'news',
['class' => 'yii\grid\DataColumn' ,
'attribute' => 'is_active',
'format' => 'raw',
'filter' => Html::activeDropDownList($searchModel, "is_active", [
1 => 'On',
0 => 'Off',
], ['prompt' => '全表示', 'class' => 'form-control']),
'value' => function(News $data){
return Html::activeCheckbox($data, 'is_active', [
'label' => ''
]);
} ],

ちゃんとSearchModelで絞り込む処理を実装してあれば

こんな感じでフィルタリングが動作します。


まとめ

GridView便利。

Yii2は至れり尽くせり感がいいですね。

めでたく正式リリースされましたし、今後の発展が楽しみです。