Здравствуйте. Вот решил Вам поведать о способах красивой подачи данных пользователям в виде замечательной и умной Javascript-таблички. Работая с ней уже несколько месяцев, я не перестаю восхищаться её простотой и удобностью. Также мной было замечено, что пользователи прекрасно её понимают и не теряются при её виде. Исходя из выше изложенного, я даже написал класс на PHP, который позволяет быстро и эффективно внедрить разработку в проект с базовым набором функционала.

Проблема

Как красиво предоставить пользователю определённые табличные данные, дав ему в руки весь необходимый функционал, объединенный в одном компоненте?

Решение

В своих проектах я решил делать упор на jQuery, поскольку этот фреймворк имеет довольно небольшой объем, под него написано много прекрасных плагинов и дополнений, да и самому мне на нём кодить легче, чем с помощью других фреймворков. Не буду углубляться в объяснение причин такого выбора - давайте лучше приступим к делу.

В один прекрасный день я решил, что нужно придумать что-то красивое для предоставления данных пользователю. Я хотел использовать в своих проектах Ajax-грид, который бы предоставлял интерфейс для сортировки данных в понятном для пользователя виде. И как обычно в поисках подобных решений, я пошел искать плагины для jQuery, которые могли бы сделать подобное. Перебрав кучу разных плагинов, мой выбор остановился именно на плагине jqGrid, который удовлетворил мои требования.

Итак, чего же такого он умеет и что меня так привлекло:

1. Сортировка данных;
2. Постраничный вывод результатов;
3. Редактирование данных прямо в таблице;
4. Поддержка многоязычности;
5. Легкость программирования дополнительного функционала;
6. Хорошая документация;
7. Поддержка тем;
8. Кроссбраузерность;
9. Поддержка разных типов данных для подачи плагину;
10. И много еще забавных вещей.

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

jqGrid принимает немаленькое количество разных типов данных:

1. XML Data;
2. XML String;
3. JSON Data;
4. JSON String;
5. Array Data;
6. User Data.

Также есть субгриды, которые помогут Вам реализовать master/detail таблицу.

В общем, впечатления просто супер! Проект постоянно развивается и к тому же является бесплатным решением.

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

<?php /** * Fooup_jQuery_Grid class intended for the decision * of problem of programmatic integration jqGrid plugin * with jQuery into HTML and set up data for this * * @name Fooup_jQuery_Grid * @version 0.0.0.2 * @author Andrew Vasiliev (illusive [at] meta [dot] ua) */ class Fooup_jQuery_Grid { /** * $config is an associative array with JS configuration * * url: * this tells jqGrid the url where we can get data * * datatype: * this tells jqGrid the type of information being returned so it can * construct the grid. The possible options are: * 'xml', * 'json', * 'clientSide' or 'local', * 'xmlstring', * 'jsonstring' * * mtype: * tells us how to make the ajax call: either 'GET' or 'POST'. * * colNames: * an array in which we place the names of the columns. This is the text that * appears in the head of the grid (Header layer). The names are separated * with commas * * colModel: * an array that describes the model of the columns. * * pager: * defines that we want to use a pager bar to navigate through the records. * This must be a valid html element; * * rowNum: * sets how many records we want to view in the grid. This parameter is passed to * the url for use by the server routine retrieving the data * * rowList: * an array to construct a select box element in the pager in which we can change * the number of the visible rows. When changed during the execution, this parameter * replaces the rowNum parameter that is passed to the url * * sortname: * sets the initial sorting column. Can be a name or number. This parameter is added * to the url for use by the server routine * * sortorder: * sets the sorting order. This parameter is added to the url * * viewrecords: * defines whether we want to display the number of total records from the query in * the pager bar * * imgpath: * the path to the images needed for the grid. The path should not end with '/' * * caption: * sets the caption for the grid. If this parameter is not set the Caption layer will be not visible * * @var assoc array */ protected $_config = array(); /** * jQuery selector. Special for Grid * * @var unknown_type */ protected $_gridSelector = '#list'; /** * An associative array of files to include into HTML * * @var assoc array */ protected $_files = array( 'base'=>'/grid/grid.base.js' ); /** * Path to Grid themes * * @var string */ protected $_themesPath = '/grid/themes/'; /** * Current Grid theme name * * @var string */ protected $_theme = 'basic'; /** * jQuery * * @var string */ protected $_jqueryFile = '/js/jQuery.js'; /** * Class constructor * * @param array $config * @param array $files * @return Fooup_jQuery_Grid */ public function __construct(array $config = null, array $files = null) { if (!is_null($config)) $this->setConfig($config); if (!is_null($files)) $this->setFiles($files); return $this; } /** * Sets the jQuery file * * @param string $file * @return bool */ public function setjQueryFile($file) { $file = trim($file); if (empty($file)) return false; $this->_jqueryFile = $file; return true; } /** * Retrieve jQuery file * * @return string */ public function getjQueryFile() { return $this->_jqueryFile; } /** * Sets the class configuration * * @param array $config * @return Fooup_jQuery_Grid */ public function setConfig(array $config) { $this->_config = $config; return $this; } /** * Gets the class configuration * * @return array */ public function getConfig() { return $this->_config; } /** * Sets file value for concrete array key * * @param string $key * @param string $file * @return Fooup_jQuery_Grid */ public function setFile($key, $file) { $this->_files[$key] = $file; return $this; } /** * Gets the file by a key * * @param string $key * @return string */ public function getFile(string $key) { return $this->_files[$key]; } /** * Set class files configuration * * @param array $files * @return Fooup_jQuery_Grid */ public function setFiles(array $files) { if (!empty($files)) { foreach ($files as $key=>$file) { $this->setFile($key, $file); } }; return $this; } /** * Gets class files configuration * * @return unknown */ public function getFiles() { return $this->_files; } /** * Gets themes path * * @return string */ public function getThemesPath() { return $this->_themesPath; } /** * Sets the theme path * * @param string $path * @return Fooup_jQuery_Grid */ public function setThemesPath(string $path) { if ($path !== '') { if ($path[strlen($path)-1] !== '/') $path.='/'; $this->_themesPath = $path; } return $this; } /** * Sets the current theme name * * @param string $theme * @return Fooup_jQuery_Grid */ public function setTheme($theme = '') { if ($theme !== '') $this->_theme = $theme; return $this; } /** * Gets the current theme name * * @return string */ public function getTheme() { return $this->_theme; } /** * Sets the grid selector class or id * * @param string $selector * @return Fooup_jQuery_Grid */ public function setGridSelector($selector) { if ($selector !== '') $this->_gridSelector = $selector; return $this; } /** * Gets the grid selector * * @return string */ public function getGridSelector() { return $this->_gridSelector; } /** * Populates an jqGrid scripts and css * * @param Zend_View $view * @return Fooup_jQuery_Grid */ public function populate(Zend_View_Interface $view) { $view->headScript()->appendFile($this->getjQueryFile()); foreach ($this->getFiles() as $key=>$file) { $view->headScript()->appendFile($file); } $view->headLink()->appendStylesheet($this->getThemesPath().$this->getTheme().'/grid.css'); $view->headLink()->appendStylesheet($this->getThemesPath().'jqModal.css'); $config = $this->getConfig(); $json = Zend_Json::encode($config); $view->headScript()->appendScript('jQuery(document).ready(function(){jQuery("'.$this->getGridSelector().'").jqGrid('.$json.');})'); return $this; } } ?>

А теперь покажу Вам пример его использования:

<?php public function exampleAction() { if ($this->getRequest()->isXmlHttpRequest()) { // Запрошенная страница $page = $this->getRequest()->getPost('page'); // Сортировка по полю $sort = $this->getRequest()->getPost('sidx','id'); // Порядок сортировки $order = $this->getRequest()->getPost('sord','ASC'); // Количество выводимых строк $rowNum = $this->getRequest()->getPost('rows',10); $articles = new Articles; /** * Составляем запрос к БД */ $dbSelect = $articles->select(); $dbSelect->order($sort.' '.$order); $dbSelect->limitPage($page,$rowNum); $rowset = $articles->fetchAll($dbSelect); $rows = array(); // Пробегаемся по полученым результатам foreach ($rowset as $row) { $item = array('id'=>$row->id, 'cell'=>array($row->title,$row->date,$row->status)); array_push($rows,$item); } $totalCount = $articles->count(); /** * Вычисляем количество страниц */ $pagesCount = intval($totalCount/10); if ($totalCount%10>0) $pagesCount++; $data = array( 'total'=>$pagesCount, 'page'=>$page, 'records'=>$totalCount, 'rows'=>$rows ); $this->_helper->viewRenderer->setNoRender(); $this->_helper->layout->disableLayout(); /** * Посылаем соответсвующий заголовок браузеру */ $this->getResponse()->setHeader('Content-Type','application/json',true); /** * Вывод данных */ echo Zend_Json::encode($data); } else { $grid = new Fooup_jQuery_Grid; $grid->setTheme('basic'); $config = array( 'url'=>$this->view->url(), 'datatype'=>'json', 'mtype'=>'POST', 'colNames'=>array('Название','Дата/время создания','Статус'), 'colModel'=>array( array('name'=>'title','index'=>'title','sortable'=>true,'width'=>400), array('name'=>'date','index'=>'date','sortable'=>true,'width'=>200), array('name'=>'status','index'=>'status','sortable'=>true,'width'=>100) ), 'viewrecords'=>true, 'recordtext'=>'записей(сь)', 'rowList'=>array(10,20,30,40,50), 'multiselect'=>false, 'pager'=>'pager', 'hidegrid'=>'false', 'height'=>'240px', 'resizable'=>'true', 'shrinkToFit'=>'true', 'loadtext'=>'Загрузка...', 'rowNum'=>'10', 'sortname'=>'date', 'sortorder'=>'desc', 'imgpath'=>$grid->getThemesPath().$grid->getTheme().'/images/', 'caption'=>'Список статей' ); $grid->setConfig($config); $grid->populate($this->view); } } ?>

Все! Остались только маленькие штришки. Подготовим наш файл вида:

<table id="list" class="scroll" align="center"></table> <div id="pager" class="scroll" style="text-align:center" mce_style="text-align:center"></div>

Чтобы лучше понять работу плагина, ознакомьтесь с прилагающейся документацией.

Выводы

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

Действительно супер!!! Большое спасибо!

Спасибо за признательность

Серьезно, запарился разбираться :) Но разобрался, СПС. Хорошая идея, Я уже свою написал :)

Серьезно, запарился разбираться :) Но разобрался, СПС. Хорошая идея, Я уже свою написал :)

Да есть там немного гемора... Спасибо за отзыв, очень хотелось бы посмотреть Вашу идею...

Немного позанудствую.

$this->_helper->viewRenderer->setNoRender(); $this->_helper->layout->disableLayout(); $this->getResponse()->setHeader('Content-Type','application/json',true); echo Zend_Json::encode($data);

это можно заменить одной строкой:

$this->_helper->json($data);

@LighteR

Спасибо, за замечание.

Спасибо большое за статью, все понятно и просто :) Но...проблема из-за которой я нашел этот пост, не изчезла  может Вы подскажете в чем дело? Грид не отображается в Zend, если этот же код(исходник страницы из Zend) скомпилировать в корне веб-сервера, грид работает. Испробывал много способов подключения этого компонента, под "чистым" пхп работает, во фреймворке нет ...

Извините, но я не совсем Вас понял. Скажу только одно - юзаю этот грид вместе с ZF уже достаточно давно и у меня все работает

Народ выручайте, У меня не работает onSelectRow(), говорит следующее:

$t.p.onSelectRow is not a function [Break on this error] if( $t.p.onSelectRow && onsr) { $t.p.onSelectRow($t.p.selrow, true); }

Ahiles, у меня все заработало. Лично проверил. Версия jqGrid 3.4.3...

Написал у себя следующий PHP код:

$grid->onSelectRow(new Fooup_JQuery_Function('alert(rowid);',array('rowid')));

Что равносильно в JS:

... ,"onSelectRow":function(rowid){alert(rowid);}, ...

Проверьте правильность синтаксиса, ведь onSelectRow - это не функция, а параметр при настройке грида

illusive Спасибо, жалко конечно что ты в аську не выходишь. Или просто меня не добавляешь :(.

У меня появился другой вопрос, а кто нибуть пробывал jqGrid 3,5 BETA????

illusive, не помогает "onSelectRow":function(rowid){alert(rowid);}.

Все проверил, все нормально. я даже jqgrid до 3.5 обновил, результат - 0.

Извини насчет аси, просто я еще занимаюсь сессией в универе, да и с нетом вопрос не решен. 

Лучше бы ты JS показал... У меня просто библиотечка Fooup_JQuery переписанная и без проблем работает 

Вот ссылка на JQuery PHP библиотеку под Zend Framework. Правда выдер её из проекта, над которым тружусь сейчас, поэтому не проверял её как-бы в отдельности... Вобщем, поправиш чего потребуется и будет тебе щастье 

> а кто нибуть пробывал jqGrid 3,5 BETA????

Нет, я пока не берусь. Меня и текущий грид устраивает. А тот пускай доработают сначала, а тогда уже посмотрим...

привіт! замість цього

$pagesCount = intval($totalCount/10);

if ($totalCount%10>0) $pagesCount++; 

краще написати так 

$pagesCount = ceil($totalCount/10);

компактніше як ніяк))

Привет всем!
Сделал все как написано сверху, но ничего не выводит(((

файлы норм подгружаются(  'base'=>'/js/grid/grid.base.js',$_themesPath = '/js/grid/themes/';и '/js/jquery-1.3.2.js'; )

массив data вроде формируется нормально. {"total":"1","page":"1","records":"1","rows":{"id":"5","cell":["edede","dedededed"]}}

в чем может быть косяк?

Во-первых: На сколько я помню все скрипты от jqGrid`а должны подключатся после jquery. Во-вторых, проверь, подключились ли у тебя библиотеки: jqDnR.js и jqModal.js, и однооименные css для них. А в вообще скинь ошики какие показывет FireBug легче было бы :)

одна ошибка, вот:

$.jgrid has no properties
jqGrid()(Object url=/admin/editcars datatype=json mtype=POST)grid.base.js (line 91)
(?)()()editcars (line 11)
F()()jQuery.js (line 19)
init()([function(), function()], function(), undefined)jQuery.js (line 12)
F()()jQuery.js (line 19)
F()()jQuery.js (line 19)
[Break on this error] }, $.jgrid.defaults, p || {});

А что это за свойство такое $.jgrid --- ???? 

Не знаю, я только первый раз решил использовать jquery,и просто взял код написанный сверху. (подключил класс, и прописал в контроллере и виде).

из скриптов у меня подрубается ток это

<link href="&"quot;/jqGrid/themes/basic/grid.css" media="screen" rel="stylesheet" type="text/css" />
<link href="&"quot;/jqGrid/themes/jqModal.css" media="screen" rel="stylesheet" type="text/css" /><script type="text/javascript" src="/js/jQuery.js"></script>
<script type="text/javascript" src="/jqGrid/js/grid.base.js"></script>

@Tolik

Дякую за примітку

Ребята, пользуйтесь, пожалуйста, кнопкой вставка кода...

я все убрал, и просто подключил все файлы и посыпались ошибки

syntax error [Break on this error] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...rg/1999/xhtml" xml:lang="en" lang="en">\n grid.locale-en.js (line 1) syntax error [Break on this error] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...rg/1999/xhtml" xml:lang="en" lang="en">\n grid.base.js (line 1) syntax error [Break on this error] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...rg/1999/xhtml" xml:lang="en" lang="en">\n grid.common.js (line 1) syntax error [Break on this error] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...rg/1999/xhtml" xml:lang="en" lang="en">\n grid.formedit.js (line 1) syntax error [Break on this error] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...rg/1999/xhtml" xml:lang="en" lang="en">\n grid.inlinedit.js (line 1) syntax error [Break on this error] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...rg/1999/xhtml" xml:lang="en" lang="en">\n grid.celledit.js (line 1) syntax error [Break on this error] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...rg/1999/xhtml" xml:lang="en" lang="en">\n grid.subgrid.js (line 1) syntax error [Break on this error] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...rg/1999/xhtml" xml:lang="en" lang="en">\n grid.treegrid.js (line 1) syntax error [Break on this error] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...rg/1999/xhtml" xml:lang="en" lang="en">\n grid.custom.js (line 1) syntax error [Break on this error] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...rg/1999/xhtml" xml:lang="en" lang="en">\n grid.postext.js (line 1) syntax error [Break on this error] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...rg/1999/xhtml" xml:lang="en" lang="en">\n grid.tbltogrid.js (line 1) syntax error [Break on this error] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...rg/1999/xhtml" xml:lang="en" lang="en">\n grid.set...olumns.js (line 1)

А все - это что???

НАРОД, БУДЬТЕ ЛЮБЕЗНЫ, ХОТЬ ЭТОТ БЛОГ И НЕ МОЙ, НО У МЕНЯ ОГРОМНАЯ ПРОСЬБА, ЕСЛИ ВЫ ПРОСИТЕ О ПОМОЩИ, ТАК ПИШИТЕ ВОПРОСЫ РАЗВЕРНУТО, БОЛЕЕ ИНФОРМАЦИОННО, ЧТО БЫ МЫ НЕ СДЕЛИ И НЕ ДОГАНЯЛИ!!!!! 

@Ahiles

Спасибо за понимание - у меня сейчас нет интернета, поэтому, дорогие читатели - извините, что мало общаюсь и помогаю 

@Mugik

Проверьте какой ответ возвращает сервер при загрузке js файлов, возможно у Вас ошибка/недочет в файле .htaccess

Привет! Хорошая статья, взял себе на заметку.

В коде в строке 132, твоего класса небольшая описка

было:

if (emptyempty($file)) return false; 

надо:

if (empty($file)) return false;

Рад, что пригодилось 

Спасибо за оЧепятку 

Hi,

I have trying your code. But not displayed the grid. I think that is omit any row from code, who set loading of json response in grid. Please, where wrong?   

Hi,

if you are using the latest, based on jquery.ui, jQuery Grid - my code will not work with this.

Versions greather than 3.4.4a of the jQuery Grid Plugin are not compatible with this code.

Sorry

Привет.

Использую jqgrid в zf практически также, как и ваша библиотека. Принцип работы идентечен на все 100%. Поскольку все же вопрос не совсем по адресу, оговорюсь - пишу в надежде на то, что кто-то с этим сталкивался.

Дело в том, что при первой загрузке экшна с таблицей, ответ от сервера приходит через 2-3 секунды. Причем судя по логам и профайлеру, запросы к базе и время выполнения самой функции в экшне ничтожно малы - 0.01 сек. Что происходит в эти 2 секунды  - непонятно.

После загрузки страницы, я нажимаю кнопочку "обновить" в самом гриде, проходит тот же самый запрос но уже за 0.2 секунды - все ок. Замеры времени выполнения не помогают - все говорит о том, что страница генерируется быстро.

При открытии страницы наблюдается еще и странное подвисание браузера (всех браузеров), на эти же 2 секунды. Фаербаг не показывает js-ошибок или 404, все запросы приходят с кодом 200.

Уже не знаю где искать ошибку.

Заранее спасибо за помощь.

http://framework.zend.com/wiki/display/ZFPROP/ZendX_JQuery_Jqgrid+-+Jason+Lentink 
Пропосал вот уже лежит