GridView เป็นอีกหนึ่งคอมโพเนนต์ของ Yii2 ที่ช่วยให้เราสร้างตารางแสดงผลข้อมูลได้อย่างง่ายดาย โดย GridView จะสร้าง HTML table ให้เราโดยอัตโนมัติโดยอิงจาก Model หรือ ArrayDataProvider ที่เรากำหนด

ตัวอย่างการใช้งาน GridView ใน Yii2 ดังนี้:

1. สร้าง Model ของข้อมูลที่เราต้องการแสดงผล

2. สร้าง Action ใน Controller สำหรับแสดง GridView และส่งข้อมูลไปแสดงผล

   public function actionIndex() { $searchModel = new MyModelSearch(); $dataProvider = $searchModel->search(Yii::$app->request->queryParams); return $this->render('index', [ 'searchModel' => $searchModel, 'dataProvider' => $dataProvider, ]); }

   โดยในตัวอย่างนี้ MyModelSearch เป็น Model ที่ใช้สำหรับค้นหาข้อมูล และ $dataProvider เป็น ArrayDataProvider ที่เก็บข้อมูลที่จะนำไปแสดงผล

3. สร้าง View สำหรับแสดง GridView โดยใช้ GridView Widget ของ Yii2

   <?= GridView::widget([ 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'columns' => [ ['class' => 'yii\grid\SerialColumn'], 'id', 'name', 'email:email', 'created_at:datetime', ['class' => 'yii\grid\ActionColumn'], ], ]); ?>

   ในตัวอย่างนี้ dataProvider เป็น ArrayDataProvider ที่เราส่งมาจาก Controller และ filterModel เป็น Model ที่ใช้สำหรับค้นหาข้อมูล และ columns กำหนด columns ของตารางที่ต้องการแสดงผล

4. กำหนดการใช้งาน GridView ตามความต้องการ โดยสามารถกำหนด option ต่าง ๆ เช่น การใช้งาน Pagination, Sorting, การแสดง Column และอื่น ๆ ตามความต้องการ

5. ใน Yii2 GridView มีความสามารถในการจัดการ Pagination และ Sorting ของข้อมูลได้อย่างง่ายดายด้วยการใช้งานตัวเลือก (option) ต่าง ๆ ที่มีอยู่ให้เลือก

   การใช้งาน Pagination ใน GridView สามารถทำได้โดยกำหนด dataProvider ด้วย yii\data\ActiveDataProvider หรือ yii\data\ArrayDataProvider และกำหนด pagination option ตามตัวอย่างนี้:

   <?= GridView::widget([ 'dataProvider' => $dataProvider, 'columns' => [ 'id', 'name', 'email', ], 'pager' => [ 'options' => ['class' => 'pagination'], // set clas name to ul element 'prevPageLabel' => '<span class="glyphicon glyphicon-chevron-left"></span>', 'nextPageLabel' => '<span class="glyphicon glyphicon-chevron-right"></span>', 'activePageCssClass' => 'active', // set active class for li element 'linkOptions' => ['class' => 'page-link'], // set class for a tag 'disabledPageCssClass' => 'disabled', // set class for disabled li element 'maxButtonCount' => 5, // max number of page links to display ] ]); ?> 

6. ใน Yii2 GridView มีความสามารถในการจัดการ Pagination และ Sorting ของข้อมูลได้อย่างง่ายดายด้วยการใช้งานตัวเลือก (option) ต่าง ๆ ที่มีอยู่ให้เลือก

   การใช้งาน Pagination ใน GridView สามารถทำได้โดยกำหนด dataProvider ด้วย yii\data\ActiveDataProvider หรือ yii\data\ArrayDataProvider และกำหนด pagination option ตามตัวอย่างนี้:

   <?= GridView::widget([ 'dataProvider' => $dataProvider, 'columns' => [ 'id', 'name', 'email', ], 'pager' => [ 'options' => ['class' => 'pagination'], // set clas name to ul element 'prevPageLabel' => '<span class="glyphicon glyphicon-chevron-left"></span>', 'nextPageLabel' => '<span class="glyphicon glyphicon-chevron-right"></span>', 'activePageCssClass' => 'active', // set active class for li element 'linkOptions' => ['class' => 'page-link'], // set class for a tag 'disabledPageCssClass' => 'disabled', // set class for disabled li element 'maxButtonCount' => 5, // max number of page links to display ] ]); ?>

7. สำหรับ Sorting ใน GridView สามารถทำได้โดยกำหนด dataProvider ด้วย yii\data\ActiveDataProvider หรือ yii\data\ArrayDataProvider และกำหนด sort option ตามตัวอย่างนี้:

   <?= GridView::widget([ 'dataProvider' => $dataProvider, 'columns' => [ [ 'attribute' => 'id', 'label' => 'ID', 'headerOptions' => ['class' => 'text-center'], 'contentOptions' => ['class' => 'text-center'], 'sortLinkOptions' => ['class' => 'sorting'], ], [ 'attribute' => 'name', 'label' => 'Name', 'headerOptions' => ['class' => 'text-center'], 'contentOptions' => ['class' => 'text-center'], 'sortLinkOptions' => ['class' => 'sorting'], ], [ 'attribute' => 'email', 'label' => 'Email', 'headerOptions' => ['class' => 'text-center'], 'contentOptions' => ['class' => 'text-center'], 'sortLinkOptions' => ['class' => 'sorting'], ], ], 'pager' => [ 'options' => ['class' => 'pagination'], // set clas name to ul element 'prevPageLabel' => '<span class="glyphicon glyphicon-chevron-left"></span>', 'nextPageLabel' => '<span class="glyphicon glyphicon-chevron-right"></span>', 'activePageCssClass' => 'active', // set active class for li element 'linkOptions' => ['class' => 'page-link'], // set class for a tag 'disabledPageCssClass' => 'disabled', // set class for disabled li element 'maxButtonCount' => 5, // max number of page links to display ], 'sort' => [ 'defaultOrder' => [ 'id' => SORT_DESC, ], 'attributes' => [ 'id' => [ 'label' => 'ID', 'default' => SORT_DESC, ], 'name' => [ 'label' => 'Name', 'default' => SORT_ASC, ], 'email' => [ 'label' => 'Email', 'default' => SORT_ASC, ], ], 'sortLinkOptions' => ['class' => 'sorting'], // set class for th element ], ]); ?>

   ในตัวอย่างนี้ sort กำหนดให้เรียงลำดับตาม id โดยเรียงจากมากไปน้อย (SORT_DESC) และกำหนดให้สามารถเรียงลำดับตาม name และ email ได้โดยเรียงตามตัวอักษรเริ่มต้นจาก A ถึง Z (SORT_ASC)

8. นอกจากนี้ยังสามารถกำหนด option อื่น ๆ เช่น การใช้งาน Filter, Export, การแสดงข้อมูลที่ไม่ต้องการแสดงได้โดยใช้ GridView Widget ของ Yii2 ในการกำหนด option เหล่านี้

   การใช้งาน Filter สามารถทำได้โดยกำหนด filterModel ของ GridView ดังนี้:

   <?= GridView::widget([ 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'columns' => [ 'id', 'name', 'email', ], ]); ?>

   ในตัวอย่างนี้ filterModel เป็น Model ที่ใช้สำหรับค้นหาข้อมูล

9. การใช้งาน Export สามารถทำได้โดยกำหนด export option ของ GridView ดังนี้:

   <?= GridView::widget([ 'dataProvider' => $dataProvider, 'columns' => [ 'id', 'name', 'email', ], 'export' => [ 'fontAwesome' => true, 'showConfirmAlert' => false, 'target' => GridView::TARGET_BLANK, 'icon' => [ 'excel' => 'fa fa-file-excel-o', 'pdf' => 'fa fa-file-pdf-o', 'csv' => 'fa fa-file-text-o', 'html' => 'fa fa-file-code-o', ], 'options' => ['class' => 'btn btn-default'], 'label' => 'Export', ], ]); ?>

   ในตัวอย่างนี้ export กำหนดให้สามารถ Export เป็น Excel, PDF, CSV และ HTML ได้ และกำหนด option อื่น ๆ เช่น fontAwesome, showConfirmAlert, target, icon, options และ label

10. การแสดงข้อมูลที่ไม่ต้องการแสดง สามารถทำได้โดยกำหนด visible option ใน Column ของ GridView ดังนี้:

    <?= GridView::widget([ 'dataProvider' => $dataProvider, 'columns' => [ 'id', 'name', [ 'attribute' => 'email', 'visible' => false, // hide this column ], ], ]); ?>

    ในตัวอย่างนี้ email ถูกกำหนดให้ไม่แสดงผลในตารางแสดงข้อมูล

11. การใช้งาน GridView ใน Yii2 เป็นวิธีการแสดงผลข้อมูลที่มีประสิทธิภาพสูง และมีความสามารถในการ customize ตามความต้องการ โดยสามารถกำหนด option ต่าง ๆ ได้ตามต้องการ

    อย่างไรก็ตาม ในกรณีที่ต้องการ customize GridView ในรูปแบบที่ไม่สามารถกำหนดได้จาก option ที่มีอยู่ สามารถสร้าง GridView Widget ใหม่ขึ้นมาจาก yii\grid\GridView และ override method ต่าง ๆ ที่ต้องการ ตัวอย่างเช่นการแสดงข้อมูลเป็นรูปภาพแทนข้อความ

    use yii\grid\GridView; class ImageGridView extends GridView { public $imageAttribute; // attribute name for image url protected function renderDataCellContent($model, $key, $index) { if ($this->imageAttribute !== null) { $url = $model->{$this->imageAttribute}; return Html::img($url, ['width' => '100']); } else { return parent::renderDataCellContent($model, $key, $index); } } }

    ในตัวอย่างนี้ ImageGridView สืบทอดมาจาก yii\grid\GridView และ override method renderDataCellContent เพื่อแสดงข้อมูลเป็นรูปภาพแทนข้อความ โดยกำหนด $imageAttribute เพื่อกำหนด attribute ที่เก็บ url ของรูปภาพ

12. สำหรับการใช้งาน ImageGridView สามารถทำได้ดังนี้:

    <?= ImageGridView::widget([ 'dataProvider' => $dataProvider, 'columns' => [ 'id', 'name', [ 'attribute' => 'image_url', 'imageAttribute' => 'image_url', // set attribute for image url ], ], ]); ?>

    ในตัวอย่างนี้ ImageGridView กำหนด imageAttribute เพื่อแสดงข้อมูลเป็นรูปภาพแทนข้อความ โดยกำหนด image_url เป็น attribute ที่เก็บ url ของรูปภาพ

13. เนื่องจาก GridView ใน Yii2 เป็น Component ของ Yii Framework ทำให้สามารถกำหนด Theme ของ GridView ได้โดยสร้าง GridView สำหรับแต่ละ Theme แล้วกำหนด option ต่าง ๆ ของ GridView ตาม Theme นั้นๆ

    ตัวอย่างเช่น สำหรับ Theme Bootstrap 4 สามารถสร้าง GridView ใหม่ขึ้นมาจาก yii\grid\GridView และกำหนด option ตามตัวอย่างนี้:

    use yii\grid\GridView; class Bootstrap4GridView extends GridView { public $tableOptions = ['class' => 'table table-striped table-bordered']; public $headerRowOptions = ['class' => 'thead-light']; public $pager = [ 'class' => 'yii\bootstrap4\LinkPager', 'options' => ['class' => 'pagination justify-content-center'], 'prevPageCssClass' => 'page-item', 'nextPageCssClass' => 'page-item', 'prevPageLabel' => '<span class="page-link">&laquo;</span>', 'nextPageLabel' => '<span class="page-link">&raquo;</span>', 'activePageCssClass' => 'page-item active', 'disabledPageCssClass' => 'page-item disabled', 'linkOptions' => ['class' => 'page-link'], ]; }

    ในตัวอย่างนี้ Bootstrap4GridView สืบทอดมาจาก yii\grid\GridView และ override option ต่าง ๆ ที่ใช้กับ Bootstrap 4 Theme เช่นกัน โดยกำหนด $tableOptions เพื่อกำหนด class ของ table, $headerRowOptions เพื่อกำหนด class ของ header row และ $pager เพื่อกำหนดการแสดงผลของ Pagination