README

Livewire Datatable 是一个允许您创建带有排序、搜索和分页功能的表格的扩展包，而无需编写大量代码。它基于 Livewire 构建，并使用 Tabler 进行 UI 设计。

注意： 此扩展包不包含任何 CSS 或 JS 文件。您需要自行安装 Tabler，或将视图发布并修改它们以使用自己的 CSS 和 JS 文件。

安装

您可以通过 composer 安装此扩展包

composer require redot/livewire-datatable

现在，您可以使用以下命令生成新的数据表

php artisan make:datatable UsersTable

配置

如果您愿意，可以发布视图并修改它们以使用自己的 CSS 和 JS 文件

php artisan vendor:publish --tag=livewire-datatable-views

您还可以发布语言文件

php artisan vendor:publish --tag=livewire-datatable-lang

使用方法

假设您有一个 User 模型，您想显示用户列表。首先，您需要创建一个扩展 Redot\LivewireDatatable\Datatable 类的 Livewire 组件

<?php

namespace App\Http\Livewire;

use Redot\LivewireDatatable\Datatable;

class UsersTable extends Datatable
{
    // ...
}

接下来，您需要定义要在表中显示的列。您可以通过覆盖 columns 方法来实现这一点

use Redot\LivewireDatatable\Column;

class UsersTable extends Datatable
{
    public function columns(): array
    {
        return [
            Column::make('Name', 'name')
                ->sortable()
                ->searchable(),
            Column::make('Email', 'email')
                ->sortable()
                ->searchable(),
            Column::make('Username')
                ->resolve(fn ($row) => Str::slug($row->name)),
            Column::make('Created At', 'created_at')
                ->sortable()
                ->searchable()
                ->format(fn ($value) => $value->format('d/m/Y H:i:s'))
        ];
    }
}

该 Column 类有一个接受两个参数的 make 方法：列名和列键。列键是数据库中列的名称。

每个列都有一个 sortable、searchable 和 format 方法。该 sortable 方法在列标题中添加一个排序按钮。该 searchable 方法将列添加到搜索查询中。该 format 方法接受一个闭包，该闭包接收列的值并返回格式化的值。

您也可以定义没有列键的列。在这种情况下，您需要定义一个接受闭包的 resolve 方法。该闭包接收当前行作为参数并返回列的值。

接下来，您需要定义用于获取数据的查询。您可以通过覆盖 query 方法来实现这一点

use App\Models\User;

class UsersTable extends Datatable
{
    // ...

    public function query(): Builder
    {
        return User::query();
    }
}

(可选) 您还可以通过覆盖 actions 方法定义表中显示的操作

use Redot\LivewireDatatable\Action;

class UsersTable extends Datatable
{
    // ...

    public function actions(): array
    {
        return [
            Action::view('users.show'),
            Action::edit('users.edit'),
            Action::delete('users.destroy'),
        ];
    }
}

该 Action 类有一个接受路由名称作为参数的 view、edit 和 delete 方法。路由名称应包含模型键作为路由参数。

最后，您需要在视图中渲染表格

<div>
    <livewire:users-table />
</div>

依赖

此扩展包依赖于以下扩展包

• Livewire - Laravel Livewire 是一个全栈框架，用于 Laravel，它使构建动态界面变得简单，无需离开 Laravel 的舒适环境。
• Tabler - Tabler 是一个基于 Bootstrap 5 的免费和开源 HTML Dashboard UI Kit。

结论

就是这样！您现在有一个具有排序、搜索和分页功能的表格。您可以查看代码以了解其工作原理，直到我们有适当的文档。如果您有任何问题或建议，请随时在 GitHub 上提出问题。