前回

今回すること

公式ドキュメント見ながらgridの機能を色々実装してみる

Grid

画面表示部

公式ドキュメントを見ながら色々追加してみました。
各列の実装内容の簡単な概要を書いています。
最初に画像とソースを載せています。

devproject\app\Admin\Controllers\TodoController.php

use Encore\Admin\Widgets\Table;

    /**
     * Make a grid builder.
     *
     * @return Grid
     */
    protected function grid()
    {
        $grid = new Grid(new Todo);

        $grid->id('ID')->modal('情報', function () {

            $data = [
                [
                    $this->id,
                    $this->user->name,
                    $this->title,
                    $this->detail,
                ]
            ];

            return new Table(['ID', 'ユーザー名', 'タイトル', '詳細'], $data);
        })->sortable();

        $grid->user()->name('ユーザー名')->style('min-width:100px;');
        $grid->title('タイトル')->setAttributes(['style' => 'background-color:#ffdbdb;'])->editable();
        $grid->detail('詳細')->limit(20)->expand(function () {
            return $this->detail;
        });
        $grid->created_at('Created at')->label('danger');
        $grid->updated_at('Updated at')->badge();

        return $grid;
    }

ID

        $grid->id('ID')->modal('情報', function () {

            $data = [
                [
                    $this->id,
                    $this->user->name,
                    $this->title,
                    $this->detail,
                ]
            ];

            return new Table(['ID', 'ユーザー名', 'タイトル', '詳細'], $data);
        })->sortable();

modal()
- IDの項目を押下と対象のデータをポップアップでの表示をします
- リレーション先のデータを表示する際に役立つと思います。
- 今回では自データを表示しているだけです。
sortable()
- 列名を押下するとソートされます。

ユーザー名

        $grid->user()->name('ユーザー名')->style('min-width:100px;');

user()
- modelのリレーションを使用しリレーション先からname(ユーザー名)を取得しています。
style()
- 列のスタイルを指定しています。
- 今回では最低幅を100pxに指定。

タイトル

        $grid->title('タイトル')->setAttributes(['style' => 'background-color:#ffdbdb;'])->editable();

setAttributes()
- 列にHTML属性を追加できます。
- 今回ではstyleを追加していますが、styleだけならばユーザー名で使用したstyle()で事足ります。
editable()
- 列のデータを編集画面を開かず直接編集できる機能です。
- bootstrap-editable.min.jsを使用しています。

詳細

        $grid->detail('詳細')->limit(20)->expand(function () {
            return $this->detail;
        });

limit
- 表示文字数を20文字に指定しています。
expand
- 詳細のデータを行間に展開します。
- modalを使用したくない場合に有効。
- データを見比べることを想定する場合などで使うと思います。
- function内で別のデータを取得することもできます。

Created at

        $grid->created_at('Created at')->label('danger');

label
- ラベル表示。
- success,danger,warning,info,primary,defaultのデザインが用意されています。

Updated at

        $grid->updated_at('Updated at')->badge();

badge
- バッジ表示。
- success,danger,warning,info,primary,defaultのデザインが用意されています。
- labelより丸みがあるデザイン。

etc

他にもセレクトボックス、ラジオボタン、チェックボックス、スイッチなどの機能があったが、Todosテーブルの定義上足りませんでした。

フィルタ部

gridに以下を追加することでフィルタ機能の詳細設定が出来る

devproject\app\Admin\Controllers\TodoController.php

        $grid->filter(function ($filter) {
            $filter->column(1/2, function ($filter) {
                $filter->disableIdFilter();
                $filter->startsWith('title','タイトル');      // 前方一致
                $filter->between('created_at', '登録日時')->datetime();
            });
            $filter->column(1/2, function ($filter) {
                $filter->contains('detail','詳細');          // Like検索
            });
        });

検索画面の分割

$filter->column(1/2, function ($filter) {}

で検索部を2分割することが出来る。
gridは12の数値を基本としてるのでそれぞれの合計が12となる整数を指定しても可能。

$filter->column(1, function ($filter) {...}
$filter->column(5, function ($filter) {...}
$filter->column(6, function ($filter) {...}

disableIdFilter

デフォルトではID検索項目があるが、不要なので消す。

startsWith

前方一致検索

contains

1.6.12から実装された新機能なので使ってみた。
Equal to like queryとのこと。
動作検証がまだだがlikeと同じ気がする。

between

開始入力欄と終了入力欄を追加してくれます。

感想

コーディングというより、ドキュメントとソースの確認を永遠とやってました。
これは慣れればすごい便利だなぁと思います。

MVCのview部分がなくlaravelのbladeいつ使うの？と戸惑いつつやってます。
ドキュメントの中でチラッとview部分に触れている場所もあったのでいずれ出てくるでしょう・・・

次回

次は一定のroleの場合は全ユーザーを表示する（scope解除）などの機能を入れていきたいと思います。

Laravel-admin TODO機能の作成④

Laravel-admin TODO機能の作成③(grid)

前回