churakovmike/laravel-grid

为 Laravel 提供简单的 gridview

1.1 2020-03-21 17:09 UTC

This package is auto-updated.

Last update: 2024-09-11 02:49:58 UTC


README

Latest Stable Version Build Status License Maintainability Test Coverage Scrutinizer Code Quality

要求

  • laravel 5.5+
  • Bootstrap 3/4 用于样式

入门

安装

该软件包可在 Packagist 上找到。

composer require churakovmike/laravel-grid

在 config/app.php 中注册服务提供者

ChurakovMike\EasyGrid\GridViewServiceProvider::class,       

网格示例

<?php

namespace App\Http\Controllers;

use ChurakovMike\EasyGrid\DataProviders\EloquentDataProvider;

class ExampleController extends Controller
{
    public function example()
    {
        $dataProvider = new EloquentDataProvider(ExampleModel::query());
        return view('example-view', [
            'dataProvider' => $dataProvider,
        ]);
    }
}

渲染网格简单示例

{!! easy_grid([
    'dataProvider' => $dataProvider,
    'columns' => [
        'id',
        'name',
        'email',
        'status',
        'created_at',
    ],
]) !!}

渲染网格自定义字段和回调

{!! easy_grid([
    'dataProvider' => $dataProvider,
    'columns' => [
        'id',
        [
            'label' => 'Users name',
            'attribute' => 'name',
        ],
        [
            'label' => 'Custom label',
            'attribute' => 'id'
        ],
        [
            'label' => 'Example callbacks',
            'value' => function($data) {
                return $data->relatedModel->attribute;
            }
        ],
        'email',
        'status',
        'created_at',
    ],
]) !!}

如果您需要没有模型属性的列,您可以使用回调

{!! easy_grid([
    'dataProvider' => $dataProvider,
    'columns' => [
        [
            'label' => 'There are no model attribute',
            'value' => function($data) {
                return 'example string';
            }
        ],
        'email',
        'status',
        'created_at',
    ],
]) !!}

网格支持列格式化器,默认为文本过滤器,它会截取所有 HTML 代码(strip_tags()),您可以将此格式化器更改为 HTML 格式化器

{!! easy_grid([
    'dataProvider' => $dataProvider,
    'columns' => [
        [
            'label' => 'Avatar',
            'attribute' => 'avatar',
            'format' => 'html,
        ],
    ],
]) !!}

网格中有默认的动作按钮,

{!! easy_grid([
    'dataProvider' => $dataProvider,
    'columns' => [
        'id',
        'name',
        'email',
        'status',
        'created_at',
        [
            'class' => \ChurakovMike\EasyGrid\Columns\ActionColumn::class,
            'buttons' => [
                'show',
                'update',
                'destroy',
            ],
        ],
    ],
]) !!}

按钮 URL

如果您需要其他 URL,只需这样做

{!! easy_grid([
    'dataProvider' => $dataProvider,
    'columns' => [
        'id',
        'name',
        'email',
        'status',
        'created_at',
        [
            'class' => \ChurakovMike\EasyGrid\Columns\ActionColumn::class,
            'buttons' => [
                'show' => function($data) {
                    return route('your-route-name', [
                        'id' => $data->id,
                    ])
                },
                'update' => function($data) {
                    return '/edit/' . $data->id,
                },
                'destroy',
            ],
        ],
    ],
]) !!}

要更改单元格的宽度,您可以传递宽度值

{!! easy_grid([
    'dataProvider' => $dataProvider,
    'columns' => [
        'id',
        [
            'label' => 'Users name',
            'attribute' => 'name',
            'width' => '15%',
        ],
        [
            'label' => 'Custom label',
            'attribute' => 'id',
            'width' => '100px',
        ],
        'email',
        'status',
        'created_at',
    ],
]) !!}