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

前回

Laravel-admin TODO機能の作成②

今回すること

• 公式ドキュメント見ながら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機能の作成④