表格中的排序和过滤

建议编辑

本指南是教程“数据管理”的延续,我们将帮助用户更快地在表格中查找信息。

表格中的排序完全基于对 Http 请求的自动识别,并适用于 Eloquent 模型。为了启用它,你需要添加 Filterable trait 并定义允许的列:

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Orchid\Attachment\Attachable;
use Orchid\Attachment\Models\Attachment;
use Orchid\Filters\Filterable;
use Orchid\Screen\AsSource;

class Post extends Model
{
    use AsSource, Attachable, Filterable;

    /**
     * 可批量分配的属性。
     *
     * @var array
     */
    protected $fillable = [
        'title',
        'description',
        'body',
        'author',
        'hero'
    ];

    /**
     * 可以应用 http 排序的列名
     *
     * @var array
     */
    protected $allowedSorts = [
        'title',
        'created_at',
        'updated_at'
    ];
}

现在,当调用 filters 方法时,数据库查询将被修改。在 PostListScreen 屏幕的数据源方法中,它将如下所示:

/**
 * 查询数据。
 *
 * @return array
 */
public function query(): array
{
    return [
        'posts' => Post::filters()->defaultSort('id')->paginate()
    ];
}

现在数据将会不同,具体取决于 url 地址中的参数,例如:

  • http://localhost:8000/admin/posts?sort=id – 按识别号升序排列记录
  • http://localhost:8000/admin/posts?sort=-id – 降序排列

注意。 这种方式无法对相关模型进行排序。

为了在图形界面中显示排序功能,我们必须在 PostListLayout 中为必要的表格列调用 sort 方法:

namespace App\Orchid\Layouts;

use App\Models\Post;
use Orchid\Screen\TD;
use Orchid\Screen\Actions\Link;
use Orchid\Screen\Layouts\Table;

class PostListLayout extends Table
{
    /**
     * 数据源。
     *
     * @var string
     */
    public $target = 'posts';

    /**
     * @return TD[]
     */
    public function columns(): array
    {
        return [
            TD::make('title')
                ->sort()
                ->render(function (Post $post) {
                    return Link::make($post->title)
                        ->route('platform.post.edit', $post);
                }),

            TD::make('created_at', '创建时间')
                ->sort(),

            TD::make('updated_at', '最后编辑')
                ->sort(),
        ];
    }
}

之后,列标题将响应点击并改变排序位置。

Filterable trait 不仅允许设置排序,还可以进行简单的 Http 过滤,将其设置回模型并添加一个新属性:

use Orchid\Filters\Types\Like;

/**
 * 可以应用 http 过滤的列名
 *
 * @var array
 */
protected $allowedFilters = [
    'title' => Like::class,
];

然后使用文本类型为标题列调用新的 filter 方法:

use Orchid\Screen\Fields\Input;

TD::make('title')
    ->sort()
    ->filter(Input::make())
    ->render(function (Post $post) {
        return Link::make($post->title)
            ->route('platform.post.edit', $post);
    }),

之后,一个图标将会在列名称旁边打开,打开文本字段,设置其值可以过滤结果。

请注意。 这样的表达式将通过 sqllike 过滤执行。为了使搜索不区分大小写,你需要检查数据库编码。

现在我们的表格具有一定的交互性,并帮助用户更快地找到信息。要详细了解并创建复杂过滤器,需要熟悉过滤部分。

我们的朋友