2018年10月3日

Laravel-Admin HeaderTools 分析与添加自定义按钮

今天在做ERP的时候需要这个按钮效果,看了一下laravel-admin的实现过程,然后通过append方法添加自定义操作按钮

首先确认几个文件,跟着下面的内容走,看一看基本就理解了

Laravel-Admin的table模板目录:
vendor/encore/laravel-admin/resources/views/grid/table.blade.php

<div class="pull-right">
           # 调用右上角工具
            {!! $grid->renderFilter() !!}
            {!! $grid->renderExportButton() !!}
            {!! $grid->renderCreateButton() !!}
        </div>

        <span>
            # 调用左上角工具
            {!! $grid->renderHeaderTools() !!}
        </span>

这里开始渲染工具
vendor/encore/laravel-admin/src/Grid.php

public function renderHeaderTools() 
{
       # 调用了render() 
       return $this->tools->render(); 
}

开始遍历工具
vendor/encore/laravel-admin/src/Grid/Tools.php

public function render()
    {
        return $this->tools->map(function ($tool) {
            if ($tool instanceof AbstractTool) {
                return $tool->setGrid($this->grid)->render();
            }

            return (string) $tool;
        })->implode(' ');
    }

左上角默认开启的工具
vendor/encore/laravel-admin/src/Grid/Tools.php

# 左上角默认工具
protected function appendDefaultTools()
    {
        # 批量操作
        $this->append(new BatchActions());

        # 刷新
        $this->append(new RefreshButton());

        # 如果嫌麻烦,也可以在这里直接调用你自定义的按钮,记得先引入文件
    }

vendor/encore/laravel-admin/src/Grid/Tools/RefreshButton.php

# 渲染刷新按钮
public function render()
    {
        # 调用刷新脚本,其实也就是一个js检测点击事件的脚本而已。。。
        Admin::script($this->script());
        # 按钮的名字,通过admin的config调用refresh的value
        $refresh = trans('admin.refresh');
        # 输出html,如果你有单独的blade,则是return view();
        return <<<EOT
<a class="btn btn-sm btn-primary grid-refresh"><i class="fa fa-refresh"></i> $refresh</a>
EOT;
    }

通过以上几个文件,即可实现顶部区域的内容,其他的详细函数和过程就不说先,先演示一遍添加方法。

1、在app/Admin/Extensions/Tools/下创建一个文件,就是我们要自定义的方法,这里以CreateType为例,放个图片吧,放代码会出bug……

app/Admin/Extensions/Tools/CreateType.php

2、在resources/views/tools下创建一个blade模板

resources/views/tools/createtype.blade.php

<div class="btn-group" data-toggle="buttons">
    @foreach($options as $option => $label)
    <label class="btn btn-default btn-sm {{ 自定义方法定义class名字 }}">
        <input type="radio" class="user-gender" value="{{ $option }}">{{$label}}
    </label>
    @endforeach
</div>

3、在控制器里调用自定义的按钮方法

# 先引入文件
use App\Admin\Extensions\Tools\CreateType;

    # 在需要设置的函数里调用方法
    protected function grid()
    {

        return Admin::grid(StockList::class, function (Grid $grid) {

          # 调用自定义的CreateType方法
          $grid->tools(function ($tools) {
              $tools->append(new CreateType());
          });

最后、、、、刷新你的页面看结果吧 😀

发表评论

电子邮件地址不会被公开。 必填项已用*标注