amirami/livewire-datatables

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

dev-master 2021-09-28 12:26 UTC

This package is auto-updated.

Last update: 2024-08-28 19:12:02 UTC


README

GitHub Tests Action Status Total Downloads Latest Version on Packagist GitHub Code Style Action Status

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

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

安装

您可以通过composer安装此包

composer require amirami/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许可证。请参阅许可证文件获取更多信息。