[Yii2]GridViewのfilter機能であれこれやりたい ~ C-limber's high

2016年4月8日金曜日

[Yii2]GridViewのfilter機能であれこれやりたい

12:55 Posted by Unknown php, Yii2 No comments

こんにちは　エンジニアの井口です
Yii2のGridViewのお話。

一覧ページを作成するのに非常に強力なGridViewですが、
これまた強力なfilter機能を備えています。

各カラムで設定したmodelのattributeなどで勝手にfilterリングしてくれます。
↓GridViewのUI

GridViewのドキュメント

GridView, yii\grid\GridView - Yii Framework 2.0 API Documentation

今日はそのfilterで色々なことをやりたい時のメモです。

■セレクトボックスで検索させたい！

このようにセレクトボックスでフィルタリングさせたいことは多々あると思います。

コードは

[
    'attribute' => 'machine_id',
    'filter' => \yii\helpers\ArrayHelper::map(Machine::find()->asArray()->all(), 'id', 'name'),
    'value' => function($data) {
        return Html::a($data->machine_name, ['/machine/view', 'id' => $data->machine_id]);
    },
    'format' => 'html',
],

こういうふうにします。

ポイントは、

filterパラメータで配列を指定する！
どの検索項目に当たるか？はattributeパラメータで指定
\yii\helpers\ArrayHelperを使ってその場で設定用配列をカジュアルに作成
formatをhtmlまたはrawにしてリンクを表示できるようにする

以上となります。

これでFilter部分にセレクトボックスが出現します。
選択の配列が入り組む場合は、filterで渡す配列をmodelの方にstaticなmethodとして書いちゃってもいいですね。

ArrayHelperのドキュメント

ArrayHelper, yii\helpers\ArrayHelper - Yii Framework 2.0 API Documentation

■datePickerで検索させたい！！

このようにフィルター部分にでDatePickerを表示させたいこともあるかと思います。

コードは

[
    'label' => '利用日',
    'attribute' => 'use_day',
    'value' => 'ymd_date',
    'format' => 'raw',
    'filter' => \yii\jui\DatePicker::widget([
        'model' => $searchModel,
        'attribute' => 'use_day',
        'language' => 'ja',
        'dateFormat' => 'yyyy-MM-dd',
        'options' => [
            'class' => 'form-control'
        ]
    ]),
],

こうなります。

ポイントは、

filterパラメータで\yii\jui\DatePickerを指定する！
どの検索項目に当たるか？はattributeパラメータで指定
filterパラメータの中のmodelとattributeも忘れず指定! ←重要
filterパラメータの中の、modelで、$searchModelを指定!（今ループさせてるmodelを指定する）
labelはおこのみで指定（attributeの自動取得に任せても良い）

以上となります。

これで簡単にフィルター部分にDatePickerが出現します。

filterにdatepickerを表示させたりということを扱っているサイトが少なかったので、
メモしておきます。

DatePickerについてはGithubにも他にいろいろあるようですが、
公式のjuiでもうまくできたので、
いまのところ他のDatePickerを使う必要ないかなって思ってます。

DatePickerのドキュメント

DatePicker, yii\jui\DatePicker - Yii Framework 2.0 API Documentation

この記事がだれかの助けになれば幸いです。

↓↓引き続き募集中です(^^)

弊社ではシステム開発、Web制作, Iot案件など幅広く対応しております。
ビジネスプランをお持ちの方、WEBアプリを使って何か新しいビジネスを始めたい方、
僕達が力になれるかもしれません
是非お問い合わせ下さい
-----------------------------------------------
同時に、デザイナ、エンジニア、コーダの方募集中です。
サーバ周りからデザイン、システムまでワンストップでの開発を経験できますので、
WEB開発の事を学びたい方にぴったりな職場だと思っております。
またそういった向上心あふれる方と一緒に成長してきたいと思っておりますので、
興味を持たれた方はとりあえずご連絡下さい(^^)
-----------------------------------------------
福岡のシステム開発・Web制作 C-limber（クライマー）株式会社

C-limber's high

2016年4月8日金曜日