事前に準備する必要があるものは何ですか？
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を使用して作成されたデザインに完全に適合する優れたデータグリッドがあります。