LoginSignup
13
11

More than 3 years have passed since last update.

Laravel-adminのformをgrid対応する

Last updated at Posted at 2018-06-29

(2019-10-21追記)
ver1.7.6より"Form Layout"が実装されました。
https://laravel-admin.org/docs/#/en/model-form-layout

(2019-08-14追記)
Laravel-admin v1.7.3 (2019-07-22)では、こちらの方法はうまくいきません。

概要

$form->rowがいまいち思ったとおりに機能しないので、自力で実装した

出来上がりはこんな感じ

スクリーンショット 2018-06-29 9.11.00.png

TabやHasManyの中につっこんでもきちんと動作します。
スクリーンショット 2018-06-29 9.45.06.png

実装方法

1.App/Admin/Extensionsに下記ファイルを配置

MultipleColumn.php

<?php

namespace App\Admin\Extensions;

use Encore\Admin\Form;
use Encore\Admin\Form\Field;

class MultipleColumn extends Field
{
    protected $label;

    /**
     * Callback for add field to current row.s.
     *
     * @var \Closure
     */
    protected $callback;

    /**
     * Parent form.
     *
     * @var Form
     */
    protected $form;

    /**
     * Fields in this row.
     *
     * @var array
     */
    protected $fields = [];

    /**
     * Default field width for appended field.
     *
     * @var int
     */
    protected $defaultFieldWidth = 12;

    protected $view = 'form.multiplecolumn';

    public function __construct($label, $arguments = [])
    {
        $this->label = $label;
        $this->callback = $arguments[0];
        $this->form = $arguments[1];
        call_user_func($this->callback, $this);
    }

    /**
     * Set width for a incomming field.
     *
     * @param int $width
     *
     * @return $this
     */
    public function width($width = 12)
    {
        $this->defaultFieldWidth = $width;

        return $this;
    }

    public function render()
    {
        return parent::render($this->view)->with([
            'fields' => $this->fields,
            'label' => $this->label,
        ]);
    }

    /**
     * Add field.
     *
     * @param string $method
     * @param array  $arguments
     *
     * @return Field|void
     */
    public function __call($method, $arguments)
    {
        $field = $this->form->__call($method, $arguments);

        $this->fields[] = [
            'width'   => $this->defaultFieldWidth,
            'element' => $field,
        ];

        return $field;
    }
}

2.bootstrap.phpに下記追加

use App\Admin\Extensions\MultipleColumn;

Encore\Admin\Form::extend('multipleColumn', MultipleColumn::class);

3.resources/views/formに下記ファイルを配置

multiplecolumn.blade.php
@php
    $rand = mt_rand();
@endphp
<div class="form-group  multiColumn{{ $rand }}">
        <label class="col-sm-2 control-label">{{$label}}</label>
        @foreach($fields as $field)
            <div class="col-sm-{{ $field['width'] }}">
                {!! $field['element']->render() !!}
            </div>
        @endforeach
</div>
<script>
    for (var i=0; i<{{ count($fields) }}; i++) {
        $('.multiColumn{{ $rand }} ').prev().remove();
        $('.multiColumn{{ $rand }} .form-group').css('margin-bottom','initial');
    }
</script>

All set!!

使い方

$form->multipleColumn('郵便番号',function ($column){
  $column->width(2)
         ->text('postal_code','')
         ->rules('digits:7', ['digits' => '7桁の数字を入力してください'])
         ->placeholder('郵便番号')
         ->setWidth(12,0);
  $column->width(5)
         ->select('prefucture','都道府県')
         ->placeholder('都道府県')
         ->options(config('pref'))
         ->setWidth(3,2);
},$form);

$form->multipleColumn('住所',function ($column){
  $column->width(4)
         ->text('address1','')
         ->placeholder('住所1')
       ->setWidth(12,0);
  $column->width(4)
         ->text('address2','')
         ->placeholder('住所2(マンション名・ビル名など)')
         ->setWidth(12,0);

},$form);

以上です。
form-groupが二重で生成されるのをjsで無理やり消してるところがミソ
(そもそも二重生成しないようになんとかしたい)

13
11
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
11