jQuery EasyUI Datagrid + Yii Framework

Хочу табличку! Хочу табличку с сортировкой, опциональной разбивкой по страницам и близкой к стилю bootstrap, но так, чтобы в нее можно было добавить много много колонок.

Что нужно подготовить заранее?

1. Yii Framework ( http://www.yiiframework.com/ )
Нужно скачать, установить, запустить, разобраться с логикой построения проектов.

2. jQuery EasyUI ( http://www.jeasyui.com/ )
Нужно скачать, распаковать и скопировать в папку с ресурсами проекта в Yii Framework и подключить следующие файлы:

/easyui/themes/default/easyui.css
/easyui/easyui/themes/icon.css
/easyui/jquery-1.8.0.min.js
/easyui/jquery.easyui.min.js

Что дальше?

1. Добавим в контроллер действие, которое будет возвращать данные для построения таблички. В моем случае будет использоваться модель из одной экспедиторской учетной системы.

public function actionGetData() {

    $model = new DislocOrders();
    $rs = $model->findAll();  

    $items = array();
    // формируем массив с данными
    foreach( $rs as $row ) {
            // в массив кладем только те поля, что нужны при просмотре
            $items[] = array( 
                    'order_id' => $row->id,
                    'vagon_no' => $row->vagon_no,
                    'sp_name' => $row->sp_name,
                    'fp_name' => $row->fp_name,
                    'op_name' => $row->op_name,
                    'op_st_name' => $row->op_st_name,
                    'op_date' => $row->op_date,
                    'days_wm' => $row->days_wm,
                );
    }

    header('Content-Type: application/json');
    echo CJSON::encode( 
        array(
            total => count($items), // общее кол-во строк
            rows => $items, // данные
        )
    );
    Yii::app()->end();

}

2. Изменим вьюшку, добавив в нее html код той самой таблички

Существует как минимум два способа добавить грид на страницу: описать его в виде html таблички или использовать javascript.

<table class="easyui-datagrid" title="Basic DataGrid" style="width:auto;height:500px" data-options="singleSelect:true,collapsible:true,url:'<?php echo Yii::app()->createUrl("dislocOrders/getData"); ?>'">  
    <thead>  
        <tr>  
            <th data-options="field:'vagon_no',width:80">№ вагона</th>  
            <th data-options="field:'sp_name',width:100">Ст. отправления</th>  
            <th data-options="field:'fp_name',width:80,align:'right'">Ст. назначения</th>  
            <th data-options="field:'op_st_name',width:60,align:'center'">Ст. операции</th>  
            <th data-options="field:'op_name',width:80,align:'right'">Операция</th>  
            <th data-options="field:'op_date',width:250">Дата операции</th>  
            <th data-options="field:'days_wm',width:60,align:'center'">Дни без дв-я</th>  
        </tr>  
    </thead>  
</table>

3. Обновим страницу и получим наипростейший грид, с хорошими возможностями для дальнейшего развития. Большая часть параметров является интуитивно понятной и не требует дополнительного объяснения.

jQuery EasyUI Datagrid + Yii Framework

4. Добавим разбивку на страницы, для этого необходимо установить у грида свойство pagination=«true» и обработать в контроллере два параметра «rows» — количество записей, выводимых на одной странице и «page» — номер отображаемой страницы.

Модифицируем вьюшку:

<table class="easyui-datagrid" title="Basic DataGrid" style="width:auto;height:500px" pagination="true" data-options="singleSelect:true,collapsible:true,url:'<?php echo Yii::app()->createUrl("dislocOrders/getData"); ?>'">  
    <thead>  
        <tr>  
            <th data-options="field:'vagon_no',width:80">№ вагона</th>  
            <th data-options="field:'sp_name',width:100">Ст. отправления</th>  
            <th data-options="field:'fp_name',width:80,align:'right'">Ст. назначения</th>  
            <th data-options="field:'op_st_name',width:60,align:'center'">Ст. операции</th>  
            <th data-options="field:'op_name',width:80,align:'right'">Операция</th>  
            <th data-options="field:'op_date',width:250">Дата операции</th>  
            <th data-options="field:'days_wm',width:60,align:'center'">Дни без дв-я</th>  
        </tr>  
    </thead>  
</table>

Модифицируем контроллер:

public function actionGetData() {

    $model = new DislocOrders();
    $criteria = new CDbCriteria();
    $count=DislocOrders::model()->count($criteria);
    $criteria->limit = $_POST['rows']; // проверь параметр на адекватность!
    $criteria->offset = $_POST['rows']*($_POST['page']-1); // проверь параметр на адекватность!
    $rs = DislocOrders::model()->findAll($criteria);

    $items = array();

    // формируем массив с данными
    foreach( $rs as $row ) {

            // в массив кладем только те поля, что нужны при просмотре
            $items[] = array( 
                    'order_id' => $row->id,
                    'vagon_no' => $row->vagon_no,
                    'sp_name' => $row->sp_name,
                    'fp_name' => $row->fp_name,
                    'op_name' => $row->op_name,
                    'op_st_name' => $row->op_st_name,
                    'op_date' => $row->op_date,
                    'days_wm' => $row->days_wm,
                );

    }

    header('Content-Type: application/json');
    echo CJSON::encode( 
        array(
            total => $count, // общее кол-во строк
            rows => $items, // данные
        )
    );
    Yii::app()->end();

}

5. Добавим сортировку, для этого добавим к гриду свойства sortName=«order_id» и sortOrder=«asc», которые будут отвечать за сортировку по-умолчанию, добавим к колонкам свойство sortable=«true», затем обработаем в контроллере параметры «sort» — столбец, по которому выполняется сортировка и «order» — тип сортировки.

Модифицируем вьюшку:

<table class="easyui-datagrid" title="Basic DataGrid" style="width:auto;height:500px" pagination="true" sortName="vagon_no" sortOrder="asc" data-options="singleSelect:true,collapsible:true,url:'<?php echo Yii::app()->createUrl("dislocOrders/getData"); ?>'">  
    <thead>  
        <tr>  
            <th data-options="field:'vagon_no',width:80" sortable="true">№ вагона</th>  
            <th data-options="field:'sp_name',width:100"  sortable="true">Ст. отправления</th>  
            <th data-options="field:'fp_name',width:80,align:'right'">Ст. назначения</th>  
            <th data-options="field:'op_st_name',width:60,align:'center'">Ст. операции</th>  
            <th data-options="field:'op_name',width:80,align:'right'">Операция</th>  
            <th data-options="field:'op_date',width:250">Дата операции</th>  
            <th data-options="field:'days_wm',width:60,align:'center'" sortable="true">Дни без дв-я</th>  
        </tr>  
    </thead>  
</table>

Модифицируем контроллер:

public function actionGetData() {

    $model = new DislocOrders();
    $criteria = new CDbCriteria();
    $count=DislocOrders::model()->count($criteria);

     // проверь параметры на адекватность!
    $criteria->limit = $_POST['rows'];
    $criteria->offset = $_POST['rows']*($_POST['page']-1);
    $criteria->order = $_POST['sort']." ".$_POST['order'];

    $rs = DislocOrders::model()->findAll($criteria);

    $items = array();

    // формируем массив с данными
    foreach( $rs as $row ) {

            // в массив кладем только те поля, что нужны при просмотре
            $items[] = array( 
                    'order_id' => $row->id,
                    'vagon_no' => $row->vagon_no,
                    'sp_name' => $row->sp_name,
                    'fp_name' => $row->fp_name,
                    'op_name' => $row->op_name,
                    'op_st_name' => $row->op_st_name,
                    'op_date' => $row->op_date,
                    'days_wm' => $row->days_wm,
                );

    }

    header('Content-Type: application/json');
    echo CJSON::encode( 
        array(
            total => $count, // общее кол-во строк
            rows => $items, // данные
        )
    );
    Yii::app()->end();

}

6. Изменяем содержимое колонки указав функцию, которая преобразует её содержимое:

<table class="easyui-datagrid" title="Basic DataGrid" style="width:auto;height:500px" pagination="true" sortName="vagon_no" sortOrder="asc" data-options="singleSelect:true,collapsible:true,url:'<?php echo Yii::app()->createUrl("dislocOrders/getData"); ?>'">  
    <thead>  
        <tr>  
            <th data-options="field:'vagon_no',width:80,formatter:createLink" sortable="true">№ вагона</th>  
            <th data-options="field:'sp_name',width:100"  sortable="true">Ст. отправления</th>  
            <th data-options="field:'fp_name',width:80,align:'right'">Ст. назначения</th>  
            <th data-options="field:'op_st_name',width:60,align:'center'">Ст. операции</th>  
            <th data-options="field:'op_name',width:80,align:'right'">Операция</th>  
            <th data-options="field:'op_date',width:250">Дата операции</th>  
            <th data-options="field:'days_wm',width:60,align:'center'" sortable="true">Дни без дв-я</th>  
        </tr>  
    </thead>  
</table> 

<script>  
    function createLink(val,row){  
            return '<a href="<?php echo Yii::app()->createUrl("dislocOrders/viewHistory"); ?>?id='+row.order_id+'">'+val+'</a>';  
    }  
</script>

Заключение

В результате мы имеем неплохой датагрид с сортировкой, разбивкой по страницам, возможностью легко модифицировать содержимое ячеек, который при этом нормально вписывается в дизайн сделанный с использованием Twitter Bootstrap.