README

Livewire的扩展，允许您轻松构建具有可选分页、搜索和排序功能的表格。
基于danielbinsmaier/livewire-tables和coryrose/livewire-tables

安装

通过Composer

$ composer require timolake/livewire-tables

该包将自动注册其服务提供者。

要将配置文件发布到config/livewire-tables.php，请运行

php artisan vendor:publish --provider="timolake\LivewireTables\LivewireTablesServiceProvider"

手动通过GitHub

https://likegeeks.com/install-and-use-non-composer-laravel-packages/

手动将包添加到composer.json

    "require": {
        "timolake/livewire-tables": "master"
    },
    "repositories": [
        {
            "type": "vcs",
            "url": "https://github.com/timolake/livewire-tables"
        }
    ],

composer update

使用方法

创建Livewire表格分为三个简单步骤

创建一个表格组件类
使用可用的选项配置表格类
构建表格视图（当组件类更改时需要）

创建一个表格组件类

运行make命令以生成表格类

php artisan livewire-tables:make UsersTable

App/Http/Livewire/Tables/UsersTable.php

...

class UsersTable extends LivewireModelTable
{
    use WithPagination;
    
        public $paginate = true;
        public $pagination = 10;
        public $hasSearch = true;
    
        public $fields = [
            [
                'title' => 'ID',
                'name' => 'id',
                'header_class' => '',
                'cell_class' => '',
                'sortable' => true,
            ],
            [
                'title' => 'Name',
                'name' => 'name',
                'header_class' => '',
                'cell_class' => '',
                'sortable' => true,
                'searchable' => true,
            ],
            [
                'title' => 'City',
                'name' => 'address.city',
                'header_class' => 'bolded',
                'cell_class' => 'bolded bg-green',
                'sortable' => true,
                'searchable' => true,
            ],
            [
                'title' => 'Post',
                'name' => 'post.content',
                'header_class' => '',
                'cell_class' => '',
                'sortable' => true,
                'searchable' => true,
            ],
        ];
    
        public function render()
        {
            return view('livewire.tables.users-table', [
                'rowData' => $this->query(),
            ]);
        }
    
        public function model()
        {
            return User::class;
        }
    
        public function with()
        {
            return ['address', 'post'];
        }
}

配置组件选项

首先，在以下格式的model()方法中设置您的基模型

public function model()
{
    return User::class;
}

要预加载关系，请使用with()并返回关系数组的数组

public function with()
{
    return ['address', 'post'];
}

以下是为表格类提供的可编辑公共属性

$fields

控制表格的字段配置

$css

用于在构建表格时生成CSS类。

这些可以在配置文件中全局设置，或者在组件类中按表格设置。

注意： 在组件中设置的CSS类将覆盖配置文件中存在的类。

构建表格视图

准备好后，使用scaffold命令构建表格视图

php artisan livewire-tables:scaffold UsersTable

resources/views/livewire/tables/users-table.blade.php

<div>
    @if ($hasSearch)
    <div>
        <div style="position: relative; display: inline-block;">
        <input type="text" wire:model="search" />
            @if ($search)
                <button wire:click="clearSearch" style="position: absolute; right: 5px;">&#10005;</button>
            @endif
        </div>
    </div>
    @endif
    <table class="table-wrapper">
        <thead>
        <tr>
            <th class="header" wire:click="$emit('sortColumn', 0)">ID</th>
            <th class="header" wire:click="$emit('sortColumn', 1)">Name</th>
            <th class="header bolded" wire:click="$emit('sortColumn', 2)">City</th>
            <th class="header" wire:click="$emit('sortColumn', 3)">Post</th>
        </tr>
        </thead>
        <tbody>
        @foreach ($rowData as $row)
            <tr>
                <td class="table-cell">{{ $row->id }}</td>
                <td class="table-cell">{{ $row->name }}</td>
                <td class="table-cell bolded bg-green">{{ $row->address->city }}</td>
                <td class="table-cell">{{ $row->post->content }}</td>
            </tr>
        @endforeach
        </tbody>
    </table>
    @if ($paginate)
    <div>
        {{ $rowData->links() }}
    </div>
    @endif
</div>

您可以在更改父组件类时连续使用scaffold命令。

由于渲染的模板是简单的HTML，因此无需表格“插槽”进行自定义 - 按照您的需要自定义模板！

变更日志

有关最近更改的更多信息，请参阅变更日志。

鸣谢

[Cory Rosenwald][link-author]
Laravel Livewire
[所有贡献者][link-contributors]

许可协议

MIT。请参阅许可文件以获取更多信息。

timolake / livewire-tables

维护者

详细信息