Pull to refresh

jQuery EasyUI Datagrid + Yii Framework

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

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

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

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

/easyui/themes/default/easyui.css
/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.
Tags:
Hubs:
+5
Comments 8
Comments Comments 8

Articles