info@webapplex.ru
 +7 (905) 873-12-67

Gridview виджет в Yiiframework 2.x

Виджет Gridview используется для отображения различных данных в сетке, таких как текст, изображения и имеет множество функций, таких как сортировка, постраничная разбивка и т.д.

Сгенерированный пример Gridview 

<?= GridView::widget([ // объявление виджета
    'dataProvider' => $dataProvider, // входящие данные
    'filterModel' => $searchModel, // фильтрация и поиск
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        // Атрибуты таблицы
        'categoryid',
        'categoryname',
        'parentid',
        'createdon',
        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

Свойство options в Gridview 

По умолчанию класс Gridview называется 'grid-view', если мы хотим его изменить добавляем свойство options

<?= GridView::widget([ // объявление виджета
    'dataProvider' => $dataProvider, // входящие данные
    'filterModel' => $searchModel, // фильтрация и поиск
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        // Атрибуты таблицы
        'categoryid',
        'categoryname',
        'parentid',
        'createdon',
        ['class' => 'yii\grid\ActionColumn'],
    ],
    'options'=>['class'=>'mynewclass'], // новый класс
]); ?>

Свойство options таблицы в Gridview 

Таблица с данными в GridView по умолчанию содержит классы ‘table table-striped table-bordered', для смены этих классов добавляем свойство 'tableOptions'

<?= GridView::widget([ // объявление виджета
    'dataProvider' => $dataProvider, // входящие данные
    'filterModel' => $searchModel, // фильтрация и поиск
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        // Атрибуты таблицы
        'categoryid',
        'categoryname',
        'parentid',
        'createdon',
        ['class' => 'yii\grid\ActionColumn'],
    ],
    'tableOptions'=>['class'=>'mytableclass'], // класс таблицы
]); ?>

Добавляем стили к записям таблицы 

Для этого используем свойстов 'rowOptions'

<?= GridView::widget([ // объявление виджета
    'dataProvider' => $dataProvider, // входящие данные
    'filterModel' => $searchModel, // фильтрация и поиск
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        // Атрибуты таблицы
        'categoryid',
        'categoryname',
        'parentid',
        'createdon',
        ['class' => 'yii\grid\ActionColumn'],
    ],
    'rowOptions'=>function ($model, $key, $index, $grid){
			$class=$index%2?'odd':'even';  // стилизация четной и нечетной строки
			return array('key'=>$key,'index'=>$index,'class'=>$class);
		},
]); ?>

Формат макета Gridview

По умолчанию Gridview содержит постраничную разбивку (pager), информацию о количестве записей (summary), сортировку (sorter) и саму таблицу с данными (items).  Настраивается шаблон gridview через свойство  layout .

<?= GridView::widget([ // объявление виджета
    'dataProvider' => $dataProvider, // входящие данные
    'filterModel' => $searchModel, // фильтрация и поиск
    'layout'=>"{sorter}\n{pager}\n{summary}\n{items}",
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        // Атрибуты таблицы
        'categoryid',
        'categoryname',
        'parentid',
        'createdon',
        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

Скрытие, отображение информации отображающей количество записей, заголовка и футера Griedview

<?= GridView::widget([ // объявление виджета
    'dataProvider' => $dataProvider, // входящие данные
    'filterModel' => $searchModel, // фильтрация и поиск
    'summary'=>'', // скрыть
    'showFooter'=>true, // показать
    'showHeader' => true, // показать
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        // Атрибуты таблицы
        'categoryid',
        'categoryname',
        'parentid',
        'createdon',
        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

Скрытие, отображение не заполненного Griedview

<?= GridView::widget([ // объявление виджета
    'dataProvider' => $dataProvider, // входящие данные
    'filterModel' => $searchModel, // фильтрация и поиск
    'showOnEmpty'=>true, // показывать всегда
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        // Атрибуты таблицы
        'categoryid',
        'categoryname',
        'parentid',
        'createdon',
        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

Замена пустых ячеек

<?= GridView::widget([ // объявление виджета
    'dataProvider' => $dataProvider, // входящие данные
    'filterModel' => $searchModel, // фильтрация и поиск
    'emptyCell'=>'-', // если ячейка пустая, отобразится прочерк
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        // Атрибуты таблицы
        'categoryid',
        'categoryname',
        'parentid',
        'createdon',
        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

Кнопки действия в GridView

<?= GridView::widget([
     'dataProvider' => $dataProvider,
     'filterModel' => $searchModel,
     'columns' => [
         ['class' => 'yii\grid\SerialColumn'],
         .........
         [
	'class' => 'yii\grid\ActionColumn',
	'header'=>'Кнопки действия', // заголовок столбца
	'headerOptions' => ['width' => '100'], // ширина столбца
	'template' => '{view} {update} {delete}{link}', // кнопка просмотра, изменения, удаления, ссылка
],
     ],
 ]); ?>

Настройка кнопок

<?= GridView::widget([
     'dataProvider' => $dataProvider,
     'filterModel' => $searchModel,
     'columns' => [
         ['class' => 'yii\grid\SerialColumn'],
         .........
         [
	'class' => 'yii\grid\ActionColumn',
	'header'=>'Кнопки действия', // заголовок столбца
	'headerOptions' => ['width' => '100'], // ширина столбца
	'template' => '{view} {update} {delete}{link}', // кнопка просмотра, изменения, удаления, ссылка
	'buttons' => [
		'update' => function ($url,$model) {
			return Html::a(
				'', 
				$url);
		},
		'link' => function ($url,$model,$key) {
				return Html::a('Определенное действие', $url);
		},
	],
],
     ],
 ]); ?>

Формат данных в столбцах GridView

Для назначения атрибутов ячейкам таблицы GridView используем параметр 'contentOptions'. Атрибуты таблицы могут быть определены как анонимной функцией, так и массивом. Первый и второй вариант наглядно это показывают.

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        ...
        // Вариант первый
        [
            'attribute'=>'parent_id',
            'label'=>'Родительская категория',
            'contentOptions' =>function ($model, $key, $index, $column){
                return ['class' => 'name'];
            },
            'content'=>function($data){
                return "value";
            }
        ],
        // Вариант второй
        [
            'attribute'=>'category_image',
            'contentOptions' =>['class' => 'table_class','style'=>'display:block;'],
            'content'=>function($data){
                return "value";
            }
        ],
        ...
        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

Добавляем изображение

<?=  GridView::widget([
     'dataProvider' => $dataProvider,
     'filterModel' => $searchModel,
     'columns' => [
         ['class' => 'yii\grid\SerialColumn'],
.....
[
             'label'=>'Изображение',
             'format'=>'raw',
             'value' => function($data){
                 $url = "http://www.mysite.ru/logo.png";
                 return Html::img($url,['alt'=>'myimage']); 
             }
],
....
         ['class' => 'yii\grid\ActionColumn'],
     ],
 ]); ?>

Добавляем ссылку

<?= GridView::widget([
     'dataProvider' => $dataProvider,
     'filterModel' => $searchModel,
     'columns' => [
         ['class' => 'yii\grid\SerialColumn'],
.........
[
             'label'=>'Ссылка',
             'format'=>'raw',
             'value' => function($data){
                 $url = "http://www.mysite.ru;
                 return Html::a('Перейти, $url, ['title' => 'Перейти']); 
             }
],
.........
         ['class' => 'yii\grid\ActionColumn'],
     ],
 ]); ?>

Получение данных из связанной таблици

<?= GridView::widget([
     'dataProvider' => $dataProvider,
     'filterModel' => $searchModel,
     'columns' => [
         ['class' => 'yii\grid\SerialColumn'],
.........
[
	'attribute'=>'parentid',
	'label'=>'Имя родительского столбца',
	'format'=>'text',//raw, html
	'content'=>function($data){
		return $data->getParentName(); // функция получения имени из родительской таблицы
		}
],
// ***** или *****
'parent.categoryname',
.........
         ['class' => 'yii\grid\ActionColumn'],
     ],
 ]); ?>

Модель родительской таблицы

namespace app\models;
use Yii;
........
class TblCategory extends \yii\db\ActiveRecord
{
	.........
    public function getParent()
    {
        return $this->hasOne(TblCategory::className(), ['categoryid' => 'parentid']); // связь таблиц один ко многим
    }

	public function getParentName(){ // функция получения значения из родительской таблицы
		$model=$this->parent;
		return $model?$model->categoryname:'';
	}
	..........
}

Формат даты

<?= GridView::widget([
     'dataProvider' => $dataProvider,
     'filterModel' => $searchModel,
     'columns' => [
         ['class' => 'yii\grid\SerialColumn'],
.........
[
	'attribute'=>'createdon',
	'label'=>'Created On',
	'format'=>'datetime',//date,datetime, time
	'headerOptions' => ['width' => 300'],
],
[
            'attribute' => 'createdon',
            //'format' => ['raw', 'Y-m-d H:i:s'],
           'format' =>  ['date', 'php:Y-m-d H:i:s'],
            'options' => ['width' => '300']
],
.........
         ['class' => 'yii\grid\ActionColumn'],
     ],
 ]); ?>

Фильтр выпадающий список

Вариант 1

<?= GridView::widget([
     'dataProvider' => $dataProvider,
     'filterModel' => $searchModel,
     'columns' => [
         ['class' => 'yii\grid\SerialColumn'],
.........
[
	'attribute'=>'isactive',
	'filter'=>array("1"=>"Активный","2"=>"Не активный"),
	//TblCategory::get_status(), 
],
.........
         ['class' => 'yii\grid\ActionColumn'],
     ],
 ]); ?>

Вариант 2

<?= GridView::widget([
     'dataProvider' => $dataProvider,
     'filterModel' => $searchModel,
     'columns' => [
         ['class' => 'yii\grid\SerialColumn'],
.........
[
	'attribute'=>'isactive',
	'filter'=>TblCategoryStatus::get_status(), // функция получения статуса
],
.........
         ['class' => 'yii\grid\ActionColumn'],
     ],
 ]); ?>

Функция получения статуса из модели

public static  function  get_status(){
      $cat = TblCategoryStatus::find()->all(); // выбор всего из таблицы
      $cat = ArrayHelper::map($cat, 'id', 'name'); // приводим к формату выпадающего списка
      return $cat;
}