README

一个高级、动态的数据表格组件，包括分页、排序和搜索，支持 json 数据。

安装

您可以通过 composer 安装此包

composer require tkaratug/livewire-smart-table

要求

此包在内部使用 livewire/livewire (https://laravel-livewire.com/)。

它还使用 Tailwind (https://tailwind.org.cn) 进行基本样式设置。

在使用此组件之前，请确保您已经包含了这两个依赖项。

用法

为了使用此组件，您必须创建一个新的 Livewire 组件，该组件扩展自 LivewireSmartTable

您可以使用 make:livewire 创建一个新的组件。例如。

php artisan make:livewire UserList

在 UserList 类中，不要从基本 Livewire 组件类扩展，而要从 LivewireSmartTable 类扩展。同时，删除 render 方法。您将得到一个类似于以下代码片段的类。

在这个类中，您必须定义要在表中显示的列。

class UserList extends LivewireSmartTable
{
    $columns = [
        'id' => [
            'type' => 'string', // column type
            'name' => 'Id', // column header
            'class' => 'text-danger', // column class
        ],
        'name' => [
            'type' => 'string',
            'name' => 'Name',
        ],
        'email' => [
            'type' => 'string',
            'name' => 'E-Mail',
        ],
    ];
}

列数组的键必须与数据库表中的列名或 json 对象的键相同。

要在视图中渲染组件，只需使用 Livewire 标签或 include 语法即可。

<livewire:user-list :query="$query" />

$query 必须是 Eloquent Collection 的实例。

例如，创建一个 UserController 类，选择要显示在表中的用户，并将它们传递到视图文件中。

class UserController extends Controller
{
    public function index()
    {
        $users = App\User::where('is_active', '=', true)->get();

        return view('users', ['users' => $users]);
    }
}

然后在 users.blade.php 中使用 Livewire 标签，并将用户分配给 query 属性。

<livewire:user-list :query="$users" />

列属性

`字符串`

用于在 HTML 表格中显示数据作为字符串。

`链接`

用于在 HTML 表格中显示数据作为链接。

除了类型外，您还必须定义一个 url 用于点击时重定向。

$columns = [
    'profile' => [
        'type' => 'link',
        'url' => 'http://example.com/users/{id}/profile',
        'target' => '_blank'
    ],
];

您还可以向 URL 提供参数。您只需将包含要传递到 URL 的数据的列名放在大括号内即可。

假设您有一个包含博客文章的数据库表，每个文章都有一个 slug。为了在 HTML 表格中将文章标题显示为链接，您需要按以下方式定义列

'title' => [
    'type' => 'link',
    'url' => 'http://example.com/posts/{slug}',
];

组件足够智能，可以找到当前记录的 slug 字段并将其提供给 URL。

`JSON`

用于显示来自 JSON 列的数据。如果您的数据库表中有 JSON 列，您可以在 HTML 表格中显示其值。

假设您数据库表中的 contact 列包含地址详细信息。

{"address":{"country":"Turkey","city":"Istanbul","state":"Besiktas"}}

为了仅显示 HTML 表格中的城市，您需要按以下方式定义列

'city' => [
    'type' => 'json',
    'name' => 'City', // Text for column header
    'from' => 'contact', // field that contains json data in a db table
    'value' => 'address.city' // nested json value
];

它将从 contact 列中找到 JSON 数据，然后从地址键中获取城市值，然后在表中显示它。

`操作`

用于在 HTML 表格的每行中显示操作链接。

您需要为链接的 HTML 元素和重定向的 URL 提供键 element 和 url。

'actions' => [
    'type' => 'actions',
    'name' => 'Actions', // Text for column header
    'actions' => [
        [
            'element' => '<button>View</button>',
            'url' => 'http://example.com/users/{id}/profile'
        ],
        [
            'element' => '<button>Edit</button>',
            'url' => 'http://example.com/users/{id}/edit'
        ],
    ]
];

发布视图

您还可以发布视图文件以自定义它们。

您只需运行以下命令。然后视图将被复制到/resources/views/vendor/livewire-smart-table目录。

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

测试

composer test

安全

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

致谢

图兰·卡拉图格

许可证

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

tkaratug / livewire-smart-table

维护者

详细信息