Использование jqGrid вместе с Yii фреймворком
Приветствую всех!
В этой статье речь пойдёт о том как использовать Yii PHP framework и плагин к jQuery под названием jqGrid. Я не буду повторяться и рассказывать о том, что из себя представляют Yii и jqGrid и зачем они нужны. Вы легко найдёте все мои заметки на эту тему с помощью поиска по блогу 
(кстати, все статьи о Yii вынесены в отдельный раздел).
Когда я проводил этот эксперимент, меня интересовали два момента:
1) подключение jgGrid;
2) преобразование данных, полученных с помощью CActiveDataProvider в формат понятный для jgGrid.
С первым пунктом всё более-менее понятно. jqGrid представляет собой набор JS и CSS файлов, которые нужно подключить к странице.
Для этих целей в Yii предусмотрены специальные методы: registerScriptFile и registerCssFile. Можно, конечно, просто прописать теги script в представлении, но делать этого не рекомендуется, т.к. в этом случае фреймоворк не сможет отслеживать повторные подключения скриптов.
Примечание. Подробнее о работе с JS и CSS файлами можно почитать здесь.
Т.к. я просто экспериментировал, я сделал тестовое представление (testjqgrid.php)
-
//подключение CSS файлов и JS скриптов
-
$cs = Yii::app()->clientScript;
-
-
$cs->registerCssFile(Yii::app()->request->baseUrl.'/jqgrid/css/ui.jqgrid.css');
-
$cs->registerCssFile(Yii::app()->request->baseUrl.'/jqgrid/css/ui-lightness/jquery-ui-1.7.2.custom.css');
-
-
$cs->registerScriptFile(Yii::app()->request->baseUrl.'/jqgrid/js/jquery-1.3.2.min.js');
-
$cs->registerScriptFile(Yii::app()->request->baseUrl.'/jqgrid/js/i18n/grid.locale-ru.js');
-
$cs->registerScriptFile(Yii::app()->request->baseUrl.'/jqgrid/js/jquery.jqGrid.min.js');
-
?>
-
<table id="list"></table>
-
<div id="pager"></div>
-
-
<script type="text/javascript">
-
$(function() {
-
jQuery("#list").jqGrid( {
-
url : '<?php echo $this->createUrl('blogs/jqgriddata'); ?>',
-
datatype : 'json',
-
mtype : 'GET',
-
colNames : [ '#', 'Name', 'URL', 'API' ],
-
colModel : [ {
-
name : 'b_id',
-
index : 'b_id',
-
width : 60
-
}, {
-
name : 'b_name',
-
index : 'b_name',
-
width : 120
-
}, {
-
name : 'b_url',
-
index : 'b_url',
-
width : 150,
-
align : 'right'
-
}, {
-
name : 'b_api',
-
index : 'b_api',
-
width : 80,
-
align : 'right'
-
} ],
-
pager : '#pager',
-
rowNum : 10,
-
rowList : [ 10, 20, 30 ],
-
sortname : 'invid',
-
sortorder : 'desc',
-
viewrecords : true,
-
caption : 'Blogs'
-
});
-
});
-
</script>
Как видите, сначала мы регистрируем скрипты и файлы стилей, затем вставляем тег для таблицы (строка 12) и тег для панели навигации.
Примечание. В этом примере использован первый попавшийся контроллер (BlogsController). Кроме того, для получения данных используется модель Blogs. Зачем она нужна, в данном случае не принципиально, мы просто будем отображать записи из таблицы с помощью jqGrid.
В конце представления находится код настройки jqGrid. Таблица будет содержать 4 колонки с названиями: «#», «Name», «URL» и «API», а соответствующие поля в таблице имеют названия: «b_id», «b_name», «b_url» и «b_api».
И, конечно, нужно указать адрес скрипта, который будет формировать данные для таблицы (строка 18, параметр url).
Формирование таблицы.
Т.к. jqGrid получает данные с помощью AJAX запросов, то мы добавим два метода в контроллер. Первый – actionJqgrid, будет формировать страницу с таблицей, т.е. просто загружать представление. Второй – actionJqgriddata, предназначен для обработки AJAX запросов.
-
public function actionJqgrid() {
-
$this->render('testjqgrid');
-
}
-
-
public function actionJqgriddata() {
-
$dataProvider=new CActiveDataProvider('Blogs', array(
-
'pagination'=>array(
-
'pageSize'=>$_GET['rows'],
-
'currentPage'=>$_GET['page']-1,
-
),
-
));
-
$responce->page = $_GET['page'];
-
$responce->records = $dataProvider->getTotalItemCount();
-
$responce->total = ceil($responce->records / $_GET['rows']);
-
$rows = $dataProvider->getData();
-
foreach ($rows as $i=>$row) {
-
$responce->rows[$i]['id'] = $row['b_id'];
-
$responce->rows[$i]['cell'] = array($row->b_id, $row->b_name, $row->b_url, $row->b_api);
-
}
-
echo json_encode($responce);
-
}
Рассмотрим их подробнее. Как я уже говорил, метод actionJqgrid просто загружает представление. Получать данные из базы нам не нужно, т.к. при создании таблицы jqGrid всё равно отправит AJAX запрос на их получение.
С методом actionJqgriddata ситуация немного сложнее. Дело в том, что нам нужно преобразовать данные, которые возвращает CActiveDataProvider в формат, понятный jqGrid.
Для этого мы создаём объект $responce и в нём сохраняем:
1) page – номер текущей страницы;
2) records – общее количество записей;
3) total – общее количество страниц;
4) rows – массив с данными. Каждый элемент этого массива должен содержать id текущей записи и массив cell с данными ячеек. Этот массив мы формируем с помощью цикла (строки 16-19).
После это преобразовываем $responce в JSON формат и возвращаем браузеру.
Как видите, принцип достаточно простой, но код получается объёмный. В принципе, есть расширение eziiui, которое упрощает работу с jqGrid, но судя по отзывам, оно ограничивает ваши возможности в использовании jqGrid, поэтому я им не пользовался.
Может быть стоит написать расширение, которое будет преобразовывать данные из CActiveDataProvider в JSON формат? Или есть другие идеи?
Полезные ссылки
Блоггер, заходи на новый форум блоггеров, общайся и зарабатывай.
Не бойтесь холода, подберите себе шарфы интернет магазин.
Понравилась статья? Подписывайтесь на продолжение 
!
Или на мой твиттер 
Добавьте эту страницу в 
Опубликовано в Ajax, JavaScript, PHP, Web разработка, Yii View Comments
-
BuCeFaL
-
Одиночка Айс
-
Владимир
-
Одиночка Айс
-
Владимир
-
andrey
-
andrey
-
Владимир
-
pauldee
-
Владимир
-
alexy4b
-
Владимир
-
Michael
-
Владимир
