Сортировка и фильтрация в таблице
Suggest editЭто руководство продолжение учебника “Управление данными”, в котором мы будем помогать пользователю быстрее находить информацию в таблицах.
Сортировка в таблице полностью основана на автоматическом распознавании Http
запроса и применяется к моделям Eloquent
. Для того чтобы включить её, необходимо добавить трейт Filterable
и определить разрешённые колонки:
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;
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'title',
'description',
'body',
'author',
'hero'
];
/**
* Name of columns to which http sorting can be applied
*
* @var array
*/
protected $allowedSorts = [
'title',
'created_at',
'updated_at'
];
}
Теперь при вызове метода filters
запрос к базе данных будет модифицирован.
В методе источника данных у экрана PostListScreen
, это будет выглядеть следующим образом:
/**
* Query data.
*
* @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
– Сортировка по убыванию
Обратите внимание. Таким способом вы не можете сортировать связанные модели.
Для того чтобы отобразить в графическом интерфейсе возможность сортировки, мы должны вызвать метод sort
для необходимых колонок таблицы в PostListLayout
:
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
{
/**
* Data source.
*
* @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', 'Created')
->sort(),
TD::make('updated_at', 'Last edit')
->sort(),
];
}
}
После этого заголовок колонки будет реагировать на нажатие и менять положение сортировки.
Трейт Filterable
позволяет устанавливать не только сортировку, но и простую Http
фильтрацию. Для её установки вернёмся к модели и добавим новое свойство:
use Orchid\Filters\Types\Like;
/**
* Name of columns to which http filter can be applied
*
* @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);
}),
После этого рядом с именем колонки появится иконка открывающая текстовое поле, устанавливая значение которого можно фильтровать результаты.
Обратите внимание. Такое выражение будет выполнять
sql
с фильтрациейlike
. Для того чтобы поиск был не чувствительным к регистру, вам необходимо проверить кодировку базы данных.
Теперь наша таблица обладает некоторой интерактивностью и помогает пользователю быстрее найти информацию. Для детального знакомства и для создания сложных фильтров, необходимо ознакомиться с разделом “Фильтрация”.