README

本包为 Inertia.js 提供类似于 DataTables 的体验，支持搜索、过滤、排序、切换列和分页。它生成的 URL 可以被 Spatie 的优秀 Laravel 查询构建器包使用，无需额外逻辑。组件使用 Tailwind CSS 2.0 进行样式设计，但它是完全可定制的，您也可以使用自己的组件。数据刷新逻辑基于 Inertia 的 Ping CRM 示例。

启动器 🚀

嘿！我们构建了一个基于 Docker 的部署工具，可以完全容器化地启动应用程序和网站。您可以在我们的网站上找到所有功能和路线图，我们还在 Twitter 上！

支持

我们自豪地通过开发 Laravel 包并将它们免费提供给社区来支持社区。跟踪问题和拉取请求需要时间，但我们很乐意提供帮助！如果这个包为您节省了时间，或者您在专业上依赖它，请考虑支持维护和开发。

特性

全局搜索
字段搜索
过滤器
切换列
排序列
分页
自动更新查询字符串（通过使用 Inertia 的替换功能）

兼容性

路线图

移除 @tailwindcss/forms 依赖
输入的防抖延迟
将 Table.vue 样式转换为正确的 Tailwind 语法
改进超小屏幕上的样式
更好的定制文档并移至真正的无状态组件

安装

您需要安装服务器端包和客户端包。请注意，此包仅与 Laravel 8、Vue 2.6 + 3.0 兼容，并需要 Tailwind Forms 插件。

服务器端安装（Laravel）

您可以通过 composer 安装此包

composer require protonemedia/inertiajs-tables-laravel-query-builder

该包将自动注册 Service Provider，该 Provider 提供了一个 table 方法，您可以在 Interia 响应中使用此方法。

搜索字段

使用 addSearch 方法，您可以指定哪些属性可搜索。搜索查询作为 filter 传递到 URL 查询中。这无缝地集成了 Laravel 查询构建器包的过滤功能。

您需要传入属性和标签作为参数。使用 addSearchRows 方法，您可以一次性添加多个属性。

Inertia::render('Page/Index')->table(function ($table) {
    $table->addSearch('name', 'Name');

    $table->addSearchRows([
        'email' => 'Email',
        'job_title' => 'Job Title',
    ]);
});

过滤器

过滤器类似于搜索字段，但它们使用select元素而不是input元素。这样，您可以向用户展示一组预定义的选项。在底层，它使用Laravel查询构建器包相同的过滤功能。

此方法接受三个参数：属性、标签和一个包含选项的键值数组。

Inertia::render('Page/Index')->table(function ($table) {
    $table->addFilter('language_code', 'Language', [
        'en' => 'Engels',
        'nl' => 'Nederlands',
    ]);
});

列

使用addColumn方法，您可以指定哪些列是可切换的。您需要为每个列传递一个键和标签。使用addColumns方法，您可以一次性添加多个列。

Inertia::render('Page/Index')->table(function ($table) {
    $table->addColumn('name', 'Name');

    $table->addColumns([
        'email' => 'Email',
        'language_code' => 'Language',
    ]);
});

addColumn方法有一个可选的第三个参数，可以默认禁用列

$table->addColumn('name', 'Name', false);

禁用全局搜索

默认情况下，全局搜索是启用的。此查询将应用于具有global属性的过滤器。如果您不想使用全局搜索，可以使用disableGlobalSearch方法。

Inertia::render('Page/Index')->table(function ($table) {
    $table->disableGlobalSearch();
});

示例控制器

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Inertia\Inertia;
use ProtoneMedia\LaravelQueryBuilderInertiaJs\InertiaTable;
use Spatie\QueryBuilder\AllowedFilter;
use Spatie\QueryBuilder\QueryBuilder;

class UserIndexController
{
    public function __invoke()
    {
        $globalSearch = AllowedFilter::callback('global', function ($query, $value) {
            $query->where(function ($query) use ($value) {
                $query->where('name', 'LIKE', "%{$value}%")->orWhere('email', 'LIKE', "%{$value}%");
            });
        });

        $users = QueryBuilder::for(User::class)
            ->defaultSort('name')
            ->allowedSorts(['name', 'email', 'language_code'])
            ->allowedFilters(['name', 'email', 'language_code', $globalSearch])
            ->paginate()
            ->withQueryString();

        return Inertia::render('Users/Index', [
            'users' => $users,
        ])->table(function (InertiaTable $table) {
            $table->addSearchRows([
                'name' => 'Name',
                'email' => 'Email address',
            ])->addFilter('language_code', 'Language', [
                'en' => 'Engels',
                'nl' => 'Nederlands',
            ])->addColumns([
                'email' => 'Email address',
                'language_code' => 'Language',
            ]);
        });
    }
}

客户端安装（Inertia）

您可以通过npm或yarn安装此包。

npm install @protonemedia/inertiajs-tables-laravel-query-builder --save

yarn add @protonemedia/inertiajs-tables-laravel-query-builder

将存储库路径添加到您的Tailwind配置文件中的purge数组。这确保了样式在生产构建中也能正常工作。

module.exports = {
  purge: [
    './node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/**/*.{js,vue}',
  ]
}

表格组件

要使用Table组件及其所有相关功能，您需要将InteractsWithQueryBuilder混入添加到您的组件中，并将Tailwind2.Table组件添加到components键。

您可以使用名为#head的命名槽来提供表格标题，使用名为#body的命名槽来提供表格主体。您可以使用showColumn方法来确定列是否可见。您可以使用sortBy方法设置要排序的列。

页面组件示例

<template>
  <Table
    :filters="queryBuilderProps.filters"
    :search="queryBuilderProps.search"
    :columns="queryBuilderProps.columns"
    :on-update="setQueryBuilder"
    :meta="users"
  >
    <template #head>
      <tr>
        <th @click.prevent="sortBy('name')">Name</th>
        <th v-show="showColumn('email')" @click.prevent="sortBy('email')">Email</th>
        <th v-show="showColumn('language_code')" @click.prevent="sortBy('language_code')">Language</th>
      </tr>
    </template>

    <template #body>
      <tr v-for="user in users.data" :key="user.id">
        <td>{{ user.name }}</td>
        <td v-show="showColumn('email')">{{ user.email }}</td>
        <td v-show="showColumn('language_code')">{{ user.language_code }}</td>
      </tr>
    </template>
  </Table>
</template>

<script>
import { InteractsWithQueryBuilder, Tailwind2 } from '@protonemedia/inertiajs-tables-laravel-query-builder';

export default {
  mixins: [InteractsWithQueryBuilder],

  components: {
    Table: Tailwind2.Table
  },

  props: {
    users: Object
  }
};
</script>

属性和分页

filters、search、columns和on-update属性是Table组件的必需属性，但InteractsWithQueryBuilder混入会自动提供这些属性的值。您只需像上面的示例模板那样指定它们即可。

当您向表格传递一个meta对象时，它将自动提供分页组件。

您可以使用基组件的setTranslations方法覆盖默认的分页翻译。您可以在主JavaScript文件中这样做。

import { Components } from "@protonemedia/inertiajs-tables-laravel-query-builder";

Components.Pagination.setTranslations({
  no_results_found: "No results found",
  previous: "Previous",
  next: "Next",
  to: "to",
  of: "of",
  results: "results",
});

Table.vue插槽

Table.vue有多个插槽，您可以使用这些插槽来注入自己的实现。

每个插槽都提供了props来与父Table组件交互。

<template>
  <Table ...>
    <template v-slot:tableGlobalSearch="slotProps">
      <input
        placeholder="Custom Global Search Component..."
        :value="slotProps.search.global.value"
        @input="slotProps.changeGlobalSearchValue($event.target.value)"
      />
    </template>

    <template #body>
      ...
    </template>
  </Table>
</template>

引入自己的组件

组件的模板和逻辑是完全分开的。这样，您可以在重用现有逻辑的同时创建新的模板。

有九个组件您可以导入并用作模板的混入。例如，要编写自己的TableGlobalSearch组件，您可以导入基组件，并通过将其作为混入添加来使用其逻辑。

<template>
  <input
    class="form-input"
    placeholder="Custom Global Search Component..."
    :value="value"
    @input="onChange($event.target.value)"
  />
</template>

<script>
import { Components } from '@protonemedia/inertiajs-tables-laravel-query-builder';

export default {
  mixins: [Components.TableGlobalSearch],
};
</script>

可用组件

Components.ButtonWithDropdown
Components.OnClickOutside
Components.Pagination
Components.Table
Components.TableAddSearchRow
Components.TableColumns
Components.TableFilter
Components.TableGlobalSearch
Components.TableSearchRows

一个好的起点是将js/Tailwind2文件夹复制到您的应用程序中，并从那里开始自定义模板。

测试

您可以使用composer运行PHP测试套件。

composer test

您可以使用npm或yarn运行JS测试套件。

npm run test

yarn test

变更日志

有关最近更改的更多信息，请参阅CHANGELOG。

贡献

请参阅CONTRIBUTING以获取详细信息。

其他Laravel包

Laravel Analytics Event Tracking：一个易于将事件发送到Google Analytics的Laravel包。
Laravel Blade On Demand：一个Laravel包，用于在内存中编译Blade模板。
Laravel Cross Eloquent Search：一个Laravel包，用于在多个Eloquent模型中搜索。
Laravel Eloquent Scope as Select：停止在PHP中重复Eloquent查询作用域和约束。此包允许您通过添加子查询来重用查询作用域和约束。
Laravel Eloquent Where Not：此Laravel包允许您翻转/反转Eloquent作用域，或任何查询约束。
Laravel FFMpeg：此包为Laravel提供了与FFmpeg的集成。文件的存储由Laravel的Filesystem处理。
Laravel Form Components：Blade组件，用于使用Tailwind CSS自定义表单和Bootstrap 4快速构建表单。支持验证、模型绑定、默认值、翻译，包含默认供应商样式，并且完全可定制！
Laravel Mixins：一组Laravel实用工具。
Laravel Verify New Email：此包添加了对验证新电子邮件地址的支持：当用户更新其电子邮件地址时，新地址将被验证，直到新地址被验证后才会替换旧地址。
Laravel Paddle：带有webhooks/events支持的Laravel与Paddle.com API的集成。
Laravel WebDAV：Laravel的Filesystem的WebDAV驱动。

安全

如果您发现任何与安全相关的问题，请通过电子邮件pascal@protone.media联系，而不是使用问题跟踪器。

鸣谢

许可

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

cav-s-a / inertiajs-tables-laravel-query-builder

维护者

详细信息