Yii orderable grid

Following Steps :

1. Make sure your database table has a ‘sortOrder’ field.
2. (Optional) Add the ‘sortOrder’ field to your Rules() function in your model
3. Add the ‘actionSort()’ method to your controller to apply the sorting via ajax
4. Add jQuery UI to your view that has the CGridView
5. Setup the jQuery UI Code to work with the CGridView in question
6. (Optional) Apply the sorting to your model’s search() function if need be So lets get started!

DB:  add int filed ‘sortOrder’

Model:

1.Rules:             array(‘id, aid,sortOrder’, ‘numerical’, ‘integerOnly’=>true),

2. Search – $criteria->order = ‘sortOrder  ASC’;

Controller:

public function actionSort()
{
if (isset($_POST[‘items’]) && is_array($_POST[‘items’])) {
$i = 0;
foreach ($_POST[‘items’] as $item) {
$project = AttributeValues::model()->findByPk($item);
$project->sortOrder = $i;
$project->save();
$i++;
}
}
}

Views:
$str_js = ”
var fixHelper = function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
};

$(‘#attrval table.items tbody’).sortable({
forcePlaceholderSize: true,
forceHelperSize: true,
items: ‘tr’,
update : function () {
serial = $(‘#attrval table.items tbody’).sortable(‘serialize’, {key: ‘items[]’, attribute: ‘class’});
$.ajax({
‘url’: ‘” . $this->createUrl(‘//attribute/sort’) . “‘,
‘type’: ‘post’,
‘data’: serial,
‘success’: function(data){
},
‘error’: function(request, status, error){
alert(‘We are unable to set the sort order at this time.  Please try again in a few minutes.’);
}
});
},
helper: fixHelper
}).disableSelection();
“;

Yii::app()->clientScript->registerScriptFile(‘http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js’);
Yii::app()->clientScript->registerScript(‘sortable-project’, $str_js);

$this->widget(‘zii.widgets.grid.CGridView’, array(
‘dataProvider’ => $modelAtrr->search(),
//’selectionChanged’=>’updateEditForm’,
‘id’=>’attrval’,
// ‘filter’=>$modelAtrr,
‘rowCssClassExpression’=>'”items[]_{$data->id}”‘,
‘columns’ => array(
array(
‘name’ => ‘value’,
‘type’ => ‘raw’,
‘htmlOptions’ => array(‘class’=>’date_cell’),

),
array
(
‘class’=>’CButtonColumn’,
‘template’=>'{delete}’,
‘buttons’=>array
(
‘delete’ => array
(
‘url’=>’Yii::app()->createUrl(“attribute/deleteAttrVal”, array(“id”=>$data->id))’,
),
),
)
),
));?>

Note: dont forget to modify model class and to call controller function of your own.

thats it, enjoy