README

简介

此包用于在网格表中显示模型数据。

要求

laravel 5.5+ | 6+ | 7+ | 8+ | 9+ | 10+
Bootstrap 4 用于样式
JQuery
php >= 7.1
composer

安装

从远程 Packagist 仓库获取

运行 composer 命令

composer require lucianolima00/laravel-grid-view "~1.0.19"

如果您正在本地服务器目录测试此包

在应用程序 composer.json 文件中设置仓库，例如

"repositories": [
    {
        "type": "path",
        "url": "../laravel-grid-view",
        "options": {
            "symlink": true
        }
    }
],

这里，

../laravel-grid-view - 目录路径，与应用程序处于相同目录级别，并包含 Grid View 包。

然后运行命令

composer require lucianolima00/laravel-grid-view:dev-master --prefer-source

注册

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

Lucianolima00\GridView\GridViewServiceProvider::class,

发布文件（不是必需的）

要发布视图，运行命令

php artisan grid_view:publish --only=views

它将视图文件存储到 resources/views/vendor/grid_view 文件夹。
要发布翻译，运行命令

php artisan grid_view:publish --only=lang

它将翻译文件存储到 resources/lang/vendor/grid_view 文件夹。
要发布所有部分，运行不带 only 参数的命令

php artisan grid_view:publish

否则，您可以使用 --force 参数重写已发布的文件。

使用方法

确保您在应用程序中使用 Bootstrap 4 进行样式和 JQuery。

控制器部分

必须使用 EloquentDataProvider 在视图模板中插入数据。

对于 EloquentDataProvider 类构造函数，使用模型查询对象。

示例

namespace App\Http\Controllers;

use Lucianolima00\GridView\DataProviders\EloquentDataProvider;

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

视图模板部分

在 blade 视图模板中使用配置数组的 @gridView() 指令。

简单快速使用

您可以在 columnFields 数组中将列设置为以 字符串 格式显示。

注意

这些搜索筛选字段将自动显示。默认情况下使用文本表单字段筛选。

如果您不想使用搜索筛选，设置 useFilters = false。

@php
$gridData = [
    'dataProvider' => $dataProvider,
    'title' => 'Panel title',
    'useFilters' => false,
    'columnFields' => [
        'id',
        'active',
        'icon',
        'created_at'
    ]
];
@endphp

@gridView($gridData)

不带 blade 指令的替代方案

{!! grid_view([
    'dataProvider' => $dataProvider,
    'useFilters' => false,
    'columnFields' => [
        'id',
        'active',
        'icon',
        'created_at'
    ]
]) !!}

设置自定义选项

主要列

简单示例

@gridView([
    'dataProvider' => $dataProvider,
    'columnFields' => [
        [
            'label' => 'First Name', // Column label.
            'attribute' => 'first_name', // Attribute, by which the row column data will be taken from a model.
        ],
        [
            'label' => 'Last Name',
            'value' => function ($row) {
                return $row->last_name;
            }
            'sort' => 'last_name' // To sort rows. Have to set if an 'attribute' is not defined for column.
        ],
    ]
])

特殊列

除了主要列外，还可以有以下特殊列

ActionColumn - 用于显示用于查看、编辑和删除行的按钮。

在列选项中设置 'class' => Lucianolima00\GridView\Columns\ActionColumn::class

以下是需要 actionTypes

view - 创建查看链接。默认 URL 方案：url()->current() . '/' . $row->id . '/delete'。
edit - 创建编辑链接。默认 URL 方案：url()->current() . '/' . $row->id . '/edit'。
delete - 创建删除链接。默认 URL 方案：url()->current() . '/' . $row->id . '/delete'。

它们可以是简单的 字符串、数组或回调。

对于数组格式，必须设置 class。可选：url、htmlAttributes。

通过回调您可以更改到您的路由的 URL。

列配置的简单示例

@gridView([
    'dataProvider' => $dataProvider,
    'columnFields' => [
        [
            'label' => 'Actions', // Optional
            'class' => Lucianolima00\GridView\Columns\ActionColumn::class, // Required
            'actionTypes' => [ // Required
                'view',
                'edit' => function ($data) {
                    return '/admin/pages/' . $data->id . '/edit';
                },
                [
                    'class' => Lucianolima00\GridView\Actions\Delete::class, // Required
                    'url' => function ($data) { // Optional
                        return '/admin/pages/' . $data->id . '/delete';
                    },
                    'htmlAttributes' => [ // Optional
                        'target' => '_blank',
                        'style' => 'color: yellow; font-size: 16px;',
                        'onclick' => 'return window.confirm("Are you sure you want to delete?");'
                    ]
                ]
            ]
        ]
    ]
])

CheckboxColumn - 用于显示复选框以多选行。

在列选项中设置 'class' => Lucianolima00\GridView\Columns\CheckboxColumn::class

以下是需要以下选项
- 字段 - 用于复选框输入元素的 name 属性。它以数组形式呈现：name="{{ $field }}[]"。
- 属性 - 用于复选框输入元素的 value 属性。它呈现为：value="$row->{$this->attribute}"。
列配置的简单示例
```
@gridView([
    'dataProvider' => $dataProvider,
    'columnFields' => [
        [
            'class' => Lucianolima00\GridView\Columns\CheckboxColumn::class,
            'field' => 'delete',
            'attribute' => 'id'
        ]
    ]
])
```

过滤器

以下是过滤器的一些变体

列选项以关闭过滤器
```
'filter' => false
```
TextFilter - 是默认过滤器，它使用列属性渲染一个文本表单字段进行搜索。

DropdownFilter - 是一个过滤器，它渲染 <select> HTML 标签。

设置为列选项

@gridView([
    'dataProvider' => $dataProvider,
    'columnFields' => [
        [
            'attribute' => 'example_attribute',
            'filter' => [
                'class' => Lucianolima00\GridView\Filters\DropdownFilter::class,
                'data' => ['key' => 'value', 'key' => 'value'] // Array keys are for html <option> tag values, array values are for titles.
            ]
        ]
    ]
])

如果列未定义 attribute 或您想设置特殊的过滤器字段名称

@gridView([
    'dataProvider' => $dataProvider,
    'columnFields' => [
        [
            'filter' => [
                'class' => Lucianolima00\GridView\Filters\DropdownFilter::class,
                'name' => 'example_name',
                'data' => ['key' => 'value', 'key' => 'value'] // Array keys are for html <option> tag values, array values are for titles.
            ]
        ]
    ]
])

格式化器

以下是一些格式化器键

html - 用于传递带有 HTML 标签的行内容。
image - 用于将行数据插入到 <img> 标签的 src 属性中。
text - 对行数据应用 strip_tags()。
url - 用于将行数据插入到 <a> 标签的 href 属性中。

对于这些键，有以下格式化器

HtmlFormatter
ImageFormatter
TextFormatter
UrlFormatter

您还可以使用一些附加选项设置格式化器。请参见以下简单示例

@gridView([
    'dataProvider' => $dataProvider,
    'columnFields' => [
        [
            'attribute' => 'url',
            'format' => [
                'class' => Lucianolima00\GridView\Formatters\UrlFormatter::class,
                'title' => 'Source',
                'htmlAttributes' => [
                    'target' => '_blank'
                ]
            ]
        ],
        [
            'attribute' => 'content',
            'format' => 'html'
        ]
    ]
])

现有表单区域和主要按钮

有两个主要表单区域

grid_view_filters_form

两个按钮影响搜索请求提交
- 搜索。您可以通过选项 searchButtonLabel 更改按钮标签。
- 重置。您可以通过选项 resetButtonLabel 更改按钮标签。
如果 useFilters = false，则这些按钮将不会显示。
grid_view_rows_form

您可以通过选项 rowsFormAction 设置特定的 action 属性值。

一个按钮影响主要提交请求
- 发送。您可以通过选项 sendButtonLabel 更改按钮标签。
  
  注意！此按钮将在以下任一条件下显示
  - 存在复选框列。
  - 选项 useSendButtonAnyway = true。

复杂扩展示例

@php
$gridData = [
    'dataProvider' => $dataProvider,
    'paginatorOptions' => [ // Here you can set some options of paginator Illuminate\Pagination\LengthAwarePaginator, used in a package.
        'pageName' => 'p'
    ],
    'rowsPerPage' => 5, // The number of rows in one page. By default 10.
    'title' => 'Panel title', // It can be empty ''
    'strictFilters' => true, // If true, then a searching by filters will be strict, using an equal '=' SQL operator instead of 'like'.
    'rowsFormAction' => '/admin/pages/deletion', // Route url to send slected checkbox items for deleting rows, for example.
    'useSendButtonAnyway' => true, // If true, even if there are no checkbox column, the main send button will be displayed.
    'searchButtonLabel' => 'Find',
    'columnFields' => [
        [
            'attribute' => 'id', // REQUIRED if value is not defined. Attribute name to get row column data.
            'label' => 'ID', // Column label.
            'filter' => false, // If false, then column will be without a search filter form field.,
            'htmlAttributes' => [
                'width' => '5%' // Width of table column.
            ]
        ],
        [
            'label' => 'Active', // Column label.
            'value' => function ($row) { // You can set 'value' as a callback function to get a row data value dynamically.
                return '<span class="icon fas '.($row->active == 1 ? 'fa-check' : 'fa-times').'"></span>';
            },
            'filter' => [ // For dropdown it is necessary to set 'data' array. Array keys are for html <option> tag values, array values are for titles.
                'class' => Lucianolima00\GridView\Filters\DropdownFilter::class, // REQUIRED. For this case it is necessary to set 'class'.
                'name' => 'active', // REQUIRED if 'attribute' is not defined for column.
                'data' => [ // REQUIRED.
                    0 => 'No active',
                    1 => 'Active',
                ]
            ],
            'format' => 'html', // To render column content without lossless of html tags, set 'html' formatter.
            'sort' => 'active' // To sort rows. Have to set if an attribute is not defined for column.
        ],
        [
            'label' => 'Icon', // Column label.
            'value' => function ($row) { // You can set 'value' as a callback function to get a row data value dynamically.
                return $row->icon;
            },
            'filter' => false, // If false, then column will be without a search filter form field.
            'format' => [ // Set special formatter. If $row->icon value is a url to image, it will be inserted in to 'src' attribute of <img> tag.
                'class' => Lucianolima00\GridView\Formatters\ImageFormatter::class, // REQUIRED. For this case it is necessary to set 'class'.
                'htmlAttributes' => [ // Html attributes for <img> tag.
                    'width' => '100'
                ]
            ]
        ],
        'created_at', // Simple column setting by string.
        [ // Set Action Buttons.
            'class' => Lucianolima00\GridView\Columns\ActionColumn::class, // REQUIRED.
            'actionTypes' => [ // REQUIRED.
                'view',
                'edit' => function ($data) {
                    return '/admin/pages/' . $data->id . '/edit';
                },
                [
                    'class' => Lucianolima00\GridView\Actions\Delete::class, // REQUIRED
                    'url' => function ($data) {
                        return '/admin/pages/' . $data->id . '/delete';
                    },
                    'htmlAttributes' => [
                        'target' => '_blank',
                        'style' => 'color: yellow; font-size: 16px;',
                        'onclick' => 'return window.confirm("Sure to delete?");'
                    ]
                ]
            ]
        ],
        [
            // For this case checkboxes will be rendered according with: <input type="checkbox" name="delete[]" value="{{ $row->id }}" />
            'class' => Lucianolima00\GridView\Columns\CheckboxColumn::class, // REQUIRED.
            'field' => 'delete', // REQUIRED.
            'attribute' => 'id' // REQUIRED.
            'display' => function ($row) {
                return {...condition to return true for displaying...};
            }
        ]
    ]
];
@endphp

@gridView($gridData)

许可证

根据 MIT 许可证许可。有关详细信息，请参阅 LICENSE.txt。

lucianolima00 / laravel-grid-view

维护者

详细信息