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/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.
  • +5
  • 10.5k
  • 8
Share post

Comments 8

    0
    А в чём различия данного грида и стандартного CGridView?
      0
      У него достаточно богатый набор свойств, с помощью которых можно упростить и улучшить отображение данных. Например: возможность сворачивания/разворачивания грида, фиксации колонки/строки, создание общего заголовка для нескольких колонок, контекстное меню и объединение ячеек.

      Очень много интересных примеров использования есть на сайте разработчика. Если интересно могу написать более подробную статью об этом.

      0
      /easyui/jquery-1.8.0.min.js
      jquery от easyui подключать не нужно, yii есть Yii::app()->clientScript->registerCoreScript('jquery');

      Мне кажется или js-grid не будет эффективен, когда данных будет ну очень много?
        0
        Большое количество данных, судя по демо на сайте разработчиков, не является нерешаемой проблемой.

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

        Но по факту, если отобразить 100-200 тыс. строк, с 10-15 колонками информации, то браузер начнет неплохо подвисать.
        +1
        Супер! Только прошу ради бога не убирайте запись в черновики!!!
          0
          Еще есть KendoUI. В EasyUI неприятных глюков хватает. Хотя и Kendo может доставить немало мучительных минут.
            0
            KendoUI — это замечательный набор виджетов, но он, как мне кажется, относится больше к комплексным продуктам уровня ExtJS или GWT. Что его отличает, так это платная реализация JSP, ASP.NET, PHP компонентов.
            0
            Если говорить только о таблицах (а не о целом наборе UI компонент), то мне очень нравится jqGrid.

            Only users with full accounts can post comments. Log in, please.