Списки (Grids) — это динамический элемент системы позволяющий генерировать и выводить таблицы с данными в реальном времени.
Что в свою очередь позволяет работать и управлять большим кол-вом данных и создавать места взаимодействия с данными на страницах модулей.
Путь до контроллера генерации таблицы
- usr
- modules
- {module-name}
- UI
- WEB
- Grids
- GridControllerName.php
- ...
Путь до шаблона действий с элементом таблицы
- usr
- modules
- {module-name}
- UI
- WEB
- Views
- manager
- grid
- actions.blade.php
use Boot\System\Grid\GridModern;
protected function init()
{
// Заголовок таблицы
$this->title = 'Заголовок таблицы';
// Опции таблицы (в данном случае сортировка)
$this->options = array(
'sort' => [
'name' => 'id',
'order' => 'DESC'
],
);
// Опции панели навигации (WIP)
$this->nav = array(
'excel' => true,
'exceltext' => __('grid.export.excel'),
'trash' => true,
'trashtype' => 'null',
'trashtext' => __('grid.trash.show'),
'trashfield' => $this->namespace . '.deleted_at',
);
// Подключение к необходимой таблице
$this->db = DB::table('Имя необходимой таблицы в БД');
// Настройка столбцов
$this->cols = array(
'Идентификатор столбца' => array(
...
),
...
);
Путь к файлу config: Папка проекта/config/grid.config.php
Массив default собрал в себе все значения заданные по умолчанию для работы с компонентом Grid.
Определяет работу со столбцами в таблице
Совет
Типы полей используется как фильтры для формирования значений по умолчанию.
Доступные типыinput,select,date_range,actions
Заголовок столбца таблицы
'Имя столбца' => array(
'title' => 'Ваш заголовок для столбца',
...
),
# По умолчанию title => '';
Параметр type определяет тип столбца таблицы.
Используется для формирования полей поиска и сортировки со всеми привязанными параметрами к данному типу поля.
'Имя столбца' => array(
'type' => 'Тип вашего столбца',
...
),
# Доступные привязанные поля для type:
'input' - Стандартное поле поиска input
'select' - Вытадающий список на select
'date' - Поле выбора конкретной даты (WIP)
'date_range' - Поле выбора диапазона дат (ОТ - ДО)
'actions' - Столбец с кнопками дейсвий
# По умолчанию type => 'input';
Параметр label используется для выбора текста placeholder по умолчанию и основан на
типах поддерживаемых полей ввода и выбора.
Для того что бы задать текст label необходимо указать тип поля через
параметр type используя значения input, select, date_range,actions
или задать label в ручную.
Добавляя свои типы в файл grid.config.php можно использовать и изменять значения текста для label.
Если type задан то по умолчанию для label будет использован тип поля указанного в type.
Если задан type и label будет использовано значение указанное в label игнорируя type.
Если type не задан то по умолчанию для label будет использован тип поля input.
'Имя столбца' => array(
'label' => 'Тект вашего label',
...
),
# По умолчанию текст по типам
'input' => 'Найти',
'select' => 'Выбрать',
'date_range' => 'Выбрать дату',
'actions' => 'Действия',
Параметр render определяет каким образом обернуть выводимые данные в полях таблицы.
К примеру для очень длинного текста, что-бы избежать чрезмерного "растягивания" одного из столбцов таблицы можно использовать
render = text что создает обертку для выводимого значения скрывающую часть текста который выходить за ширины самого столбца за "..."
simple - Выводимый текст внутри простого блока div.render без скрытия.
input - Выводимый текст будет помещен в тег input что в свою очередь скроет текст внутри себя.
text - Текст будет скрыт через text-truncate (bootstrap) внутри div.render блока.
Для render можно использовать tooltip что бы увидеть весь текст во всплывающей подсказке. Пока только для вывода текста.
'Имя столбца' => array(
'render' => 'render', // Тип render
...
),
# По умолчанию по типам
# 'render' => 'default'
Параметр format_date может быть использован для полей с type date_range
в качестве шаблона формата даты.
'Имя столбца' => array(
'format_date' => 'Формат даты в формате d.m.Y',
...
),
# По умолчанию по типам (Задается в config файле grid.config.php)
# 'date_range' => 'd.m.Y'
Параметр visible определяет видимость столбца.
'Имя столбца' => array(
'visible' => bool, // true || false
...
),
# По умолчанию
'visible' => true
Подсказки для полей с render.
Совет
Не используйте tooltip вместе с render если выводится теги html. Только для обычного текста!
Для html используйте popover.
'Имя столбца' => array(
'render' => 'render', // Тип render обязателен
'tooltip' => true // true || false || string
...
),
# По умолчанию
'tooltip' => null
Всплывающие окна для полей с render. Является более универсальным способом вывода уведомлений.
Совет
Используйте popover вместе с render если выводится теги html.
'Имя столбца' => array(
'render' => 'render', // Тип render обязателен
'popover' => true
...
),
# По умолчанию
'popover' => null
Ширина столбца. Указывается в процентах или задается int значение которое будет преобразованно в проценты. Так же может принимать bool что бы установить значение автоматическим.
'Имя столбца' => array(
'width' => 5, // int 5 = string 5%
...
),
# По умолчанию
'width' => true
Дополнительные стили css применяемые к столбцу.
'Имя столбца' => array(
'className' => 'css Классы как для атребута class', // text-center p-1 и тд.
...
),
По умолчанию
'className' => false
Параметр icon задает иконку для типа поля по умолчанию.
Иконки можно задать передав в icon значение иконки равное набору иконок feather
или указать свой css класс наборов подключенных через css.
'Имя столбца' => array(
'type' => 'Тип вашего поля',
# или
'icon' => 'settings', // набор feather
# или
'icon' => 'fa-light fa-users', // набор Font Awesome
...
),
# По умолчанию по типам
# 'actions' => 'settings'
class GridControllerName extends GridModern
{
}