README

安装

在任意 laravel 应用中执行以下命令安装包：

composer require josegus/laravel-dash

安装完成后，执行以下命令导出 js 和 css 文件：

php artisan vendor:publish --tag:laravel-dash:assets

配置

配置文件自文档，执行以下命令导出：

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

自定义视图

导出所有视图文件

php artisan vendor:publish --tag=laravel-dash:views

仅导出布局视图

php artisan vendor:publish --tag=laravel-dash:layout-views

仅导出认证视图

php artisan vendor:publish --tag=laravel-dash:auth-views

从源代码构建

您可以执行以下命令导出资源（js 和 sass 文件）来自定义构建：

bash php artisan vendor:publish --tag=laravel-dash:resources

资源将位于 resources/dash 目录。

DataTables

在 Laravel 应用中使用 DataTables 的最佳方式是使用来自 Arjay Angeles (yajra) 的 laravel-datatables 包，该包提供了许多功能，以多种方式包含和使用 DataTables。

我更喜欢使用带有 ajax 服务器端的 datatables() 辅助函数。Dash 包含一个抽象类来帮助您构建 Ajax 响应。以下是一个针对 User 模型的示例：

1. 创建数据源路由

由于我们将返回 json 响应，所以 api.php 是放置您的 DataTables 路由的好地方。您可以创建路径和路由名称，例如：

<?php

Route::get('api/users', 'UsersController@index')->name('api.users.index');

2. 创建构建查询的类

创建一个继承自 Dash\DataTables\Datatable 抽象类的类。您的类必须实现 query() 函数。

<?php
    
namespace App\DataTables;

use App\Users;
use Dash\DataTables\Datatable;

class UsersTable extends Datatable
{
    public function query()
    {
        return Users::query();
    }
}

3. 创建控制器方法

在控制器中使用之前创建的 DataTables 类

<?php

namespace App\Http\Controllers\Api;

use App\DataTables\UsersTable;

class UsersController
{
    public function index()
    {
        return UsersTable::generate(); 
    }
}

Datatable 类中的 generate 函数将负责构建查询并返回 json 响应，所有操作都在服务器端处理。

您可能会想：为什么要创建一个类来只返回简单的 Users::query()？

这是一个最简单的示例，但您可以想象，查询数据源可以变得更加复杂，例如：

public function query()
{
    return Users::query()
                ->where('status', 'active')
                ->whereHas('courses', function ($courses) {
                    $courses->where('status', 'open');
                })
                ->select(['id', 'name', 'email'])
                ->with(['posts']);
}

为了将控制器和数据表数据源分开，我更喜欢将所有数据表类放在 App\DataTables 文件夹中。

4. 创建视图

在任意的 blade 文件中创建一个 html 表格

<table class="js-datatable table table-bordered table-hover table-sm table-striped" style="width: 100%;">
    <thead>
        <tr>
            <td>ID</td>
            <td>Name</td>
            <td>Email</td>
            <td>Options</td>
        </tr>
    </thead>
</table>

将数据表脚本推送到 scripts 生成部分

@push(config('dash.sections.scripts'))
    <script>
        $(document).ready(function () {
            const config = dataTable({
                ajax: {
                    url: url('api/users'),
                },
                columns: [
                    { data: 'id' },
                    { data: 'name' },
                    { data: 'email' },
                    { name: 'options' },
                ],
                columnDefs: [
                    {
                        targets: 3,
                        sortable: false,
                        searchable: false,        
                        render: function (data, type, row) {
                            return `
                                <a href="/users/${ row.id }/edit" class="btn btn-primary btn-sm">
                                    <i class="fa fa-edit"></i> Edit
                                </a>                                
                            `;
                        }
                    }
                ],
            });

            $('.js-datatable').DataTable(config);
        });
    </script>
@endpush

JavaScript 辅助函数

请参阅位于 resources/js/support/helpers.js 的此存储库中的 dataTable 和 url 辅助函数。

待办事项

• 添加预览图片
• 链接到实时预览
• 更多组件：卡片、仪表盘模板等。