Хочу табличку! Хочу табличку с сортировкой, опциональной разбивкой по страницам и близкой к стилю 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. Обновим страницу и получим наипростейший грид, с хорошими возможностями для дальнейшего развития. Большая часть параметров является интуитивно понятной и не требует дополнительного объяснения.
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.
Автор: shuguroff
