jQuery EasyUI Datagrid + Yii Framework

I want a sign! I want a sorting table, optional page breakdown and close to the bootstrap style, but so that you can add many many columns to it.



What you need to prepare in advance?



1. Yii Framework ( http://www.yiiframework.com/ )

You need to download, install, run, understand the logic of building projects.

')

2. jQuery EasyUI ( http://www.jeasyui.com/ )

It is necessary to download, unpack and copy to the folder with project resources in the Yii Framework and include the following files:



/easyui/themes/default/easyui.css

/easyui/themes/icon.css

/easyui/jquery-1.8.0.min.js

/easyui/jquery.easyui.min.js

What's next?

1. Add an action to the controller that will return the data for constructing the table. In my case, a model from one forwarding accounting system will be used.

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. Modify the view by adding the html code for the label itself.

There are at least two ways to add a grid to a page: describe it as html tablets or use 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. We will refresh the page and get a simplest grid, with good opportunities for further development. Most of the parameters are intuitive and require no further explanation.









4. Add a pagination; to do this, set the pagination = “true” property of the grid and process two parameters in the controller: “rows” - the number of records displayed on one page and “page” - the number of the displayed page.



Modify the view:

 <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> 

Modify the controller:

 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. Add a sort, to do this, add the sortName = "order_id" and sortOrder = "asc" properties to the grid, which will be responsible for the default sorting, add the sortable = "true" property to the columns, then process the "sort" parameters in the controller - the column on which the sorting is performed and “order” - the sorting type.



Modify the view:

 <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> 

Modify the controller:

 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. Change the contents of the column by specifying a function that converts its contents:

 <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> 

Conclusion

As a result, we have a good data grid with sorting, pagination, the ability to easily modify the contents of the cells, which at the same time normally fit into the design made using Twitter Bootstrap.