Yii - работа с CGridView с использованием CJuiDialog and Ajax

21.09.2011

Несколько дней писал статью про Ajax, CJuiDialog и CGridView, осталось немного работы и статья была бы готова. НО, вдруг вчера в поисках ответа на один вопрос зашел в Wiki yiiframework.com в раздел AJAX и четвертая статья сверху была как раз про Ajax, CJuiDialog  и CGridView. Статьи которые раньше видил по этому поводу на yiiframework мне не очень нравились - как-то в них всё было через жопу, слишком сложно, а тут - помимо статьи ещё и расширение - EUpdateDialog!

Решил отложить всё на завтра - завтра наступило и с утра, первым делом (т.к. мне это нужно не только для статьи, но и по работе) установил расширение - EUpdateDialog, согласно инструкциям по установке в документации. Просмотрел код расширения и вообще его работоспособность. Всё заработало сразу же.

Ниже всё описано на реальном примере.

Воды нет, список действий ;)

1) создаем таблицу со следующей структурой:

CREATE TABLE IF NOT EXISTS `article` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `text` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

2) генерируем к ней модель и crud - через gii

3) качаем расширение - http://www.yiiframework.com/extension/eupdatedialog/

4) установка расширения:
- копируем папку actions из архива в /protected/controllers
- а папку EUpdateDialog в /protected/extensions/
- открываем ArticleController.php и добавляем в него:

public function actions() {
    return array(
        'update' => 'application.controllers.actions.updateAction',
        'delete' => 'application.controllers.actions.deleteAction',
        'create' => 'application.controllers.actions.createAction',
    );
}

И удаляем действия, сгенерированные Gii - Update, create, delete.

 

5) Открываем файл представления - admin.php(/protected/views/article/admin.php)
Подключаем диалог, тут же можно задать свойства для CJuiDialog

widget('ext.EUpdateDialog.EUpdateDialog', array(
    'height' => 200,
    'resizable' => true,
    'width' => 300,
));
?>

Ссылка для добавления новой модели

 'update-dialog-create')); ?>

Подправим немного саму CGridView - точнее кнопки - update и delete:

array(
    'class' => 'CButtonColumn',
    'deleteButtonUrl' => 'Yii::app()->createUrl(
                    "article/delete",
                    array( "id" => $data->primaryKey ) )',
    'buttons' => array(
        'delete' => array(
            'click' => 'updateDialogDelete',
        ),
        'update' => array(
            'click' => 'updateDialogUpdate',
        ),
    ),
),

Страница администрирования статей

6) Добавим файл представления для действия delete (/protected/views/article/delete.php):

beginWidget( 'CActiveForm', array(
  'id' => 'id-of-the-form',
  'enableAjaxValidation' => false,
  'focus' => '#confirmDelete',
)); ?>

'confirmDelete', 'id' => 'confirmDelete' ) ); echo CHtml::submitButton( 'No', array( 'name' => 'denyDelete' ) ); ?>
endWidget(); ?>

7) Последний штрих - подправим метод loadModel() контроллера ArticleController.php :

public function loadModel() {
    if ($this->_model === null) {
        if (isset($_GET['id']))
            $this->_model = Article::model()->findByPk((int) $_GET['id']);
        if ($this->_model === null)
            throw new CHttpException(404, 'The requested page does not exist.');
    }
    return $this->_model;
}

Проверяем добавление, обновление и удаление записей - всё работает отлично!
От себя добавлю - мне, для работы нужно было немного изменить расширение (перенести вывод flash-сообщений из диалога на страницу представления, настроить редиректы и отображение самого диалога), но это намного лучше чем писать самому с нуля.

Также можно переопределить flash-сообщения:

public function actions()
{
  return array(
    'create' => array(
      'class' => 'application.actions.createAction',
      'successMessage' => 'This is success message',
    ),
    'delete' => array(
      'class' => 'application.actions.deleteAction',
      'successMessage' => 'This is success message',
      'cancelMessage' => 'This is cancel message',
    ),
    'update' => array(
      'class' => 'application.actions.updateAction',
      'successMessage' => 'This is success message',
    ),
  );
}

 

EUpdateDialog
Оригинал: http://www.yiiframework.com/extension/eupdatedialog/

blog comments powered by Disqus
Наверх