DToggleColumn — Колонка-переключатель для CGridView

Выкладываем свои наработки
Ответить
Аватара пользователя
ElisDN
Сообщения: 5845
Зарегистрирован: 2012.10.07, 10:24
Контактная информация:

DToggleColumn — Колонка-переключатель для CGridView

Сообщение ElisDN »

При администрировании многих разделов сайта возникла необходимость работы с логическими переключаемыми атрибутами модели (опубликована новость или нет, прочитано сообщение или нет и т.п.). В сети нашлось решение использовать колонку из чекбоксов с автосохранением данных Ajax запросом по событию onChange(). Эстетически выводить несколько колонок чекбоксов было не очень красиво. Было решено для наглядности сделать столбик из иконок-ссылок. Переключение работает по Ajax.

Изображение

Достаточно кинуть файл класса в /application/components и использовать в гриде:

Код: Выделить всё

$this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider'=>$model->search(),
    'filter'=>$model,
    'columns'=>array(
        'date',
        'title', 
        // простой значок статуса
        array(
            'class'=>'DToggleColumn',
            'name'=>'important',
            'onImageUrl' => Yii::app()->request->baseUrl . '/images/important.png',
            'offImageUrl' => Yii::app()->request->baseUrl . '/images/spacer.gif',
            'linkUrl'=>false;
        ),
        // значок-переключатель
        array(
            'class'=>'DToggleColumn',
            'name'=>'public',
            'header'=>'О',
            'confirmation'=>'Изменить статус публикации?',
            'filter'=>array(1=>'Опубликованные', 0=>'Не опубликованные'),
            'titles'=>array(1=>'Опубликовано', 0=>'Не опубликовано'),
            // ссылка для переключения состояния
            // если не указать, то автоматически сгенерируется такая же ссылка по умолчанию
            'linkUrl'=>'Yii::app()->controller->createUrl("toggle", array("id"=>$data->id, "attribute"=>"public"))',
            'onImageUrl' => Yii::app()->request->baseUrl . '/images/yes.png',
            'offImageUrl' => Yii::app()->request->baseUrl . '/images/no.png',
            'htmlOptions'=>array('style'=>'width:30px;text-align:center'),
        ),   
        array(
            'class'=>'CButtonColumn',
        ),
    ),
)); 
Код: https://github.com/ElisDN/zii-toggle-column
Описание: http://www.elisdn.ru/blog/15/dtogglecol ... -cgridview
Последний раз редактировалось ElisDN 2012.11.19, 08:46, всего редактировалось 6 раз.
Аватара пользователя
lancecoder
Сообщения: 2532
Зарегистрирован: 2012.06.26, 17:16

Re: DToggleColumn — Колонка-переключатель для CGridView

Сообщение lancecoder »

уже какой раз переманивание пользователей :)
Аватара пользователя
ElisDN
Сообщения: 5845
Зарегистрирован: 2012.10.07, 10:24
Контактная информация:

Re: DToggleColumn — Колонка-переключатель для CGridView

Сообщение ElisDN »

lancecoder писал(а):уже какой раз переманивание пользователей :)
В смысле?
Аватара пользователя
lancecoder
Сообщения: 2532
Зарегистрирован: 2012.06.26, 17:16

Re: DToggleColumn — Колонка-переключатель для CGridView

Сообщение lancecoder »

много людей пишут статьи по Yii, но ссылки здесь оставляете только вы, хотя бы на затравку пару абзацев писали
Аватара пользователя
ElisDN
Сообщения: 5845
Зарегистрирован: 2012.10.07, 10:24
Контактная информация:

Re: DToggleColumn — Колонка-переключатель для CGridView

Сообщение ElisDN »

lancecoder писал(а):много людей пишут статьи по Yii, но ссылки здесь оставляете только вы
Кхм... Пролистал десяток тем и почти все со ссылками...
lancecoder писал(а):хотя бы на затравку пару абзацев писали
Спасибо за замечание. Исправлюсь ;)
Аватара пользователя
lancecoder
Сообщения: 2532
Зарегистрирован: 2012.06.26, 17:16

Re: DToggleColumn — Колонка-переключатель для CGridView

Сообщение lancecoder »

почему не хотите оформить в виде расширения?
Аватара пользователя
ElisDN
Сообщения: 5845
Зарегистрирован: 2012.10.07, 10:24
Контактная информация:

Re: DToggleColumn — Колонка-переключатель для CGridView

Сообщение ElisDN »

lancecoder писал(а):почему не хотите оформить в виде расширения?
Только разбираюсь с сайтом и в порядок всё привожу. Может на днях выгружу.
seregagl
Сообщения: 21
Зарегистрирован: 2012.08.07, 14:24

Re: DToggleColumn — Колонка-переключатель для CGridView

Сообщение seregagl »

Насколько я вижу, у вас после изменения одного чекбокса идет запрос на сервер и перегружается ВЕСЬ грид. Мне кажется это не очень правильный вариант, если учесть, что строк в гриде может быть 100 или 500
Аватара пользователя
ElisDN
Сообщения: 5845
Зарегистрирован: 2012.10.07, 10:24
Контактная информация:

Re: DToggleColumn — Колонка-переключатель для CGridView

Сообщение ElisDN »

seregagl писал(а):Насколько я вижу, у вас после изменения одного чекбокса идет запрос на сервер и перегружается ВЕСЬ грид. Мне кажется это не очень правильный вариант, если учесть, что строк в гриде может быть 100 или 500
Спасибо за замечание. Просто все стандартные операции с гридом (поиск, сортировка, пагинация) производятся также с полным обновлением (так как там это необходимо). JavaScript я взял из кода кнопки delete стандартного класса CButtonColumn. Могу сегодня переделать на переключение иконки без полного обновления грида.
seregagl
Сообщения: 21
Зарегистрирован: 2012.08.07, 14:24

Re: DToggleColumn — Колонка-переключатель для CGridView

Сообщение seregagl »

ElisDN писал(а):Могу сегодня переделать на переключение иконки без полного обновления грида.
Не, для меня переделывать ничего не нужно, я просто отметил недостаток, бросающийся в глаза )
И в этом решении он также присутствует
Аватара пользователя
ElisDN
Сообщения: 5845
Зарегистрирован: 2012.10.07, 10:24
Контактная информация:

Re: DToggleColumn — Колонка-переключатель для CGridView

Сообщение ElisDN »

Переделал обновление всего грида в обновление иконки одной строки.
Аватара пользователя
ElisDN
Сообщения: 5845
Зарегистрирован: 2012.10.07, 10:24
Контактная информация:

Re: DToggleColumn — Колонка-переключатель для CGridView

Сообщение ElisDN »

Добавил автоматическую генерацию ссылки по умолчанию. Используйте 'linkUrl'=>false для отключения ссылки.
Аватара пользователя
ElisDN
Сообщения: 5845
Зарегистрирован: 2012.10.07, 10:24
Контактная информация:

Re: DToggleColumn — Колонка-переключатель для CGridView

Сообщение ElisDN »

Добавил атрибут 'visible'.
Аватара пользователя
vitaxa_prog
Сообщения: 306
Зарегистрирован: 2011.06.06, 22:44
Откуда: Волноваха

Re: DToggleColumn — Колонка-переключатель для CGridView

Сообщение vitaxa_prog »

Доброго времени суток.
У меня появился вопрос по вашему расширению. Хотел сделать две колонки с переключателями, но не нашел как изменить класс ссылки.
Получается при клике на переключатель происходит два запроса.
Вот в гриде эти колонки

Код: Выделить всё

array(
            'class'=>'DToggleColumn',
            'name' => 'status',
            // иконка для значения 1 или true
            'onImageUrl' => Yii::app()->request->baseUrl . '/images/admin/ok.png',
            // иконка для значения 0 или false
            'offImageUrl' => Yii::app()->request->baseUrl . '/images/admin/no.png',
            // убираем генерацию ссылки по умолчанию
            //'linkUrl'=>'/admin/categoriesKupon/toggle/id/12/attribute/status',
            // запрос подтвердждения (если нужен)
            'confirmation'=>'Изменить статус публикации?',
            // фильтр
            'filter'=>array(1=>'Опубликованные', 0=>'Не опубликованные'),
            // alt для иконок (так как отличается от стандартного)
            'titles'=>array(1=>'Опубликовано', 0=>'Не опубликовано'),
            //'actionUrl' => array('setStatus'),
            'htmlOptions'=>array(
                'width'=>'50px',
                'align'=>'center',
            ),
        ),
            array(
            'class'=>'DToggleColumn',
            'name' => 'IsFeatured',
            // иконка для значения 1 или true
            'onImageUrl' => Yii::app()->request->baseUrl . '/images/slide-on.png',
            // иконка для значения 0 или false
            'offImageUrl' => Yii::app()->request->baseUrl . '/images/slide-off.png',
            // своя ссылка для переключения состояния
            //'linkUrl'=>'Yii::app()->controller->createUrl("featured", array("id"=>$data->id_news, "attribute"=>"IsFeatured"))',
            // запрос подтвердждения (если нужен)
            //'confirmation'=>'Изменить статус публикации в слайдере?',
            // фильтр
            'filter'=>array(1=>'В слайдере', 0=>'Не в слайдере'),
            // alt для иконок (так как отличается от стандартного)
            'titles'=>array(1=>'В слайдере', 0=>'Не в слайдере'),
            //'actionUrl' => array('setStatus'),
            'htmlOptions'=>array(
                'width'=>'50px',
                'align'=>'center',
                'class'=>'f',
            ),
        ), 
В контроллере вообще все просто

Код: Выделить всё

public function actionToggle($id, $attribute) {
        if (!in_array($attribute, array('status','IsFeatured')))
            throw new CHttpException(400, 'Некорректный запрос');

        $model = $this->loadModel($id);
        $model->$attribute = $model->$attribute ? 0 : 1;
        if (!$model->save()) {
            echo CVarDumper::dump($model->getErrors(), 10, true);
            exit;
        }

        if (!Yii::app()->request->isAjaxRequest)
            $this->redirect(isset($_POST['returnUrl']) ? $_POST['returnUrl'] : array('admin'));
    } 
Понимаю, что контроллер в моем случае не играет роли. Обработка запроса происходит правильно. Затем второй запрос еще раз переключет состояние.
Вот такая разметка генерируется
для статуса

Код: Выделить всё

<a class="toggle-link toggle-property-p toggle-true" href="/admin/news/toggle/id/47/attribute/status"> 
и для популярных

Код: Выделить всё

<a class="toggle-link toggle-property-p" href="/admin/news/toggle/id/47/attribute/IsFeatured"> 
В файрбаге видно что уходит по два запоса

Код: Выделить всё

    
jquery.js (строка 8434)
POST http://kupon.loc/admin/news/toggle/id/47/attribute/IsFeatured
    
200 OK
        329ms    
jquery.js (строка 8434)
POST http://kupon.loc/admin/news/toggle/id/47/attribute/IsFeatured
    
200 OK
        378ms    
jquery.js (строка 8434)
POST http://kupon.loc/admin/news/toggle/id/47/attribute/status
    
200 OK
        312ms    
jquery.js (строка 8434)
POST http://kupon.loc/admin/news/toggle/id/47/attribute/status
    
200 OK
        347ms
В принципе ничего нет невозможного.
— Вы думаете?
— Для человека. С интеллектом.
Аватара пользователя
vitaxa_prog
Сообщения: 306
Зарегистрирован: 2011.06.06, 22:44
Откуда: Волноваха

Re: DToggleColumn — Колонка-переключатель для CGridView

Сообщение vitaxa_prog »

Не нашел пока решения этой проблемы.
Подцепил jtogglecolumn. Пока. Надеюсь Дмитрий что то посоветует, как выйти из ситуации с двумя колонками.
В принципе ничего нет невозможного.
— Вы думаете?
— Для человека. С интеллектом.
Аватара пользователя
ElisDN
Сообщения: 5845
Зарегистрирован: 2012.10.07, 10:24
Контактная информация:

Re: DToggleColumn — Колонка-переключатель для CGridView

Сообщение ElisDN »

В текущей версии 1.1 классы генерировались через rand. В версии 1.2 сделал через автоинкремент, чтобы не терялась привязка скриптов при включенном ajaxUpdate.
Аватара пользователя
BrusSENS
Сообщения: 565
Зарегистрирован: 2012.07.26, 06:51
Откуда: Новороссийск
Контактная информация:

Re: DToggleColumn — Колонка-переключатель для CGridView

Сообщение BrusSENS »

Дмитрий, возможно передавать несколько кнопок в колонку? А то по разным колонкам кнопки, как то не красиво :(
Native Web - небольшой блог о веб разработке (временно на ремонте)
Режим обслуживания сайта для Yii 2.x.x
Ответить