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';

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

public $sort_attribute = 'relations_count';

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

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()`

此方法渲染表格组件视图。如果您必须覆盖它，请确保 return $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 属性

{{-- 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

mvehar/ 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)`

发布文件