Дмитрий Елисеев » Блог » Программирование » Создаём свои типы ячеек для CGridView в Yii

Создаём свои типы ячеек для CGridView в Yii

В предыдущем рецепте по стилизации виджетов мы рассмотрели, как можно кастомизировать стандартные и персональные виджеты Yii, упростив при этом код представлений до минимума. В этом уроке мы на примере грида записей своего мини-блога попробуем улучшить вид и минимизировать код ячеек виджета CGridView.

Представим, что записи блога на Yii содержат дату, изображение, заголовок и текст. Тогда стандартный грид в панели управления можно вывести так:

<?php
<?php $this->widget('zii.widgets.grid.СGridView', array(
    'dataProvider' => $model->search(),
    'filter' => $model,   
    'columns' => array(
        'date',
        'title',
        array(
            'class' => 'СButtonColumn',
        ),
    ),
)); ?>

Но это будет смотреться не очень стильно. Для большего удобства было бы лучше добавить в грид превью изображений и сделать даты и заголовки постов ссылкам на страницу редактирования записи.

Мы можем это сделать так:

<?php
<?php $this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider' => $model->search(),
    'filter' => $model,
    'columns' => array(
        array(
            'name' => 'image',
            'value' => '$data->image ? CHtml::link(CHtml::image("/upload/images/" . $data->image), Yii::app()->controller->createUrl("update", array("id" => $data->id))) : ""',
            'type' => 'html',
        ),
        array(
            'name' => 'date',
            'value' => 'CHtml::link(CHtml::encode($data->date), Yii::app()->controller->createUrl("update", array("id" => $data->id)))',
            'type' => 'html',
        ),
        array(
            'name' => 'title',
            'value' => 'CHtml::link(CHtml::encode($data->title), Yii::app()->controller->createUrl("update", array("id" => $data->id)))',
            'type' => 'html',
        ),
        array(
            'class' => 'СButtonColumn',
            'viewButtonImageUrl' => Yii::app()->request->baseUrl . '/images/admin/view.png';
            'updateButtonImageUrl' => Yii::app()->request->baseUrl . '/images/admin/edit.png';
            'deleteButtonImageUrl' => Yii::app()->request->baseUrl . '/images/admin/del.png';
        ),
    ),
)); ?>

Здесь мы, вывели изображения постов, сделали текст ячеек ссылками на редактирование записи и поменяли иконки кнопок управления.

Но полёт фантазии этим иногда не ограничивается. Порой в сети можно встретить и такое:

'value'=> 'file_exists($_SERVER[DOCUMENT_ROOT] . 
    Yii::app()->urlManager->baseUrl . "/images/assortiment_img/thumb/" .
    $data->id . "_assortiment.jpg") ? Yii::app()->urlManager->baseUrl .
    "/images/assortiment_img/thumb_small/" . $data->id .
    "_assortiment.jpg" : Yii::app()->urlManager->baseUrl .
    "/images/assortiment_img/thumb_small/no_photo.gif"',

Мы собрали все ссылки в каждой ячейке явно. Копировать такие длинные и сложные строки из файла в файл неудобно. Попробуем это автоматизировать и упростить.

Стилизация колонок CGridView

Итак, у нас изображение, дата и заголовок статьи должны быть ссылками на действие редактирования. Чтобы не собирать каждый раз HTML-код со ссылкой нам необходимо сделать ячейки, которые бы делали это сами.

В нашем примере строка

'class' => 'СButtonColumn',

указывает, какой класс будет использоваться для генерации заголовка и ячеек столбца. Если класс не указан, то по умолчанию используется CDataColumn. Содержимое ячейки генерируется в его методе CDataColumn::renderDataCellContent. Следовательно, чтобы создать любой новый тип ячейки, можно переопределить данный метод в классе-наследнике и указывать этот класс в списке колонок.

Нам нужны пока два типа ячеек: с простой ссылкой на редактирование записи и с изображением-ссылкой.

Напишем первый класс на основе CDataColumn:

/**
 * @author ElisDN <mail@elisdn.ru>
 * @link https://elisdn.ru
 */
 
Yii::import('zii.widgets.grid.CDataColumn');
 
class DLinkColumn extends CDataColumn
{
    public $link;
 
    protected function renderDataCellContent($row, $data)
    {
        $url = $this->getItemUrl($row, $data);
        $value = $this->getItemValue($row, $data);
        $text = $this->grid->getFormatter()->format($value, $this->type);
        echo $value === null ? $this->grid->nullDisplay : CHtml::link($text, $url);
    }
 
    protected function getItemValue($row, $data)
    {
        if (!empty($this->value))
            return $this->evaluateExpression($this->value, array('data' => $data, 'row' => $row));
        elseif (!empty($this->name))
            return CHtml::value($data, $this->name);
        return null;
    }
 
    protected function getItemUrl($row, $data)
    {
        if (!empty($this->link))
            return $this->evaluateExpression($this->link, array('data' => $data, 'row' => $row));
        elseif ($this->link !== false)
            return Yii::app()->controller->createUrl('update', array('id' => $data->getPrimaryKey()));
        return '';
    }
}

Он автоматически оборачивает текст ячейки в ссылку.

Теперь вместо записи

array(
    'name' => 'title',
    'value' => 'CHtml::link(CHtml::encode($data->title), Yii::app()->controller->createUrl("update", array("id" => $data->id)))',
    'type' => 'html',
),

можно просто указать столбцу нужный класс:

array(
    'name' => 'title',
    'class' => 'DLinkColumn',
),

Этот столбец ввиду наследования поддерживает все атрибуты стандартного столбца CDataColumn, то есть можно также указывать value, header, type, htmlOptions и т.д.; использовать сортировку и фильтрацию.

Но мы намеренно добавили новый параметр link, используя который можно изменить ссылку на любую другую. Если его не указывать, то будет автоматически подставляться адрес на действие update текущего контроллера.

Вот, например, подстановка ссылки на просмотр записи:

array(
    'name' => 'title',
    'class' => 'DLinkColumn',
    'link' => '$data->getUrl()',
),

Для этого в модели должен быть метод getUrl. И вообще, удобно добавлять метод getUrl ко всем моделям, у которых есть страница просмотра, и обращаться к ним по $model->url:

array(
    'name' => 'title',
    'class' => 'DLinkColumn',
    'link' => '$data->url',
),
array(
    'name' => 'author_id',
    'class' => 'DLinkColumn',
    'value'=> '$data->author->username',
    'link' => '$data->author->url',
),
array(
    'name' => 'category_id',
    'class' => 'DLinkColumn',
    'value'=> '$data->category->title',
    'link' => '$data->category->url',
),

Второй тип столбца, который нам нужен, аналогичен первому, но должен выводить изображение со ссылкой. Чтобы не повторять в нём метод getItemUrl возьмём его прямо из DLinkColumn:

/**
 * @author ElisDN <mail@elisdn.ru>
 * @link https://elisdn.ru
 */
 
class DImageLinkColumn extends DLinkColumn
{
    public $width = 0;
    public $height = 0;
 
    protected function renderDataCellContent($row,$data)
    {
        $url = $this->getItemUrl($row, $data);
        $value = $this->getItemValue($row, $data);
 
        $options = $this->getImageOptions();
        $image = CHtml::image($value, '', $options);
 
        echo $value===null ? $this->grid->nullDisplay : CHtml::link($image, $url);
    }
 
    protected function getImageOptions()
    {
        $options = array();
 
        if ($this->width)
            $options['width'] = $this->width;
        if ($this->height)
            $options['height'] = $this->height;
 
        return $options;
    }
}

Эта колонка теперь содержит дополнительные поля link, width и height.

Теперь вместо ручного генерирования ссылки

array(
    'name' => 'image',
    'value' => '$data->image ? CHtml::link(CHtml::image("/upload/images/" . $data->image), Yii::app()->controller->createUrl("update", array("id" => $data->id))) : ""',
    'type' => 'html',
),

мы аналогично указываем класс столбца и адрес изображения

array(
    'class' => 'DImageLinkColumn',
    'value' => '"/upload/images/blog/" . $data->image',
    'width' => 150,
),

Ещё приятнее создать метод getThumbUrl в каждой модели

class Post extends CActiveRecord
{
    const IMAGE_PATH = 'upload/images/blog';
    // ...
 
    private $_url;
 
    public function getUrl()
    {
        if ($this->_url === null)
            $this->_url = Yii::app()->createUrl('post/view', array('id'=>$this->id));
        return $this->_url;    
    }
 
    public function getImageUrl()
    {
        return $this->image ? $this->getImagePath() . '/' . $this->image : '';    
    }
 
    public function getThumbUrl()
    {
        return $this->image ? $this->getImagePath()  . '/prev_' . $this->image : '';    
    }
 
    protected funtion getImagePath()
    {
        return Yii::app()->request->baseUrl . '/' . self::IMAGE_PATH;
    }
}

и во всех гридах использовать его:

array(
    'class' => 'DImageLinkColumn',
    'value' => '$data->getThumbUrl()',
    'width' => 150,
),

Замена иконок кнопок в CButtonColumn

Следующий шаг – замена сложной записи по изменению изображений кнопок просмотра, редактирования и удаления

array(
    'class' => 'СButtonColumn',
    'viewButtonImageUrl' => Yii::app()->request->baseUrl . '/images/admin/view.png';
    'updateButtonImageUrl' => Yii::app()->request->baseUrl . '/images/admin/edit.png';
    'deleteButtonImageUrl' => Yii::app()->request->baseUrl . '/images/admin/del.png';
),

на более простую и настраиваемую независимо форму.

Фактически, здесь мы видим использование класса СButtonColumn с указанием значений трёх его публичным полей, как и при задании опций виджетам. Но колонка грида – это не виджет, генерируемый с помощью фабрики widgetFacory, поэтому использовать скины для классов колонок мы не можем. Поэтому стоит воспользоваться наследованием с переопределением параметров исходного класса CButtonColumn:

Yii::import('zii.widgets.grid.CButtonColumn');
 
class DButtonColumn extends CButtonColumn
{
    public function init()
    {
        if ($this->viewButtonImageUrl === null)
            $this->viewButtonImageUrl = Yii::app()->request->baseUrl . '/images/admin/view.png';
        if ($this->updateButtonImageUrl === null)
            $this->updateButtonImageUrl = Yii::app()->request->baseUrl . '/images/admin/edit.png';
        if ($this->deleteButtonImageUrl === null)
            $this->deleteButtonImageUrl = Yii::app()->request->baseUrl . '/images/admin/del.png';
 
        parent::init();
    }
}

Перед инициализацией колонки мы проверяем эти параметры на заполнение, и если изображения не указаны пользователем, то подставляем свои.

С этим классом теперь вместо записи

array(
    'class' => 'СButtonColumn',
    'viewButtonImageUrl' => Yii::app()->request->baseUrl . '/images/admin/view.png';
    'updateButtonImageUrl' => Yii::app()->request->baseUrl . '/images/admin/edit.png';
    'deleteButtonImageUrl' => Yii::app()->request->baseUrl . '/images/admin/del.png';
),

можно обойтись всего одной строкой

array(
    'class' => 'DButtonColumn',
),

В совокупности это упростит наш исходный фрагмент кода

<?php
<?php $this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider' => $model->search(),
    'filter' => $model,
    'columns' => array(
        array(
            'name' => 'image',
            'value' => '$data->image ? CHtml::link(CHtml::image("/upload/images/" . $data->image), Yii::app()->controller->createUrl("update", array("id" => $data->id))) : ""',
            'type' => 'html',
        ),
        array(
            'name' => 'date',
            'value' => 'CHtml::link(CHtml::encode($data->date), Yii::app()->controller->createUrl("update", array("id" => $data->id)))',
            'type' => 'html',
        ),
        array(
            'name' => 'title',
            'value' => 'CHtml::link(CHtml::encode($data->title), Yii::app()->controller->createUrl("update", array("id" => $data->id)))',
            'type' => 'html',
        ),
        array(
            'class' => 'СButtonColumn',
            'viewButtonImageUrl' => Yii::app()->request->baseUrl . '/images/admin/view.png';
            'updateButtonImageUrl' => Yii::app()->request->baseUrl . '/images/admin/edit.png';
            'deleteButtonImageUrl' => Yii::app()->request->baseUrl . '/images/admin/del.png';
        ),
    ),
)); ?>

до состояния

<?php
<?php $this->widget('zii.widgets.grid.СGridView', array(
    'dataProvider' => $model->search(),
    'filter' => $model,
    'columns' => array(
        array(
            'class' => 'DImageLinkColumn',
            'value' => '$data->getThumbUrl()',
        ),
        array(
            'name'=>'date',
            'class' => 'DLinkColumn',
        ),
        array(
            'name' => 'title',
            'class' => 'DLinkColumn',
        ),
        array(
            'class' => 'DButtonColumn',
        ),
    ),
)); ?>

Аналогичный подход с наследованием позволяет нам сделать любой персональный тип колонок, например DToggleColumn или image-column.

Дата:

Метки: Yii PHP

Поддержать проект

Другие статьи

Разделение кода на модули и микросервисы

На сайте скринкастов начинаем программирование доменной модели через практику Event Storming проекта аукциона. Но помимо этого будет крайне полезно рассмотреть примеры из разных предметных областей. Для этого мы проведём большой практический стрим про разделение кода на модули и микросервисы.

Структуры с процедурами или объекты?

Мы с вами сочинили много кода в проектах, где мы активно пользуемся контейнером внедрения зависимостей. Многие статьи рассматривают только внедрение сервис-контейнера, но не рассказывают о практиках написания самих сервисов. Об этом мы подробно расскажем в следующей части. Но перед этим нужно договориться об используемой в будущем терминологии и определиться с понятием сервиса. Поэтому сегодня рассмотрим, чем сервисы отличаются от других вещей в программном коде.

Мы это сделали! Видеоотчёт

Все видеозаписи уроков обработаны, тайм-коды проставлены, вопросы отвечены. Наш самый крупный четырёхмесячный мастер-класс по Symfony завершён. Вот что у нас с вами получилось...

Делаем Sitemap для проекта на Yii

Поразмышлять о вариантах создания карты сайта для проекта на фрэймворке Yii сподвиг этот вопрос на русскоязычном форуме. Наверняка это пригодится для любого более-менее насыщенного страницами проекта. Каждый, несомненно, делает это по своему. Конечно же, можно выбрать любое другое готовое расширение, но для образовательных целей попробуем придумать пару вариантов решения этого вопроса.

Подходы к стилизации виджетов в Yii

В комплекте Yii Framework изначально поставляется набор виджетов Zii. Программисты знакомятся с обилием возможностей по стилизации виджетов, начинают кастомизировать, но не сразу доходят до удобных способов стилизации. В этом рецепте мы попробуем максимально сократить размеры копируемого из вида в вид кода.

Комментарии

Denis LED

В этом моменте случайно нет опечатки?

можно обойтись всего одной строкой
array(
    'class' => 'ButtonColumn', // точно не DButtonColumn?
),

ну и ниже
"до состояния"...

Дмитрий Елисеев

Спасибо. Исправил.

red-ogurez

У вас ошибка в

'valie'=> '$data->author->username', // должно наверное быть 'value'
'valie'=> '$data->category->title', // должно наверное быть 'value'

Дмитрий Елисеев

Спасибо, исправил. Мимо клавиши промахнулся.

Алексей

Прошу прощение за тупой вопрос, но:
"Напишем первый класс на основе CDataColumn:"
а где мы этот свой класс пишем?

Дмитрий Елисеев

Одноимённым файлом в protected/components, например.

Катя

Не могли бы Вы подсказать?

На главной странице через action admin выводится grid и поиск по нему. Хочу дать возможность пользователю дать выбрать доп.поля. Для этого создаю action ajax. Когда ввожу данные, находясь по урл article/ajax, пост приходит нормальным, а когда по article/admin в посте приходит еще html код страницы. Что я делаю не так?

Вот код:

public function actionAdmin()
{
	$model=new Article('search');
	$model->unsetAttributes();  

	if(isset($_GET['Article']))
		$model->attributes=$_GET['Article'];
		print_r($_POST);

	$this->render('admin',array(
		'model'=>$model,
		'db_name'=>'test',
		'table_name'=>'article',
	));
}

public function actionAjax()
{
	$model=new ArticleForm;

	if(isset($_POST['ArticleForm']))
	{
		$model->attributes=$_POST['ArticleForm'];
		if($model->validate())
		{
			print_r($_REQUEST);
			return;
		}
	}
	$this->render('article_form',array('model'=>$model));

}

Во view admin.php вывожу форму

<?php $this->renderPartial('article_form',array(
	'model'=>$model,
)); ?>

Форма article_form.php

<div class="form">

	<?php $form=$this->beginWidget('CActiveForm', array(
		'id'=>'article-form-form',
		'enableAjaxValidation'=>false,
		'htmlOptions'=>array(
			'onsubmit'=>"return false;",
			'onkeypress'=>" if(event.keyCode == 13){ send(); } "
		),
	)); ?>

	<?php echo $form->errorSummary($model); ?>

	<div class="row">
		<?php echo $form->labelEx($model,'id'); ?>
		<?php echo $form->textField($model,'id'); ?>
		<?php echo $form->error($model,'name'); ?>
	</div>
	<div class="row">
		<?php echo $form->labelEx($model,'name'); ?>
		<?php echo $form->textField($model,'name'); ?>
		<?php echo $form->error($model,'name'); ?>
	</div>


	<div class="row buttons">
		<?php echo CHtml::Button('SUBMIT',array('onclick'=>'send();')); ?>
	</div>

	<?php $this->endWidget(); ?>

</div><!-- form -->
<script type="text/javascript">

	function send()
	{

		var data=$("#article-form-form").serialize();


		$.ajax({
			type: 'POST',
			url: '<?php echo Yii::app()->createAbsoluteUrl("article/ajax"); ?>',
			data:data,
			success:function(data){
				alert(data);
			},
			error: function(data) { // if error occured
				alert("Error occured.please try again");
				alert(data);
			},

			dataType:'html'
		});

	}

</script>

Модель:

class ArticleForm extends CFormModel
{

	public $id;
	public $name;
	public $description;
	public $additional1;
	public $additional2;
	public $additional3;

	public function rules()
	{
		return array(

		);
	}

	public function attributeLabels()
	{
		return array(
			'id'=>'ID',
			'name'=>'Name',
			'description'=>'Description',
			'additional1'=>'Additional1',
			'additional1'=>'Additional2',
			'additional1'=>'Additional3',
		);
	}

}

Дмитрий Елисеев

Добавьте условие:

if (Ypp::app()->request->isAjaxRequest)
    $this->renderPartial(...);
else
    $this->render(...);

Катя

Спасибо, попробую так сделать

Андрей

Здравствуйте,
такая проблема.
Если я изменяю класс столбца, то в хедере с фильтром инпут не помещается в div. И из-за этого инпут залезает на соседний столбец

Андрей

пока решил вот так:

protected function renderFilterCellContent() {
    echo CHtml::openTag('div', array('class'=>'filter-container'));
    parent::renderFilterCellContent();
    echo CHtml::closeTag('div');
}

Эльвира – developer.uz

А вы не пробовали просто поменять type с 'html' на 'image' или 'url' ;) Глядишь и кода меньше писать бы пришлось.

Дмитрий Елисеев

Пробовал, но приходилось URL самому каждый раз сочинять и width картинкам костылями через стили подцеплять. И одновременно image+url вывести не получалось.

dekameron

$AR->get{PropertyName}();

Это же стандартный геттер, зачем писать так сложно, если достаточно $AR->{propertyName} ?

Дмитрий Елисеев

А где Вы это нашли?

dekameron

yii\base\CComponent.php:107

public function __get($name){
	$getter='get'.$name;
	if(method_exists($this,$getter))
		return $this->$getter();
	...

dekameron

Имелось ввиду, что вместо $data->getThumbUrl(), например, можно писать $data->thumbUrl

Дмитрий Елисеев

Да, можно.

Оставить комментарий

Войти | Завести аккаунт | Войти через

Ваше имя

Ваш Email (никто не увидит)

Ваш сайт

Комментарий

Можно использовать теги <p> <ul> <li> <b> <i> <a> <pre>

Я – человек разумный

Судью на мыло

Также я здесь

Узнавайте о полезных статьях,
не пропускайте видеоуроки,
получайте бонусы.

Разделы блога

Профиль

Скринкасты

Free

DDD и Event Driven архитектура

Моделирование предметной области бизнеса в DDD. Домены и поддомены. Event Driven архитектура слабосвязанных модулей. Практика Event Storming для построения цепочек команд и событий.

Free

Суть компонентного фреймворка

Определение и суть компонентного HTTP-фреймворка. Место фреймворка и библиотек в потоке управления. Совместимость фреймворков и рекомендации PSR.

Free

Структура HTTP-запроса и ответа

Как производится запрос и какие результаты возвращает сервер. Какие запросы являются безопасными.

Рефакторинг сеттеров и интерфейсов

Разбор кода OAuth 2.0 Server. Упрощение кода сервера. Устранение избыточности интерфейсов. Избавление от сеттеров. Чем нам помогут интерфейсы если сеттеры нужны.

Free

Аутентификация OAuth2 и токены JWT

Способы аутентификации при работе с API. Использование токенов формата JWT в распределённых системах. Спецификация OAuth 2.0 для получения доступа в сторонние сервисы.

Free

Философия CI, CD и CD

Философия Continuous Integration, Continuous Delivery и Continuous Deployment. Альтернативный подход разработки программных продуктов.