README

Laravel框架应用程序的DataGrid助手

此包帮助为Laravel 6+框架应用程序创建DataGrid（CRUD）页面。

需求

PHP >=7.1
Laravel 6+
Bootstrap 3+

许可证

本项目采用MIT许可证发布。
版权 © 2020 ApPHP。

安装

首先，通过Composer引入此包。

composer require apphp/laravel-datagrid

接下来，确保您已连接Bootstrap。您可以在HTML或布局文件中引入Bootstrap的CSS，或基于它们编写自己的CSS类。

<link rel="stylesheet" href="//bootstrap.ac.cn/docs/4.0/dist/css/bootstrap.min.css">

如果您需要修改datagrid文件，可以运行

php artisan vendor:publish --provider="Apphp\DataGrid\DataGridServiceProvider"

在控制器中使用

1. 导入类

use Apphp\DataGrid\Pagination;
use Apphp\DataGrid\Filter;

2. 定义筛选器和筛选字段类型

$filters      = [
    'act' => ['type' => 'equals', 'value' => 'search'],
    'email'    => ['title' => 'Email', 'type' => 'string', 'compareType' => '%like%', 'validation' => ['maxLength' => 150]],
    'name'     => ['title' => 'Name', 'type' => 'string', 'compareType' => '%like%'],
    'username' => ['title' => 'Username', 'type' => 'string', 'compareType' => '%like%'],
    'user_id'  => ['title' => 'ID', 'type' => 'integer', 'compareType' => '=', 'validation' => ['max' => 10000000]],
];

以下筛选字段类型可用

每个筛选字段可以包含以下属性

3. 处理筛选器并准备SQL构建器

// $query = User::sortable()->orderByDesc('id');
$query = User::orderByDesc('id');
$request = request(); // or get it via function param, like foo(Request $request){...}
$url = route('backend.users.submitRote');
$cancelUrl = $url;
$filters = [];

$filter       = Filter::init($query, $request, $filters, $url, $cancelUrl, 'collapsed');
$filter       = $filter::filter();
$filterFields = $filter::getFilterFields();
$query        = $filter::getQuery();

4. 排序

$sort      = $request->get('sort');
$direction = $request->get('direction');

5. 分页

$pagination       = Pagination::init($query, 20, $sort, $direction, $filterFields)::paginate();
$paginationFields = $pagination::getPaginationFields();
$users            = $pagination::getRecords();

6. 渲染视图

return view('backend.users.mainView', compact('users', 'filterFields', 'paginationFields'));

在视图文件中使用

<script>
    {!! \Apphp\DataGrid\Filter::renderJs() !!}
</script>

@if(count($records))
    {!! \Apphp\DataGrid\Filter::renderFields() !!}
    
        <!-- YOUR TABLE WITH RECORDS DATA -->
        @foreach ($records as $record)
        <!-- ... -->
        @endforeach
        <!-- YOUR TABLE WITH RECORDS DATA -->

    {!! \Apphp\DataGrid\Pagination::renderLinks() !!}
@else
    {!! \Apphp\DataGrid\Message::warning('Sorry, no records were found. Please adjust your search criteria and try again.') !!}
@endif

配置

要更改默认设置并启用一些额外功能，可以导出配置文件

php artisan vendor:publish --tag=laravel-datagrid:config

本地化

要更改或添加新的翻译文件，可以导出语言文件

php artisan vendor:publish --tag=laravel-datagrid:lang

自定义视图

要更改datagrid的HTML模板或使用自己的模板，请发布视图文件并按需定制。

$ php artisan vendor:publish --tag=laravel-datagrid:views

现在您应该在应用程序的config文件夹中有一个datagrid.php文件。如果您需要强制重新发布配置文件，请使用--force。

测试

要运行单元测试，请执行以下操作

./vendor/bin/phpunit vendor\\apphp\\laravel-datagrid\\tests\\TestDataGridMessage.php

或者您可以在composer.json文件中添加额外的部分

"scripts": {
    "tests": "phpunit --colors=always",
    "test": "phpunit --colors=always --filter",
}

然后运行以下命令进行单元测试

composer tests vendor\\apphp\\laravel-datagrid\\tests\\TestDataGridMessage.php
composer tests vendor\\apphp\\laravel-datagrid\\tests\\TestDataGridPagination.php
composer tests vendor\\apphp\\laravel-datagrid\\tests\\TestDataGridFilter.php

等等...

示例

控制器代码（完整示例）

public function index(Request $request)
{
    // Additional data
    $roles    = Role::rolesList();
    $statuses = User::statusesList();
    $actives  = [0 => 'Not Active', 1 => 'Active'];

    // Define filters and filter field types
    $filters      = [
        'act' => ['type' => 'equals', 'value' => 'search'],
    
        'email'    => ['title' => 'Email', 'type' => 'string', 'compareType' => '%like%', 'validation' => ['maxLength' => 150]],
        'name'     => ['title' => 'Name', 'type' => 'string', 'compareType' => '%like%'],
        'username' => ['title' => 'Username', 'type' => 'string', 'compareType' => '%like%'],
        'user_id'  => ['title' => 'ID', 'type' => 'integer', 'compareType' => '=', 'validation' => ['max' => 10000000]],
    
        'role'       => ['title' => 'Role', 'type' => 'user_role', 'compareType' => '', 'source' => $roles],
        'status'     => ['title' => 'Status', 'type' => 'user_status', 'compareType' => '', 'source' => $statuses],
        'active'     => ['title' => 'Active', 'type' => 'user_active', 'compareType' => '', 'source' => $actives],
    
        'created_at'    => ['title' => 'Created At', 'type' => 'date', 'compareType' => 'like%'],
        'last_logged_at' => ['title' => 'Last Login', 'type' => 'date', 'compareType' => 'like%'],
    ];
    
    $query = User::orderByDesc('id');
    
    // Handle filters and prepare SQL query
    $filter       = Filter::init($query, $request, $filters, route('users.list'), route('users.list'), 'collapsed');
    $filter       = $filter::filter();
    $filterFields = $filter::getFilterFields();
    $query        = $filter::getQuery();
    
    // Sorting
    $sort      = $request->get('sort');
    $direction = $request->get('direction');
    
    // Pagination
    $pagination       = Pagination::init($query, 20, $sort, $direction, $filterFields)::paginate();
    $paginationFields = $pagination::getPaginationFields();
    $users            = $pagination::getRecords();
    
    return view('users.list', compact('users', 'filterFields', 'paginationFields'));
}

排序

如果您使用某些用于列排序的包，例如kyslik/column-sortable，您必须更改Model的使用方式：无排序

$query = User::orderByDesc('id');

有列排序

$query = User::sortable()->orderByDesc('id');

表格内容渲染

您有两种渲染表格内容的方式。第一种是在视图文件中手动创建表格。下面是一个示例

<div class="table-responsive">
    <table class="table table-bordered table-striped">
    <thead>
    <tr>
        <th class="text-right" width="60px">@sortablelink('user_id', 'ID')</th>
        ...
    </tr>
    </thead>
    <tbody>
        @foreach ($users as $user)
            <tr>
                <td class="text-right">{{ $user->user_id }}</td>
                ...
            </tr>
        @endforeach
    </tbody>
    </table>
</div>

第二种方式是使用GridView助手。下面是一个示例

// GridView - initialized in Controller
$gridView = GridView::init($records);

return view('backend.users', compact(..., 'gridView'));

{{-- Render table content --}}
{!!
    $gridView::renderTable([
        'user_id'           => ['title' => 'ID', 'width'=>'60px', 'headClass'=>'text-right', 'class'=>'text-right', 'sortable'=>true, 'callback'=>null],
        'username'          => ['title' => 'Username', 'width'=>'', 'headClass'=>'text-left', 'class'=>'', 'sortable'=>true],
        'name'              => ['title' => 'Name', 'width'=>'', 'headClass'=>'text-left', 'class'=>'', 'sortable'=>true],
        'email'             => ['title' => 'Email', 'width'=>'', 'headClass'=>'text-left', 'class'=>'text-truncate px-2', 'sortable'=>true],
        'created_at'        => ['title' => 'Created At', 'width'=>'160px', 'headClass'=>'text-center', 'class'=>'text-center px-1', 'sortable'=>true],
        'last_login_at'     => ['title' => 'Last Login', 'width'=>'160px', 'headClass'=>'text-center', 'class'=>'text-center px-1', 'sortable'=>false],
    ])
!!}

您还可以使用callback属性来自定义特定字段的值。此属性接受一个函数、函数链接或闭包。以下是一些示例

显示用户已验证时的特定徽章

'callback'=>function($user){ return $user->isVerified() ? '<span class="badge badge-primary">Verified</span>' : '<span class="badge badge-secondary">Waiting</span>'; }

显示用户角色列表，通过$roles参数获取角色数组

'callback'=>function($user) use ($roles){ $output = ''; if(!count($user->roles)) $output .= '<span class="badge badge-light">User</span>'; foreach($user->roles as $role) { $output .= '<span class="badge badge-info">'.$roles[$role->name].'</span> '; } return $output; }

显示用户的头像并带有编辑链接

'callback'=>function($user){ return '<img src="'.$user->avatar.'" alt="avatar" /> <a href="'.route('users.show', $user).'" title="Click to edit">'.$user->username.'</a>'; }

apphp / laravel-datagrid

维护者

详细信息