adaptech/livewire-datatables

Livewire DataTables 后端组件。模块化,易于使用,功能丰富。

dev-master 2022-04-28 09:58 UTC

This package is auto-updated.

Last update: 2024-09-28 15:08:27 UTC


README

Livewire DataTables 后端组件。模块化,易于使用,功能丰富。

受Caleb的 Livewire Screencasts 启发,献给我的朋友 Bardh

安装

您可以通过composer安装此包

composer require adaptech/livewire-datatables

您可以使用以下命令发布配置文件

php artisan vendor:publish --provider="Amirami\LivewireDataTables\LivewireDataTablesServiceProvider" --tag="livewire-datatables-config"

这是已发布配置文件的内容

return [

    'multi_column_sorting' => false,

    'row_caching' => false,

];

这意味着这两个选项默认是禁用的。但您可以针对单个组件启用它们。

用法

创建您的Livewire组件后,使用 Amirami\LivewireDataTables\DataTable 扩展组件类。该 DataTable 抽象类将要求您实现 getQueryProperty 方法。这是Livewire中的一个计算属性,需要返回 Illuminate\Database\Eloquent\Builder\Illuminate\Database\Eloquent\Relations\Relation 实例。

这是您构建查询基础的部分,包括筛选器。

namespace App\Http\Livewire;

use App\Models\Post;
use Amirami\LivewireDataTables\DataTable;
use Illuminate\Database\Eloquent\Builder;

class PostsIndex extends DataTable
{
    public function getQueryProperty(): Builder
    {
        return Post::query();
    }

    public function render()
    {
        $posts = $this->entries;

        return view('livewire.posts-index', compact('posts'));
    }
}

这是一个没有任何表格功能的组件。尽管使用表格功能可以完全正常,但这似乎违背了此包的目的。现在让我们看看此包提供的许多功能。

分页

分页提供了与Livewire默认分页完全相同的特性。它实际上扩展了它。您之所以需要使用此包提供的分页,仅仅是因为Livewire的默认分页与其他功能不太兼容。

namespace App\Http\Livewire;

use Amirami\LivewireDataTables\DataTable;
use Amirami\LivewireDataTables\Traits\WithPagination;

class PostsIndex extends DataTable
{
    use WithPagination;
}

您还可以配置每页希望显示的记录数。如果未定义,分页器将从模型类中拉取默认数量。

namespace App\Http\Livewire;

use Amirami\LivewireDataTables\DataTable;
use Amirami\LivewireDataTables\Traits\WithPagination;

class PostsIndex extends DataTable
{
    use WithPagination;
    
    // As a property.
    public $perPage = 20;
    
    // Or as a method.
    public function getPerPage(): ?int
    {
        return 42;
    }
}

有关分页的其他信息,请参阅 Livewire的官方文档

搜索

如果您想使用行搜索,必须使用 WithSearching 特性,将输入绑定到组件属性并定义可搜索的列。其余部分请放心。这非常简单

namespace App\Http\Livewire;

use Amirami\LivewireDataTables\DataTable;
use Amirami\LivewireDataTables\Traits\WithSearching;

class PostsIndex extends DataTable
{
    use WithSearching;
    
    public $searchableColumns = [
        'title',
        'content',
    ];
    
    public function render()
    {
        $posts = $this->entries;

        return view('livewire.posts-index', compact('posts'));
    }
}
<input wire:model="search" type="text">

<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Excerpt</th>
            <th>Author</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        @foreach($posts as $post)
            <tr>
                <th>{{ $post->title }}</th>
                <th>{{ $post->excerpt }}</th>
                <th>{{ $post->user->name }}</th>
                <th>{{ $post->status() }}</th>
            </tr>
        @endforeach
    </tbody>
</table>

排序

筛选

行缓存

计划中的功能

  • 根据关系字段进行搜索、排序和筛选
  • 批量操作
  • 行分组
  • 前端组件(可能将成为一个独立的包)

展示

请在此处查看使用 livewire-datatables 构建的酷炫表格 这里,并别忘了分享您自己的作品 🙌。

测试

composer test

更新日志

请参阅 CHANGELOG 了解最近的变化。

贡献

请参阅 CONTRIBUTING 了解详情。

安全漏洞

请参阅 我们的安全策略 了解如何报告安全漏洞。

致谢

许可协议

麻省理工学院许可证(MIT)。有关更多信息,请参阅许可证文件