nguyentheson/laravel-livewire-tables-view

为 Laravel Livewire 提供的动态表格组件

维护者

详细信息

github.com/NguyenTheSon/laravel-livewire-tables-view

主页

源代码

问题

安装: 54

依赖项: 0

建议者: 0

安全: 0

星星: 0

关注者: 2

分支: 0

dev-master 2021-05-13 10:57 UTC

Requires

Requires (Dev)

Suggests

MIT 0df812c9f0ba7a7b37e0d69a597b33d3d4ad2a67

  • Anthony Rappa <rappa819.woop@gmail.com>

laraveldatatablestableslivewirerappasoft

This package is not auto-updated.

Last update: 2024-09-28 16:46:37 UTC

README

Package Logo

Latest Version on Packagist StyleCI Total Downloads

此包仍在开发中，尚未包含测试套件。

为数据表提供动态 Laravel Livewire 组件。

此插件假设您已经将 Laravel Livewire 安装并配置到项目中。

安装

您可以通过 composer 安装此包

composer require rappasoft/laravel-livewire-tables

发布资源

发布资源是可选的，除非您想自定义此包。

php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=config

php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=views

php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=lang

用法

创建表格

要创建一个表格组件，您可以从下面的占位符中汲取灵感

<?php

namespace App\Http\Livewire;

use App\User;
use Illuminate\Database\Eloquent\Builder;
use Rappasoft\LaravelLivewireTables\TableComponent;
use Rappasoft\LaravelLivewireTables\Traits\HtmlComponents;
use Rappasoft\LaravelLivewireTables\Views\Column;

class UsersTable extends TableComponent
{
    use HtmlComponents;

    public function query() : Builder
    {
        return User::with('role')->withCount('permissions');
    }

    public function columns() : array
    {
        return [
            Column::make('ID')
                ->searchable()
                ->sortable(),
            Column::make('Avatar')
                ->format(function(User $model) {
                    return $this->image($model->avatar, $model->name, ['class' => 'img-fluid']);
                }),
            Column::make('Name')
                ->searchable()
                ->sortable(),
            Column::make('E-mail', 'email')
                ->searchable()
                ->sortable()
                ->format(function(User $model) {
                    return $this->mailto($model->email, null, ['target' => '_blank']);
                }),
            Column::make('Role', 'role.name')
                ->searchable()
                ->sortable(),
            Column::make('Permissions')
                ->sortable()
                ->format(function(User $model) {
                    return $this->html('<strong>'.$model->permissions_count.'</strong>');
                }),
            Column::make('Actions')
                ->format(function(User $model) {
                    return view('backend.auth.user.includes.actions', ['user' => $model]);
                })
                ->hideIf(auth()->user()->cannot('do-this')),
        ];
    }
}

您的组件必须实现两种方法

/**
 * This defines the start of the query, usually Model::query() but can also eager load relationships and counts if needed.
 */
public function query() : Builder;

/**
 * This defines the columns of the table, they don't necessarily have to map to columns on the database table.
 */
public function columns() : array;

渲染表格

将以下内容放置在您希望表格出现的位置。

Laravel 6.x

@livewire('users-table')

Laravel 7.x|8.x

<livewire:users-table />

定义列

您可以使用列类定义表格的列。

以下方法可用于连接到列

/**
 * The first argument is the column header text
 * The attribute can be omitted if the text is equal to the lower case snake_cased version of the column
 * The attribute can also be used to reference a relationship (i.e. role.name)
 */
public function make($text, ?$attribute) : Column;

/**
 * Used to format the column data in different ways, see the HTML Components section.
 * You will be passed the current model and column (if you need it for some reason) which can be omitted as an argument if you don't need it.
 */
public function format(callable $callable = null) : self;

/**
 * This column is searchable, with no callback it will search the column by name or by the supplied relationship, using a callback overrides the default searching functionality.
 */
public function searchable(callable $callable = null) : self;

/**
 * This column is sortable, with no callback it will sort the column by name and sort order defined on the components $sortDirection variable
 */
public function sortable(callable $callable = null) : self;

/**
 * The columns output will be put through {!! !!} instead of {{ }}.
 */
public function raw() : self;

/**
 * Hide this column permanently
 */
public function hide() : self;

/**
 * Hide this column based on a condition. i.e.: user has or doesn't have a role or permission. Must return a boolean, not a closure.
 */
public function hideIf($condition) : self;

/**
 * This column is only included in exports and is not available to the UI
 */
public function exportOnly() : self;

/**
 * This column is excluded from the export but visible to the UI unless defined otherwise with hide() or hideIf()
 */
public function excludeFromExport() : self;

/**
 * If supplied, and the column is exportable, this will be the format when rendering the CSV/XLS/PDF instead of the format() function. You may have both, format() for the UI, and exportFormat() for the export only. If this method is not supplied, format() will be used and passed through strip_tags() to try to clean the output.
 */
public function exportFormat(callable $callable = null) : self;

属性

您可以在您的表格组件中覆盖其中任何一个

表格

搜索

排序

分页

加载

离线

导出

其他

表格方法

列/数据

使用以下方法来修改列/行元数据。

public function setTableHeadClass($attribute): ?string
public function setTableHeadId($attribute): ?string
public function setTableHeadAttributes($attribute): array
public function setTableRowClass($model): ?string
public function setTableRowId($model): ?string
public function setTableRowAttributes($model): array
public function getTableRowUrl($model): ?string
public function setTableDataClass($attribute, $value): ?string
public function setTableDataId($attribute, $value): ?string
public function setTableDataAttributes($attribute, $value): array

分页

如果您想在搜索或每页属性更改时执行额外任务，请覆盖这些方法。

public function updatingSearch(): void
public function updatingPerPage(): void

搜索

如果您想在搜索已被清除时执行额外步骤，请覆盖此方法。

public function clearSearch(): void

排序

如果您想更改默认排序行为，请覆盖此方法。

public function sort($attribute): void

HTML 组件

此包包含来自 laravelcollective/html 包的一些功能，并修改以适应此包的需求。

要使用这些功能，您必须导入 Rappasoft\LaravelLivewireTables\Traits\HtmlComponents 特性。

您可以从列的 format() 方法返回以下任何函数

public function image($url, $alt = null, $attributes = [], $secure = null): HtmlString
public function link($url, $title = null, $attributes = [], $secure = null, $escape = true): HtmlString
public function secureLink($url, $title = null, $attributes = [], $escape = true): HtmlString
public function linkAsset($url, $title = null, $attributes = [], $secure = null, $escape = true): HtmlString
public function linkSecureAsset($url, $title = null, $attributes = [], $escape = true): HtmlString
public function linkRoute($name, $title = null, $parameters = [], $attributes = [], $secure = null, $escape = true): HtmlString
public function linkAction($action, $title = null, $parameters = [], $attributes = [], $secure = null, $escape = true): HtmlString
public function mailto($email, $title = null, $attributes = [], $escape = true): HtmlString
public function email($email): string
public function html($html): HtmlString

导出数据

表格组件支持导出到 CSV、XLS、XLSX 和 PDF。

为了使用此功能，您必须安装 Laravel Excel 3.1 或更高版本。

为了使用 PDF 导出功能，您还必须安装 DOMPDF 或 MPDF。

您可以在配置文件中的 pdf_library 下设置 PDF 导出库。DOMPDF 是默认选项。

您的表格支持哪些导出

默认情况下，导出是关闭的。您可以使用 $exports 类属性添加可用导出类型的列表。

public $exports = ['csv', 'xls', 'xlsx', 'pdf'];

定义文件名。

默认情况下，文件名将是 data。type。例如 data.pdf，data.csv。

您可以使用 $exportFileName 类属性更改文件名。

public $exportFileName = 'users-table'; - 显然省略文件类型

决定要导出哪些列

在导出信息方面，您有几个选项。默认情况下，如果完全未定义，则所有列都将导出。

如果您有一个希望对 UI 可见但不想导出的列，可以在 excludeFromExport() 上链式调用

如果您有一个希望对导出可见但对 UI 不可见的列，可以在 exportOnly() 上链式调用

导出列数据的格式化

默认情况下，导出会尝试以与UI显示相同的方式渲染信息。对于基于列的常规属性来说，这是可以的，但当导出格式化列，输出视图或HTML时，会尝试移除HTML。

相反，你可以在列上使用exportFormat()方法来定义当该列输出到文件时应如何格式化。

因此，你可以有一个既可用于UI又可用于导出的列，并根据输出位置对其进行不同的格式化。

导出示例

<?php

namespace App\Http\Livewire;

use App\User;
use Illuminate\Database\Eloquent\Builder;
use Rappasoft\LaravelLivewireTables\TableComponent;
use Rappasoft\LaravelLivewireTables\Traits\HtmlComponents;
use Rappasoft\LaravelLivewireTables\Views\Column;

class UsersTable extends TableComponent
{
    use HtmlComponents;

    public function query() : Builder
    {
        return User::with('role')->withCount('permissions');
    }

    public function columns() : array
    {
        return [
            Column::make('ID')
                ->searchable()
                ->sortable()
                ->excludeFromExport(), // This column is visible to the UI, but not export.
            Column::make('ID')
                ->exportOnly(), // This column is only rendered on export
            Column::make('Avatar')
                ->format(function(User $model) {
                    return $this->image($model->avatar, $model->name, ['class' => 'img-fluid']);
                })
                ->excludeFromExport(), // This column is visible to the UI, but not export.
            Column::make('Name') // This columns is visible to both the UI and export, and is rendered the same
                ->searchable()
                ->sortable(),
            Column::make('E-mail', 'email')
                ->searchable()
                ->sortable()
                ->format(function(User $model) {
                    return $this->mailto($model->email, null, ['target' => '_blank']);
                })
                ->exportFormat(function(User $model) { // This column is visible to both the UI and the export, but is formatted differently to the export via this method.
                    return $model->email;
                }),
            Column::make('Role', 'role.name') // This columns is visible to both the UI and export, and is rendered the same
                ->searchable()
                ->sortable(),
            Column::make('Permissions') // This columns is visible to both the UI and export, and is rendered the same, except the HTML tags will be removed because it is not specifically calling a exportFormat() function.
                ->sortable()
                ->format(function(User $model) {
                    return $this->html('<strong>'.$model->permissions_count.'</strong>');
                }),
            Column::make('Actions')
                ->format(function(User $model) {
                    return view('backend.auth.user.includes.actions', ['user' => $model]);
                })
                ->hideIf(auth()->user()->cannot('do-this'))
                ->excludeFromExport(), // This column is visible to the UI, but not export.
        ];
    }
}

自定义导出

目前，没有可用的自定义选项。但有一个名为exports的配置项，你可以定义用于渲染的类。你可以使用\Rappasoft\LaravelLivewireTables\Exports\Export类作为基类。

未来将添加更多选项，但内置选项应该适用于大多数应用程序。

设置组件选项

有一些特定于前端框架的选项可以设置。

这些选项必须从组件的$options属性中设置。

这种方式而不是配置文件，这样你可以对每个组件的这些设置进行控制。

protected $options = [
    // The class set on the table when using bootstrap
    'bootstrap.classes.table' => 'table table-striped table-bordered',

    // The class set on the table's thead when using bootstrap
    'bootstrap.classes.thead' => null,

    // The class set on the table's export dropdown button
    'bootstrap.classes.buttons.export' => 'btn',
    
    // Whether or not the table is wrapped in a `.container-fluid` or not
    'bootstrap.container' => true,
    
    // Whether or not the table is wrapped in a `.table-responsive` or not
    'bootstrap.responsive' => true,
];

为此，你必须向$options属性传递一个关联数组，其中包含覆盖项。上面的是默认值，如果你没有更改它们，你可以省略它们或不考虑该属性。

传递属性

要从一个blade视图向表格传递属性，你可以使用正常的Livewire挂载方法

<livewire:users-table status="{{ request('status') }}" />
protected $status = 'active';

public function mount($status) {
    $this->status = $status;
}

更新日志

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

贡献

有关详细信息，请参阅贡献指南

安全

如果你发现任何安全相关的问题，请通过电子邮件rappa819@gmail.com联系，而不是使用问题跟踪器。

致谢

许可证

MIT许可证（MIT）。有关更多信息，请参阅许可证文件