README

一个动态、响应式的 Laravel Livewire 表格组件，具有搜索、排序、复选框和分页功能。

安装

使用 composer 安装此包

composer require kdion4891/laravel-livewire-tables

此包旨在与 Laravel 前端脚手架精密配合。

如果您现在正在进行脚手架搭建，您需要将 Livewire 的 @livewireScripts 和 @livewireStyles blade 指令添加到您的 resources/views/layouts/app.blade.php 文件中

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
@livewireStyles

...

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
@livewireScripts

此包还使用 Font Awesome 作为图标。如果您尚未安装，它非常简单

npm install @fortawesome/fontawesome-free

然后，将以下行添加到 resources/sass/app.scss

@import '~@fortawesome/fontawesome-free/css/all.min.css';

现在，只需编译资源

npm install && npm run dev

制作表格组件

使用 make 命令

php artisan make:table UserTable --model=User

这将在 app/Http/Livewire 文件夹中创建您的新表格组件。

创建组件后，您可能想要编辑 query 和 column 方法

class UserTable extends TableComponent
{
    public function query()
    {
        return User::query();
    }

    public function columns()
    {
        return [
            Column::make('ID')->searchable()->sortable(),
            Column::make('Created At')->searchable()->sortable(),
            Column::make('Updated At')->searchable()->sortable(),
        ];
    }
}

您不必在表格组件中使用 render() 方法或担心组件视图，因为该包会自动处理这些。

使用表格组件

您可以在视图中像使用任何其他 Livewire 组件一样使用表格组件

@livewire('user-table')

现在，您只需要更新您的表格组件类！

表格组件属性

`$table_class`

设置用于 <table> 的 CSS 类名。默认为 table-hover。

示例

public $table_class = 'table-hover table-striped';

或者，通过 .env 应用全局

TABLE_CLASS="table-hover table-striped"

`$thead_class`

设置用于 <thead> 的 CSS 类名。默认为 thead-light。

示例

public $thead_class = 'thead-dark';

或者，通过 .env 应用全局

TABLE_THEAD_CLASS="thead-dark"

`$header_view`

设置用于表格头的自定义视图（显示在搜索旁边）。

示例

public $header_view = 'users.table-header';

提示：您在表格组件中引用的任何视图都可以使用 Livewire 动作、触发器等！

{{-- resources/views/users/table-header.blade.php --}}
<button class="btn btn-primary" wire:click="createUser">Create User</button>

`$footer_view`

设置用于表格脚的自定义视图（显示在分页旁边）。

示例

public $footer_view = 'users.table-footer';

`$checkbox`

布尔值，表示表格是否应使用复选框。默认为 true。

示例

public $checkbox = false;

或者，通过 .env 应用全局

TABLE_CHECKBOX=false

`$checkbox_side`

表格放置复选框的边。接受 left 或 right。默认为 right。

示例

public $checkbox_side = 'left';

或者，通过 .env 应用全局

TABLE_CHECKBOX_SIDE="left"

`$checkbox_attribute`

设置用于 $checkbox_values 的属性名称。默认为 id。我建议保持为 id。

示例

public $checkbox_attribute = 'id';

`$checkbox_values`

包含已选值的数组。例如，如果 $checkbox_attribute 设置为 id，则此数组将包含已选模型 id 的数组。然后您可以使用这些 id 在组件中做任何您想做的事情。例如，在自定义 $header_view 中使用 deleteChecked 按钮。

示例 deleteChecked 按钮

<button class="btn btn-danger" onclick="confirm('Are you sure?') || event.stopImmediatePropagation();" wire:click="deleteChecked">
    Delete Checked
</button>

示例 deleteChecked 方法

public function deleteChecked()
{
    Car::whereIn('id', $this->checkbox_values)->delete();
}

`$sort_attribute`

设置默认排序的属性。默认为 id。这也适用于计数和关系。

示例

public $sort_attribute = 'created_at';

计数示例（如果您在query()方法中添加了->withCount('relations')）

public $sort_attribute = 'relations_count';

关系示例（如果您在query()方法中添加了->with('relation')）

public $sort_attribute = 'relation.name';

注意点符号的使用。您在声明列关系属性时也会用到它。

`$sort_direction`

设置默认排序方向。接受asc或desc。默认为desc。

示例

public $sort_direction = 'asc';

`$per_page`

设置每页显示的结果数量。默认为15。

示例

public $per_page = 25;

或者，通过 .env 应用全局

TABLE_PER_PAGE=25

表格组件方法

`query()`

此方法返回一个用于表格的Eloquent模型查询。

示例

public function query()
{
    return Car::with('brand')->withCount('accidents');
}

`columns()`

此方法返回用于表格的Column数组。

示例

public function columns()
{
    return [
        Column::make('ID')->searchable()->sortable(),
        Column::make('Brand Name', 'brand.name')->searchable()->sortable(),
        Column::make('Name')->searchable()->sortable(),
        Column::make('Color')->searchable()->sortable()->view('cars.table-color'),
        Column::make('Accidents', 'accidents_count')->sortable(),
        Column::make()->view('cars.table-actions'),
    ];
}

声明Column与声明Laravel Nova字段类似。有关更多信息，请跳转到列声明部分。

`thClass($attribute)`

此方法用于计算表格表头的<th> CSS 类。

`$attribute`

列属性。

示例

public function thClass($attribute)
{
    if ($attribute == 'name') return 'font-italic';
    if ($attribute == 'accidents_count') return 'text-right';
    if ($attribute == 'brand.name') return 'font-weight-bold';

    return null;
}

`trClass($model)`

此方法用于计算表格行的<tr> CSS 类。

`$model`

表格行的模型实例。

示例

public function trClass($model)
{
    if ($model->name == 'Silverado') return 'table-secondary';
    if ($model->accidents_count > 8) return 'table-danger';
    if ($model->brand->name == 'Ford') return 'table-primary';

    return null;
}

`tdClass($attribute, $value)`

此方法用于计算表格数据的<td> CSS 类。

`$attribute`

列属性。

`$value`

列值。

示例

public function tdClass($attribute, $value)
{
    if ($attribute == 'name' && $value == 'Silverado') return 'table-secondary';
    if ($attribute == 'accidents_count' && $value < 2) return 'table-success';
    if ($attribute == 'brand.name' && $value == 'Ford') return 'table-primary';

    return null;
}

`mount()`

此方法设置初始表格属性。如果您需要覆盖它，请确保调用$this->setTableProperties()。

示例

public function mount()
{
    $this->setTableProperties();
    
    // my custom code
}

`render()`

此方法渲染表格组件视图。如果您需要覆盖它，请确保返回$this->tableView()。

示例

public function render()
{
    // my custom code
    
    return $this->tableView();
}

表格列声明

Column类用于声明您的表格列。

public function columns()
{
    return [
        Column::make('ID')->searchable()->sortable(),
        Column::make('Created At')->searchable()->sortable(),
        Column::make('Updated At')->searchable()->sortable(),
    ];
}

`make($heading = null, $attribute = null)`

`$heading`

用于表格列的标题，例如创建时间。对于只读列可以是null。

`$attribute`

用于表格列值的属性。如果为null，则使用$heading的蛇形写法。

您也可以使用点符号指定_count和关系属性。

对于计数，假设我在query()中添加了withCount()

public function query()
{
    return Car::withCount('accidents');
}

现在我可以创建一个使用此计数的列如下

Column::make('Accidents', 'accidents_count')->sortable(),

对于关系，假设我在query()中添加了with()

public function query()
{
    return Car::with('brand');
}

现在我可以使用任何关系属性创建一个列如下

Column::make('Brand ID', 'brand.id')->searchable()->sortable(),
Column::make('Brand Name', 'brand.name')->searchable()->sortable(),

`searchable()`

设置列可搜索。

`sortable()`

设置列可排序。

`sortUsing($callback)`

允许使用自定义逻辑进行排序。您提供的callable将接收以下参数

$models：当前的Eloquent查询（\Illuminate\Database\Eloquent\Builder）。您应该在查询上应用您的排序逻辑，并返回它。
$sort_attribute：正在排序的列的名称。如果您使用了嵌套关系进行排序，它将被正确转换为relationship_table.column_name格式，以便查询可以正确作用。
$sort_direction：请求的排序方向，可以是asc或desc。

此外，您的回调将通过Laravel的容器传递，因此您可以在回调中注入所需的任何依赖。确保在上述参数之前列出您的依赖。

示例

Column::make('Paint Color')->searchable()->sortable()->sortUsing(function ($models, $sort_attribute, $sort_direction) {
    return $models->orderByRaw('?->\'$.color_code\' ?', [$sort_attribute, $sort_direction]);
});

这将使用JSON值color_code对paint_color列进行排序。

SQL注入警告：如果您使用Eloquent的任何*Raw方法，请确保始终使用绑定功能。

`view($view)`

为列设置自定义视图。

示例

Column::make('Paint Color')->searchable()->sortable()->view('cars.table-paint-color'),

注意，列仍然可以 searchable() 和 sortable()，因为 Car 模型包含一个 paint_color 属性！

如果您正在制作一个仅查看的列（用于操作按钮等），只需不要使其可搜索或可排序

Column::make()->view('cars.table-actions'),

自定义列视图传递 $model 和 $column 对象，以及从表格组件传递的变量。

对于 Paint Color 示例，我们可以像这样使用模型中的 paint_color 属性

{{-- resources/views/cars/table-paint-color.blade.php --}}
<i class="fa fa-circle" style="color: {{ $model->paint_color }};"></i>

对于操作按钮示例，我们可以像这样使用模型中的 id 属性

{{-- resources/views/cars/table-actions.blade.php --}}
<button class="btn btn-primary" wire:click="showCar({{ $model->id }})">Show</button>
<button class="btn btn-primary" wire:click="editCar({{ $model->id }})">Edit</button>

为关系列使用自定义视图？没问题

{{-- resources/views/cars/table-brand-name.blade.php --}}
{{ $model->brand->name }}

发布文件

发布文件是可选的。

发布表格视图文件

php artisan vendor:publish --tag=table-views

发布配置文件

php artisan vendor:publish --tag=table-config

kdion4891 / laravel-livewire-tables

维护者

详细信息

README

安装

制作表格组件

使用表格组件

表格组件属性

`$table_class`

`$thead_class`

`$header_view`

`$footer_view`

`$checkbox`

`$checkbox_side`

`$checkbox_attribute`

`$checkbox_values`

`$sort_attribute`

`$sort_direction`

`$per_page`

表格组件方法

`query()`

`columns()`

`thClass($attribute)`

`$attribute`

`trClass($model)`

`$model`

`tdClass($attribute, $value)`

`$attribute`

`$value`

`mount()`

`render()`

表格列声明

`make($heading = null, $attribute = null)`

`$heading`

`$attribute`

`searchable()`

`sortable()`

`sortUsing($callback)`

`view($view)`

发布文件