README

Livewire Datatables的分支Livewire Datatables

特性

• 使用模型或查询构建器提供数据
• 使用预设或自定义回调修改和格式化列
• 使用列或计算列排序数据
• 使用布尔值、时间、日期、选择或自由文本进行过滤
• 显示/隐藏列

实时演示应用

演示应用仓库

要求

• Laravel 7
• Livewire
• Tailwind
• Alpine JS

安装

您可以通过composer安装此包

composer require mediconesystems/livewire-datatables

可选

您不必这样做，但如果您喜欢，可以发布配置文件和blade模板资产

php artisan vendor:publish

这将使您能够修改blade视图并应用自己的样式，datatables视图将发布到resources/livewire/datatables。配置文件包含整个应用中使用的默认时间和日期格式

• 如果您在项目中使用Purge CSS，这将非常有用，以确保所有livewire-datatables类都被包含

内置的许多动态组件都使用Alpine JS，所以要消除页面加载时的闪烁，请确保您在CSS中有以下内容

[x-cloak] {
    display: none;
}

某个地方

基本用法

• 在blade视图中使用livewire-datatable组件，并传入一个模型

...

<livewire:datatable model="App\User" />

...

模板语法

• 有多种方法可以通过传递额外的属性到组件来修改表格

<livewire:datatable
    model="App\User"
    include="id, name, dob, created_at"
    dates="dob"
/>

属性

组件语法

创建一个扩展 Mediconesystems\LivewireDatatables\LivewireDatatable 的 livewire 组件

php artisan livewire:datatable foo --> 'app/Http/Livewire/Foo.php'

php artisan livewire:datatable tables.bar --> 'app/Http/Livewire/Tables/Bar.php'

通过声明公共属性 $model 或 公共方法 builder() 返回 Illuminate\Database\Eloquent\Builder 实例来提供数据源

php artisan livewire:datatable users-table --model=user --> 'app/Http/Livewire/UsersTable.php' with public $model = User::class

声明一个公共方法 columns，该方法返回包含一个或多个 Mediconesystems\LivewireDatatables\Column 的数组

列

可以使用以下任何静态方法构建列，然后使用流畅的方法链分配其属性。还有其他特定类型的列；NumberColumn、DateColumn、TimeColumn，使用正确的数据类型将启用特定于类型的格式化和过滤

class ComplexDemoTable extends LivewireDatatable
{

    public function builder()
    {
        return User::query();
    }

    public function columns()
    {
        return [
            NumberColumn::name('id')
                ->label('ID')
                ->linkTo('job', 6),

            BooleanColumn::name('email_verified_at')
                ->label('Email Verified')
                ->format()
                ->filterable(),

            Column::name('name')
                ->defaultSort('asc')
                ->searchable()
                ->filterable(),

            Column::name('planet.name')
                ->label('Planet')
                ->searchable()
                ->filterable($this->planets),

            DateColumn::name('dob')
                ->label('DOB')
                ->filterable()
                ->hide()
        ];
    }
}

列方法

监听器

组件将监听 refreshLivewireDatatable 事件，允许您从外部组件刷新表格。

Eloquent 列名称

使用Eloquent关系中的列可以通过正常的Eloquent点表示法包含，例如 planet.name，Livewire Datatables将自动添加必要的表连接来包含该列。如果关系是“多”类型（HasMany、BelongsToMany、HasManyThrough），则Livewire Datatables将创建一个聚合子查询（比连接和分组更高效。感谢@reinink）。默认情况下，聚合类型对于数值列将是count，对于字符串列将是group_concat，但可以使用冒号分隔符来覆盖。

NumberColumn::name('students.age:sum')->label('Student Sum'),

NumberColumn::name('students.age:avg')->label('Student Avg'),

NumberColumn::name('students.age:min')->label('Student Min'),

NumberColumn::name('students.age:max')->label('Student Max'),

自定义列名

仍然可以完全控制您的表格，您可以使用自己喜欢的查询定义一个builder方法，使用自己的连接、分组等，然后使用正常的SQL语法命名列。

public function builder()
{
    return User::query()
        ->leftJoin('planets', 'planets.id', 'users.planet_id')
        ->leftJoin('moons', 'moons.id', 'planets.moon_id')
        ->groupBy('users.id');
}

public function columns()
{
    return [
        NumberColumn::name('id')
            ->filterable(),

        Column::name('planets.name')
            ->label('Planet'),

        Column::raw('GROUP_CONCAT(planets.name SEPARATOR " | ") AS `Moon`'),

        ...
}

回调

回调使您在表格中显示之前可以执行任何您喜欢的数据突变。

• 回调是在数据库查询的分页结果上执行的，所以不应该占用太多内存。
• 回调将接收所选列作为其参数。
• 回调可以如下定义，也可以作为Datatable类的公共方法定义，通过将名称作为字符串传递给回调方法的第二个参数来引用。
• 您可以定义导出时列的名称。

class CallbackDemoTable extends LivewireDatatable
{
    public model = User::class

    public function columns()
    {
        return [
            Column::name('users.id'),

            Column::name('users.dob')->format(),

            Column::callback(['dob', 'signup_date'], 'column_name', function ($dob, $signupDate) {
                $age = $signupDate->diffInYears($dob);
                return $age > 18
                    ? '<span class="text-red-500">' . $age . '</span>'
                    : $age;
            }),

            ...
    }
}

视图

您可以指定一个列的输出直接流入一个单独的blade视图模板。

• 模板使用通常的Laravel视图辅助语法指定。
• 视图将接收列的值作为$value，以及整个查询行作为$row。

class CallbackDemoTable extends LivewireDatatable
{
    public model = User::class

    public function columns()
    {
        return [
            Column::name('users.id'),

            Column::name('users.dob')->view('tables.dateview'),

            Column::name('users.signup_date')->format(),
        ];
    }

'tables/dateview.blade.php'
<span class="mx-4 my-2 bg-pink-500">
    <x-date-thing :value="$value" />
</span>

可编辑列

您可以使用editable标记一列。这使用上面的view()方法将数据传递给一个Alpine/Livewire组件，该组件可以直接更新底层数据库数据。要求列使用标准的Laravel命名定义column。这是一个示例。可以使用上面的回调或视图方法构建更全面的具有验证等功能的自定义可编辑列。

class EditableTable extends LivewireDatatable
{

    public $model = User::class;

    public function columns()
    {
        return [
            Column::name('id')
                ->label('ID')
                ->linkTo('job', 6),

            Column::name('email')
                ->editable(),

            ...
        ];
    }
}

样式

我知道提供一个带有大量有偏见标记和样式的包并不酷。大多数其他包似乎都走上了传递可选类作为参数或配置变量的道路。我的看法是，因为这只是blade与tailwind，所以您可以发布模板并对它们做任何您喜欢的事情 - Livewire和Alpine的运动部件应该很明显。

您也可以在您表格的类中覆盖render方法，为不同的表格提供不同的模板。

致谢和影响

• Laravel
• Laravel Livewire
• Tailwind CSS
• AlpineJS
• livewire-tables by coryrose1
• laravel-livewire-datatables by kdion4891
• Jonathan Reinink的Eloquent课程