Yii 1.1: eziiui

Extension to use CGridView, CDetailView, CLinkPager with jquery-ui
11 followers

Version 1.0.12 for yii 1.1.7

Version 1.0.10 for yii 1.1.5

Version 1.0.9 optimized for yii 1.1.4, some enh and bug fix

Version 1.0.8 optimized for yii 1.1.3, css improved, NO MORE jqGrid

Version 1.0.7 optimized for yii 1.1.2

Version 1.0.4+ only for yii 1.1.1

Extension to use CGridView, CDetailView and CLinkPager with jquery-ui theme framework.

It includes a new jqGrid wrapper based on CJuiWidget from zii.

Put it in your extensions folder and use it like normal widget. Since it isn't extended from CJuiWidget, you need to include a jquery-ui css theme in your page or, to test, simply put a zii CJuiWidget (CJuiTabs for example) before in order to auto-include a default theme.

For jqgrid you don't need to include any jquery-ui.css in the page (it uses zii jui default theme)

Tested (quickly) on FF 3.5.x, Google Chrome, IE8, IE7, IE6

Known issues: - IE6, IE7 pager buttons spacing and dimensions are not the same as in FF

jqGrid is a bit more than a wrapper. Feel free to help me to improve it!

Documentation

Requirements

  • Version 1.0.4+ Yii 1.1.1+
  • Yii 1.1.0 or above

Installation

  • Extract the release file under protected/extensions

Usage

See the following code example:

// use 'ext.eziiui.grid.CGridViewUI' from version 1.0.4
$this->widget('ext.eziiui.CGridViewUI', array(
    'dataProvider'=>$model,
    'columns'=>array(
        'column1',
        //......
    ),
));
 
$this->widget('ext.eziiui.CDetailViewUI', array(
    'data'=>$model,
    'attributes'=>array(
        'id',   
        'column1',
    ),
));

CJuiJqGrid

view

$this->widget('ext.eziiui.jqgrid.CJuiJqGrid', array(
    'modelClass'=>'Model', // used for columns label
    'htmlOptions'=>array(
        'id'=>'grid',
    ),
    'navbar'=>true,
    'options'=>array(
        'height'=>400,
        'autowidth'=>true,
        'datatype'=>'json',
        'url'=>Yii::app()->createUrl('index'), // ajax request for data
        'colNames'=>array('id','column1','column2'), // model attributes
//      'colModel'=>array( // optional, this is automatically generated from colNames if 'modelClass' is defined
//           array('index'=>'id','name'=>'id','hidden'=>true)
//           array('index'=>'column1','name'=>'column1')
//           array('index'=>'column2','name'=>'column2')
//      ),
        'rowNum'=>20,
        'rowList'=>array(20,50,100),
        'sortname'=>'column',
        'sortorder'=>"asc",
        'caption'=>"Grid title",
    )
)

controller

if (Yii::app()->request->isAjaxRequest) {
    $criteria=new CDbCriteria;
    $page = $_GET['page'];
    $limit = $_GET['rows'];
    $sidx = $_GET['sidx']; // get index row - i.e. user click to sort
    $sord = $_GET['sord']; // get the direction
    $dataProvider = new CActiveDataProvider('Model', array(
        'criteria'=>$criteria,
        'pagination'=>array(
            'currentPage'=>$page-1, // CActiveDataProvider is zero-based, jqGrid not
            'pageSize'=>$limit,
        ),
        'sort'=>array(
            'defaultOrder'=>"$sidx $sord",
        )
    ));
    $count = $dataProvider->totalItemCount;
    $total_pages=($count) ? $total_pages = ceil($count/$limit) : $total_pages = 0;
    // prepare json data for jqGrid
    $response->page = $page;
    $response->total = $total_pages;
    $response->records = $count;
    $data=$dataProvider->getData();
    foreach($data as $row) {
        $response->rows[]=array(
        'id'=>$row->id,
        'cell'=>array(
            $row->column1,
                $row->column2,
                //...
            )
        );
    }
    echo CJavaScript::jsonEncode($response);
}

Have a look inside CJuiJqGrid.php for more documentation

Change Log

April 28, 2011

1.0.12

Enh: update for yii-1.1.7

November 23, 2010

1.0.10

Enh: update for yii-1.1.5

November 5, 2010

1.0.9

  • Enh: added UHtml (builds input fields adding ui-corner-all class automatically)
  • Enh: added CActiveFormUI (same as CActiveForm but uses UHtml)
  • Enh: added CCheckBoxColumnUI.php (thanks to Corey Tisdale for fixing CCheckColumn select all css error)
  • Enh: CLinkPagerUI css improvements and bug fix
  • Ehn: CDetailViewUI added visible property

July 29, 2010

1.0.8

  • Enh: css improvements
  • Enh: added visible property to CDetailViewUI
  • ...: removed jqGrid... sorry but I don't use jqGrid, so I can't maintain it again.

May 3, 2010

1.0.7

  • Enh: CLinkPagerUI hover effect
  • Enh: css improvements
  • Enh: yii-1.1.2 support

March 15, 2010

1.0.6

  • Bug: CSS bug

1.0.5

  • Bug: Pagination bug solved
  • Enh: CGridViewUI now is derived from CBaseListUI

1.0.4

  • Upd: changed path from "eziiui.widgets.CGridViewUI" to "eziiui.widgets.grid.CGridViewUI"
  • Enh: yii 1.1.1 support
  • Enh: minor improvements

February 1, 2010

  • 1.0.3 added jqGrid wrapper based on CJuiWidget from zii
  • 1.0.2 some fixes and improvements (see CHANGELOG inside).
  • 1.0.1 removed filter property for 1.1.0 compatibility

January 31, 2010

  • 1.0.0 Initial release.

Total 4 comments

#6415 report it
fleuryc at 2012/01/09 03:43am
1.1.9

Any plans on a yii 1.1.9 update?

#188 report it
volkmar at 2010/08/15 05:36am
Testing

Gentleman, would you please publish a little demo programm with a sqlite database for the grids?

Source code is the best documentation. :-)

#865 report it
Mikhail Eremin at 2010/02/16 01:32am
After some work

After some work with that extension i choose to use pure javascript jqgrid. That's because:

-Some of jqgrid functional isn't supported here. -Not able to pass init functions from php to js, because they are treated like strings and you can do nothing with that (except for rewriting params parser or something like that). So it will be hard to make, for example, column search with datepicker. -I dislike asset manager which makes many '8u21hcsk' looking folders :) it's easier to connect only needed assets by yourself(using clientscript) But thanx, anyway. May be if there will be some improvements, it can be good extension. As for me, it helped me to see how jqgrid plugin works :)

#870 report it
Mikhail Eremin at 2010/02/15 01:30am
Pretty good stuff! But...

Very usefull thing(if not to say-the best i ever seen), when dealing with huge amounts of data. server-side sorting, filtering. Yeah baby!!! But it don't support full jqGrid Api. Toolbarfilter, for example. Thought, it's not so hard to extend with that,as I did. Many thanx to author for work. This saved my time. (however all that stuff can be done via javascript, but this widget makes it much more comfortable) sorry for my poor english :) peace

Leave a comment

Please to leave your comment.

Create extension
  • Yii Version: 1.1
  • License: Other Open Source License
  • Developed by: makro
  • Category: User Interface
  • Votes: +9 / -6
  • Downloaded: 4,101 times
  • Created on: Feb 1, 2010
  • Last updated: Apr 28, 2011
  • Tags: jquery-ui, eziiui