jQuery EasyUI Datagrid + Yiiフレームワーク

タブレットが欲しい！ 並べ替え、オプションのページネーション、およびブートストラップに似たスタイルのラベルが必要ですが、多くの列を追加できます。

事前に準備する必要があるものは何ですか？

1. Yiiフレームワーク（ 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コードを追加して、ビューを変更します

ページにグリッドを追加するには、少なくとも2つの方法があります。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.ページネーションを追加します。これには、グリッドのページネーション=「true」プロパティを設定し、コントローラーで2つの「行」パラメーター（1ページに表示されるレコード数と「ページ」-表示ページの数）を処理する必要があります。

ビューを変更します。

 <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"パラメーターを処理します-並べ替えが実行される列。「順序」は並べ替えの種類です。

ビューを変更します。

 <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を使用して作成されたデザインに完全に適合する優れたデータグリッドがあります。