Пример использования jqGrid, jQuery и Zend Framework

Размещено 2010-05-31 в разделе Программирование | Метки: Zend Framework, jQuery, jqGrid

Недавно писал панель управления для ЖЖ блогов, так как блогов было достаточно много и нужно было сделать фильтр по названиям и в дальнейшем по другим параметрам, выводить их просто как таблицу с помощью Zend Paginator было не очень прикольно. Для вывода блогов решил воспользоваться jqGdrid.

Контроллер


<?php
class LjController extends Zend_Controller_Action
{
    public function blogsAction()
    {
        $this->view->headScript()->prependScript('$(Lj.blogsList);')
                                 ->prependFile('/js/jquery.jqGrid.min.js', 'text/javascript')
                                 ->prependFile('/js/i18n/grid.locale-ru.js', 'text/javascript')
                                 ->prependFile('/js/lj.js', 'text/javascript')
                                 ->prependFile('/js/jquery-ui-1.8.1.custom.min.js', 'text/javascript')
                                 ->prependFile('/js/jquery-1.4.2.min.js', 'text/javascript');
        $this->view->headLink()->appendStylesheet('/css/smoothness/jquery-ui-1.8.1.custom.css')
                               ->appendStylesheet('/css/ui.jqgrid.css');
        $this->view->headTitle('Список блогов');
    }

    public function jqgridBlogsListAction()
    {
        $this->_helper->layout->disableLayout();
        $this->_helper->viewRenderer->setNoRender();
        $ljUsernamesTable = new LjUsernames();
        $numBlogs = $ljUsernamesTable->getNum();
        $page = $this->_request->getParam('page');
        $sidx = $this->_request->getParam('sidx', 1);
        $sord = $this->_request->getParam('sord');
        $limit = $this->_request->getParam('rows');
        $filterName = $this->_request->getParam('filterName');
        $filterOurBlog = intval($this->_request->getParam('filterOurBlog'), 0);
        $filterChain = new Zend_Filter();
        $filterChain->addFilter(new Zend_Filter_Alnum())
                    ->addFilter(new Zend_Filter_StringToLower())
                    ->addFilter(new Zend_Filter_StringTrim())
                    ->addFilter(new Zend_Filter_StripNewlines())
                    ->addFilter(new Zend_Filter_StripTags());

        $where = array();
        if (strlen($filterName))
        {
            $where['nameLike'] = $filterChain->filter($filterName);
        }

        if (strlen($filterOurBlog))
        {
            $where['ourBlog'] = $filterChain->filter($filterOurBlog);
        }

        if ($numBlogs > 0)
        {
            $totalPages = ceil($numBlogs / $limit);
        }
        else
        {
            $totalPages = 0;
        }
        if ($page > $totalPages)
        {
            $page = $totalPages;
        }

        $offset = $limit * $page - $limit;
        if ($offset < 0)
        {
            $offset = 0;
        }


        $gridData = $ljUsernamesTable->gridData($sidx, $sord, $offset, $limit, $where);
        $i = 0;
        foreach ($gridData as $id => $data)
        {
            $data['name'] = "<a href='http://{$data['name']}.livejournal.com/'><img src='/images/lj/userinfo.gif' border='0' /></a>&nbsp;" .
                            "<a href='/lj/blog-detailed/blog/{$data['name']}'>{$data['name']}</a>";
            $rows[$i]['id'] = $data['id'];
            $rows[$i]['cell'] = array_values($data);
            $i++;
        }

        $response = array('page' => $page, 'total' => $totalPages, 'records' => $numBlogs, 'rows' => $rows);
        $this->_helper->json($response);
    }
}
?>

Модель таблицы


<?php

class LjUsernames extends Zend_Db_Table
{
    protected $_name = 'lj_usernames';

    public function gridData($sidx, $sord, $offset, $limit, $where = array())
    {
        $select = $this->getAdapter()->select()
                       ->from($this->_name)
                       ->limit($limit, $offset)
                       ->order("{$sidx} {$sord}");

        if (isset($where['nameLike']))
        {
            $select->where("name LIKE '{$where['nameLike']}%'");
        }

        if (isset($where['ourBlog']))
        {
            $select->where('our_blog = ?', $where['ourBlog']);
        }
        
        $stmt = $this->getAdapter()->query($select);
        $res = $stmt->fetchAll();

        return $res;
    }
?>

JavaScript 

window.Lj =
{
	tips : $(".validateTips"),
	keyPressTimeout: null, 
	blogsList : function()
	{
		$("#list").jqGrid({
		    url:'/lj/jqgrid-blogs-list/',
		    datatype: 'json',
		    mtype: 'GET',
		    colNames:['id','Name', 'Наш блог?', 'Создан','Обновлен','Коммент. получено','Коммент. отправлено',
		   	          'Друзья', 'В друзьях', 'Постов', 'ТИЦ', 'PR', 'Яндекс инд.', 'Google инд.', 'SEO data updated', 'Password'],
		    colModel :[ 
		      {name:'id', index:'id', width:60, align:'center'}, 
		      {name:'name', index:'name', width:130, align:'left'}, 
		      {name:'our_blog', index:'our_blog', width:80, align:'right'}, 
		      {name:'created', index:'created', width:125, align:'right', sortable: 1}, 
		      {name:'updated', index:'updated', width:125, align:'right', sortable: 1}, 
		      {name:'comments_recieved', index:'comments_recieved', width:130, sortable:true, align:'center'},
		      {name:'comments_sent', index:'comments_sent', width:145, align:'center'},
		      {name:'friends', index:'friends', width:55, align:'center', sortable: 1}, 
		      {name:'friend_of', index:'friend_of', width:70, align:'center', sortable: 1}, 
		      {name:'posts_count', index:'posts_count', width:55, align:'center', sortable: 1}, 
		      {name:'yandex_cy', index:'yandex_cy', width:55, align:'center', sortable: 1}, 
		      {name:'google_pr', index:'google_pr', width:55, align:'center', sortable: 1}, 
		      {name:'yandex_indexed', index:'yandex_indexed', width:85, align:'center', sortable: 1},
		      {name:'goolge_indexed', index:'goolge_indexed', width:80, align:'center', sortable: 1}, 
		      {name:'seo_data_updated', index:'seo_data_updated', width:125}, 
		      {name:'password', index:'password', width:70}, 
		    ],
		    pager: '#pager',
		    height: 400,
		    rowNum:50,
//		    rowList:[10,20,30],
		    sortname: 'id',
		    sortorder: 'desc',
		    viewrecords: true,
		    caption: 'Blogs'
		});
 
		$('#nameFilter').keyup(function(){
			if (Lj.keyPressTimeout != null)
			{
				clearTimeout(Lj.keyPressTimeout);
			}
			Lj.keyPressTimeout = setTimeout(Lj.refilterBlogList, 200);
		});
		$("input[name='ourblog']:radio").change(function() {
			Lj.refilterBlogList();
	    });
	},
 
	refilterBlogList: function()
	{
		var name = $('#nameFilter').val(),
		our_blog = $('#ourBlog:checked').val();
		$("#list")
		.setGridParam({
			url:"/lj/jqgrid-blogs-list/?filterName="+name+"&filterOurBlog="+our_blog,
			page:1})
		.trigger("reloadGrid");		
	},
};

<h3><a href="/lj/">На главную</a></h3>
<h1>Блоги</h1>
<h4>Фильтр</h4>
<p>Наши блоги <input type="radio" id="ourBlog" name="ourblog" value="1" />Да
<input type="radio" id="ourBlog" name="ourblog" value="0" checked="checked" />Нет</p>
<p>Имя<input type="text" id="nameFilter" /></p>
<table id="list"></table>
<div id="pager"></div>

В итоге получается вот что

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

Комментарии