背景

隨著 dcat-admin 越來越多的人使用，相信有許多跟我一樣熱愛這個項目的的人最后也會參與到這個項目中來，從使用者到項目的維護(hù)者，可以為項目貢獻(xiàn)一份自己的力量。我以后也會將維護(hù)這個項目的一些心得，底層代碼的實現(xiàn)都以博文的形式分享給大家。

需求

有個同學(xué)提了一個這樣的需求 ; 需要在表單 / 詳情支持多欄布局，而這個需求剛好我自己用 dcat-admin 做項目時候也遇到過。尤其是 form 表單字段比較多的時候，我開始的解決方案是通過 form 的 tab 來減少表單一頁的字段數(shù)量。

表單的多欄目布局
思路：我想的是 form 表單的字段外面包一次 row ，然后控制 row 里面每個字段的長寬。當(dāng)我看了 dcat-admin 的代碼后，發(fā)現(xiàn)是已經(jīng)實現(xiàn)好了的，所以不需要自己在開發(fā)，我這里主要講講表單的多欄目布局的用法和底層代碼怎么實現(xiàn)的。
效果：

使用代碼:

在控制器創(chuàng)建一個 from 方法

protected function form(){return Form::make(new WxyMaterialItem(), function (Form $form) {$form->row(function (Form\Row $row) {$row->width(4)->text('name')->required();$row->width(4)->text('id');$row->width(4)->text('simple_code');});$form->row(function (Form\Row $row) {$row->width(6)->text('integral_money');$row->width(6)->text('stock_min');});$form->row(function (Form\Row $row) {$row->width(12)->text('attribute');});$form->row(function (Form\Row $row) {$row->width(3)->text('price1');$row->width(3)->text('price2');$row->width(3)->text('price3');$row->width(3)->text('status');});});}

代碼分析：

整個 form 表單渲染出來的流程如下
Dcat\Admin\Form 對象 -> 方法 rows 實例化一個 Dcat\Admin\Form\Row 對象并保存對象屬性 -> 最后通過 render 方法渲染界面

這里面核心作用文件是 Dcat\Admin\Form\Row，我們可以看看里面的幾個方法

width 方法

public function width($width = 12){$this->defaultFieldWidth = $width;return $this;}

這個方法主要設(shè)置當(dāng)前行的每一個顯示字段的寬度，比如你一行顯示三個字段
建議每個字段的寬度設(shè)置為 3，例如 $row->width (3)->text (‘name’);

__call 方法

public function __call($method, $arguments){$field = $this->form->__call($method, $arguments);$field->disableHorizontal();$this->fields[] = ['width' ? => $this->defaultFieldWidth,'element' => $field,];return $field;}

這個方法主要是保存當(dāng)前行要顯示的字段的信息，通過 __call 方法去調(diào)用 Dcat\Admin\Form 的字段方法獲取字段信息，如使用代碼的 $row->width (4)->text (‘name’)，會保存一個寬度 col-md-4 的 Dcat\Admin\Form\Field\Text 字段。

render 方法

? public function render(){return view('admin::form.row', ['fields' => $this->fields]);}

admin::form.row 視圖

<div class="row">@foreach($fields as $field)<div class="col-md-{{ $field['width'] }}">{!! $field['element']->render() !!}</div>@endforeach
</div>

$field [‘element’]->render () 就是將字段渲染成 html
我們可以 dd 下 $this->fields , 看看其數(shù)據(jù)結(jié)構(gòu)

詳情的多欄目布局
思路：詳情的多欄目布局是需要重新開發(fā)的，思路邏輯是和表單的多欄目布局類似的
主要是創(chuàng)建一個 Dcat\Admin\Show\Row 文件，里面的代碼如下

<?php
namespace Dcat\Admin\Show;
use Dcat\Admin\Show;
use Illuminate\Contracts\Support\Renderable;
use Illuminate\Support\Collection;
class Row implements Renderable
{/*** Callback for add field to current row.s.** @var \Closure*/protected $callback;/*** Parent show.** @var Show*/protected $show;/*** @var Collection*/protected $fields;/*** Default field width for appended field.** @var int*/protected $defaultFieldWidth = 12;/*** Row constructor.** @param \Closure $callback* @param Show $show*/public function __construct(\Closure $callback, Show $show){$this->callback = $callback;$this->show = $show;$this->fields = new Collection();call_user_func($this->callback, $this);}/*** Render the row.** @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View*/public function render(){return view('admin::show.row', ['fields' => $this->fields]);}/*** @return Collection|\Dcat\Admin\Show\Field[]*/public function fields(){return $this->fields;}/*** Set width for a incomming field.** @param int $width** @return $this*/public function width($width = 12){$this->defaultFieldWidth = $width;return $this;}/*** Add field.** @param string $name* @param string $label** @return \Dcat\Admin\Show\Field*/public function field($name, $label = ''){$field = $this->show->field($name, $label);$this->pushField($field);return $field;}/*** Add field.** @param $name** @return \Dcat\Admin\Show\Field|Collection*/public function __get($name){$field = $this->show->field($name);$this->pushField($field);return $field;}/*** @param $method* @param $arguments** @return \Dcat\Admin\Show\Field*/public function __call($method, $arguments){$field = $this->show->__call($method, $arguments);$this->pushField($field);return $field;}/*** @param \Dcat\Admin\Show\Field $field** @return void*/protected function pushField($field){$this->fields->push(['width' ? => $this->defaultFieldWidth,'element' => $field,]);}
}

里面 __ cal l， __get , field 三個方法都是獲取當(dāng)前行的字段信息，并保存到行的屬性，在最后渲染詳情的時候先循環(huán) rows（這一步在 Dcat\Admin\Show\Panel 的 render 方法）, 在通過上面代碼中的 render 方法渲染 rows 的每個字段；如下：

html 如下

<div class="box-body"><div class="form-horizontal mt-1">@if($rows->isEmpty())@foreach($fields as $field){!! $field->render() !!}@endforeach@else<div>@foreach($rows as $row){!! $row->render() !!}@endforeach</div>@endif<div class="clearfix"></div></div>
</div>

使用代碼：

控制器創(chuàng)建一個 detail 方法
?

protected function detail($id){return Show::make($id, new WxyMaterialItem("brands"), function (Show $show) {$show->row(function (Show\Row $row) {$row->width(6)->name;$row->width(6)->simple_code;});$show->row(function (Show\Row $row) {$row->width(4)->specs;$row->width(4)->integral_money;$row->width(4)->field("aa", "你好");});$show->row(function (Show\Row $row) {$row->width(4)->mdept_id("部門");$row->width(4)->status;$row->width(4)->field("brands.name", "品牌");});});}

?

總結(jié)

以上是生活随笔為你收集整理的Laravel Dcat-admin 详情页多栏布局开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。