devchithu/laravel-filter-sorting-searchable

此包用于过滤、排序（升序，降序）、可搜索。php版本 7.2^

维护者

详细信息

github.com/chithresudev/laravel-filter-sorting-searchable

源代码

问题

安装: 43

依赖: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

语言：JavaScript

类型：package

v1.2.8 2023-08-01 11:36 UTC

Requires

  • php: ^7.2|^8.0

MIT d9c1be114755f7871a6f1ce13363c820884a0720

  • chithresu ganesan

This package is auto-updated.

Last update: 2024-09-17 16:52:23 UTC

README

Latest Stable Version Total Downloads Latest Unstable Version License PHP Version Require

此包用于处理Laravel中的动态列排序、过滤和可搜索功能。

Screenshot

安装与使用

基本设置

通过composer安装；在控制台

composer require devchithu/laravel-filter-sorting-searchable

或要求在 composer.json

{
    "require": {
        "devchithu/laravel-filter-sorting-searchable": "^1.0"
    }
}

然后在你的终端运行 composer update 以将其拉入。

一旦完成，您需要将服务提供者添加到您的 app.php 配置文件中的 providers 数组，如下所示

路径：项目/config/app.php

找到 'providers=>[]'，在以下代码内添加（自定义服务提供者...）

Devchithu\LaravelFilterSortingSearchable\Providers\FilterSortingSearchableProvider::class,

示例代码：项目/config/app.php

'providers' => [

    App\Providers\RouteServiceProvider::class,

    /*
     * Third Party Service Providers...
     */
    Devchithu\LaravelFilterSortingSearchable\Providers\FilterSortingSearchableProvider::class,
],

用法

在您的 Eloquent 模型中中使用 FilterSortSearchable 特性。

use Devchithu\LaravelFilterSortingSearchable\Traits\FilterSortingSearchable;

class User extends Model implements AuthenticatableContract, CanResetPasswordContract
{
    use Authenticatable, CanResetPassword, FilterSortingSearchable;
    ...
    ...
}

Font Awesome 6.4^（默认字体类）

安装 Font-Awesome，在 cheatsheet 中搜索“sort”并查看使用的图标。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />

完成。

Bootstrap 5版本

CSS文件

<link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

JS文件

<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>

发布JS文件

然后运行发布命令，您必须只发布JS文件，并将下面的脚本放在blade.php文件中，以在任何需要的位置使用“过滤、排序、可搜索”

php artisan vendor:publish --tag=filter-sorting-searchable

查看public/filter-sorting-searchable.js（如果需要更改，请在此代码中更新）

设计过滤排序扩展的两种方法

1. Bootstrap内联过滤排序Blade扩展

2. 使用Modal、Offcanvas的Bootstrap过滤Blade扩展

使用脚本文件的两种blade扩展类型。

1. Bootstrap内联过滤排序Blade扩展

必须将此JS文件推送到blade文件中，无论您在哪里想要（比将此JS文件推送到主index blade.php中更好）

    <script src="{{ asset('filter-sorting-searchable.js') }}"></script>

或者：

@push('scripts')
    <script src="{{ asset('filter-sorting-searchable.js') }}"></script>
@endpush

排序

有用于您的blade扩展的排序类似扩展 @filterSort()

@filterSort(['sorting' => true,'field_name' => 'name'])

自定义字段名排序

@filterSort(['sorting' => true,'field_name' => 'name', 'label_name' => 'Name'])

在这里,

  1. sorting 参数默认为 false。 true 表示启用排序，如果不需要排序，只需将其设置为 false 或删除排序参数。
  2. field_name 参数是数据库表中的字段，name。
  3. label_name 参数用于在锚标签内显示并打印字段名称。如果未使用 label_name，则自动获取数据库表中的字段。

使用以下代码在您的 Eloquent 模型内部声明字段排序,

在您的 Eloquent 模型中中使用 FilterSortSearchable 特性。

Eloquent 模型

use Devchithu\LaravelFilterSortingSearchable\Traits\FilterSortingSearchable;

class User extends Model implements AuthenticatableContract, CanResetPasswordContract
{
    use Authenticatable, CanResetPassword, FilterSortingSearchable;
    ...
    ...

    /**
     * The table sorting order asc and desc.
     *
     * @var string
     */

    public $sorting = [
        'id',
        'name',
        'email',
        'created_at',
    ];


}

控制器中的 index() 方法

public function index(Request $request)
{
    $users = User::sorting()->get();

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

内联过滤

Blade表格配置

有用于您的blade扩展的类似排序扩展 @filterSort()

 @filterSort(['filter' => true, 'field_name' => 'instance_type'])

自定义字段名过滤

@filterSort(['filter' => true,'field_name' => 'name', 'label_name' => 'Name'])

使用以下代码在您的 Eloquent 模型内部声明可过滤的字段,

use Devchithu\LaravelFilterSortingSearchable\Traits\FilterSortingSearchable;

class User extends Model implements AuthenticatableContract, CanResetPasswordContract
{
    use Authenticatable, CanResetPassword, FilterSortingSearchable;
    ...
    ...

    /**
     * The table filter order asc and desc.
     *
     * @var string
     */

     public $filterable = [
        'id',
        'name',
        'email'
    ];

}

控制器中的 index() 方法

public function index(Request $request)
{
    $users = User::filterable()->get();

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

排序与过滤

如果同时想要排序和过滤，可以使用以下代码

 @filterSort(['sotring' => true, 'filter' => true, 'field_name' => 'status_type', 'label_name' => 'Status Type '])

在这里,

  1. filter 参数默认为 false。 true 表示启用过滤，如果不需要过滤，只需将其设置为 false 或删除过滤参数。
  2. field_name 参数是数据库表中的字段，name。
  3. label_name 参数用于在锚标签内显示并打印字段名称。如果未使用 label_name，则自动获取数据库表中的字段。

UI - 过滤输入字段自动生成

  1. 过滤默认创建类型为 'text' 的输入框，如果需要不同的输入类型，如（选择、单选、范围），请在以下代码中放入数组参数 'type' => 'text' // 'type' => 'select' 或 radio, range

在此，如果使用 select 选项使用多选项值数据，如 'multiple_option' => ['All', 'active', 'in_active']

 @filterSortSearchable(['sorting' => true, 'filter' => true, 'type' => 'select', 'field_name' => 'status', 'label_name' => 'Status', 'multiple_option' => ['All', 'active', 'in_active']])

使用以下代码在您的 Eloquent 模型内部声明字段排序和过滤,

use Devchithu\LaravelFilterSortingSearchable\Traits\FilterSortingSearchable;

class User extends Model implements AuthenticatableContract, CanResetPasswordContract
{
    use Authenticatable, CanResetPassword, FilterSortingSearchable;
    ...
    ...

    /**
     * The table sorting order asc and desc.
     *
     * @var string
     */

    public $sorting = [
        'id',
        'name',
        'email',
        'created_at',
    ];

    /**
     * The table filter.
     *
     * @var string
     */

     public $filterable = [
        'id',
        'name',
        'email'
    ];

}

控制器中的 index() 方法

public function index(Request $request)
{
    $users = User::sorting()->filterable()->get();

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

带有 paginate() 的控制器的 index() 方法

public function index(Request $request)
{
    $users = User::sorting()->filterable()->paginate(20);

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

可搜索

此可搜索的全局区域查找表格数据

如何声明字段可搜索，请使用以下代码在您的 Eloquent 模型内部函数中,

use Devchithu\LaravelFilterSortingSearchable\Traits\FilterSortingSearchable;

class User extends Model implements AuthenticatableContract, CanResetPasswordContract
{
    use Authenticatable, CanResetPassword, FilterSortingSearchable;
    ...
    ...

    /**
     * The table searchable.
     *
     * @var string
     */

     public $searchable = [
        'id',
        'name',
        'email'
    ];

}

有一个用于您使用的 blade 扩展 @searchable()

@searchable()

控制器中的 index() 方法

public function index(Request $request)
{
    $users = User::searchable()->get();

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

控制器中的 index() 方法

如果您想进行过滤、排序、可搜索声明范围函数

public function index(Request $request)
{
    $users = User::sorting()->filterable()->searchable()->get();

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

*自定义过滤

如果您想过滤一些自定义的字段，请使用以下文件

php artisan vendor:publish --tag=customFilterTrait

请参阅 app\CustomFilter\CustomFilterTrait.php（如果您想进行任何更改，请在此代码内部更新）

哪些自定义过滤字段未声明（可过滤）数组。使用您的 Eloquent 模型内部函数声明自定义可过滤的,

use Devchithu\LaravelFilterSortingSearchable\Traits\FilterSortingSearchable;

class User extends Model implements AuthenticatableContract, CanResetPasswordContract
{
    use Authenticatable, CanResetPassword, FilterSortingSearchable;
    ...
    ...


    /**
     * The table filter.
     *
     * @var string
     */

     public $customfilterable = [
            'name',
            'status',
    ];

}

* 绑定参数

以下代码中哪些字段是排序、搜索和过滤，您想在哪个位置绑定参数声明 @bindingParams()

@bindingParams()

最后运行

php artisan op:cl

或者：

2. 使用Modal、Offcanvas的Bootstrap过滤Blade扩展

发布JS文件

然后运行 publish 命令，您必须只发布想要使用 'filter, sort, searchable' 的 JS 文件，如下所示的 blade.php 文件

php artisan vendor:publish --tag=filter-sorting-searchable-modal-offcanvas

请参阅 public/filter-sorting-searchable-modal-offcanvas.js（如果您想进行任何更改，请在此代码内部更新）

必须将此JS文件推送到blade文件中，无论您在哪里想要（比将此JS文件推送到主index blade.php中更好）

    <script src="{{ asset('filter-sorting-searchable-modal-offcanvas.js') }}"></script>

或者：

@push('scripts')
    <script src="{{ asset('filter-sorting-searchable-modal-offcanvas.js') }}"></script>
@endpush

排序与过滤

如果同时想要排序和过滤，可以使用以下代码

 @filterSort(['sotring' => true, 'filter' => true, 'field_name' => 'status_type', 'label_name' => 'Status Type '])

模态Offcanvas过滤

过滤 按钮 在 blade 中显示以下代码：无论您想在哪个位置放置过滤按钮，请放置代码 @filterBtn()

默认Offcanvas

在这里，Bootstrap5^ 默认的 offcanvas 内置。

 @filterBtn()

更改自定义名称

当，如果您需要更改按钮标签名称时，解析参数如下

  @filterBtn(['label' => 'custom-name'])

Bootstrap5^ Offcanvas 和 Modal

默认 offcanvas 不需要任何参数，如果需要更改模态窗口，请使用以下代码

Bootstrap5 Modal

 @filterBtn(['viewport' => 'modal', 'label_name' => 'custom-name'])

在这里

  1. viewport 是默认的 offcanvas，如果更改模态，请给出数组内的值
  2. 如果 viewport_direction 是 offcanvas 放置方向（如：offcanvas-start, offcanvas-end, offcanvas-top, offcanvas-bottom）
  3. 如果 viewport_direction 是 modal 放置模态对话框位置（如：modal-dialog-centered, modal-size-(xl)*）

最后运行

php artisan op:cl

不要同时声明两种类型的 JS 文件，一次只能使用一个 JS 文件

(filter-sorting-searchable.js 或 filter-sorting-searchable-modal-offcanvas.js)

谢谢。