Update Article: 155

Category ID

Content Name

Clear URLs

URL Off page

Content Desc

GridView เป็นอีกหนึ่งคอมโพเนนต์ของ Yii2 ที่ช่วยให้เราสร้างตารางแสดงผลข้อมูลได้อย่างง่ายดาย โดย GridView จะสร้าง HTML table ให้เราโดยอัตโนมัติโดยอิงจาก Model หรือ ArrayDataProvider ที่เรากำหนด 
ตัวอย่างการใช้งาน GridView ใน Yii2 ดังนี้: 
<ol>
<li>
สร้าง Model ของข้อมูลที่เราต้องการแสดงผล
</li>
<li>
สร้าง Action ใน Controller สำหรับแสดง GridView และส่งข้อมูลไปแสดงผล
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php">public function actionIndex()
{
 $searchModel = new MyModelSearch();
 $dataProvider = $searchModel-&gt;search(Yii::$app-&gt;request-&gt;queryParams);

return $this-&gt;render('index', [
 'searchModel' =&gt; $searchModel,
 'dataProvider' =&gt; $dataProvider,
 ]);
}
</code></div>
</div>
โดยในตัวอย่างนี้ <code>MyModelSearch</code> เป็น Model ที่ใช้สำหรับค้นหาข้อมูล และ <code>$dataProvider</code> เป็น ArrayDataProvider ที่เก็บข้อมูลที่จะนำไปแสดงผล
</li>
<li>
สร้าง View สำหรับแสดง GridView โดยใช้ GridView Widget ของ Yii2
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php-template">&lt;?= GridView::widget([
 'dataProvider' =&gt; $dataProvider,
 'filterModel' =&gt; $searchModel,
 'columns' =&gt; [
 ['class' =&gt; 'yii\grid\SerialColumn'],

'id',
 'name',
 'email:email',
 'created_at:datetime',

['class' =&gt; 'yii\grid\ActionColumn'],
 ],
]); ?&gt;
</code></div>
</div>
ในตัวอย่างนี้ <code>dataProvider</code> เป็น ArrayDataProvider ที่เราส่งมาจาก Controller และ <code>filterModel</code> เป็น Model ที่ใช้สำหรับค้นหาข้อมูล และ <code>columns</code> กำหนด columns ของตารางที่ต้องการแสดงผล
</li>
<li>
กำหนดการใช้งาน GridView ตามความต้องการ โดยสามารถกำหนด option ต่าง ๆ เช่น การใช้งาน Pagination, Sorting, การแสดง Column และอื่น ๆ ตามความต้องการ
</li>
<li>
ใน Yii2 GridView มีความสามารถในการจัดการ Pagination และ Sorting ของข้อมูลได้อย่างง่ายดายด้วยการใช้งานตัวเลือก (option) ต่าง ๆ ที่มีอยู่ให้เลือก
การใช้งาน Pagination ใน GridView สามารถทำได้โดยกำหนด <code>dataProvider</code> ด้วย <code>yii\data\ActiveDataProvider</code> หรือ <code>yii\data\ArrayDataProvider</code> และกำหนด <code>pagination</code> option ตามตัวอย่างนี้:
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-ruby">&lt;?= GridView::widget([
 'dataProvider' =&gt; $dataProvider,
 'columns' =&gt; [
 'id',
 'name',
 'email',
 ],
 'pager' =&gt; [
 'options' =&gt; ['class' =&gt; 'pagination'], // set clas name to ul element
 'prevPageLabel' =&gt; '&lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;',
 'nextPageLabel' =&gt; '&lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;',
 'activePageCssClass' =&gt; 'active', // set active class for li element
 'linkOptions' =&gt; ['class' =&gt; 'page-link'], // set class for a tag
 'disabledPageCssClass' =&gt; 'disabled', // set class for disabled li element
 'maxButtonCount' =&gt; 5, // max number of page links to display
 ]
 ]); ?&gt;&nbsp;</code></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-ruby"></code></div>
<div class="p-4 overflow-y-auto"></div>
</div>
</li>
<li>
<div class="p-4 overflow-y-auto">
ใน Yii2 GridView มีความสามารถในการจัดการ Pagination และ Sorting ของข้อมูลได้อย่างง่ายดายด้วยการใช้งานตัวเลือก (option) ต่าง ๆ ที่มีอยู่ให้เลือก
การใช้งาน Pagination ใน GridView สามารถทำได้โดยกำหนด <code>dataProvider</code> ด้วย <code>yii\data\ActiveDataProvider</code> หรือ <code>yii\data\ArrayDataProvider</code> และกำหนด <code>pagination</code> option ตามตัวอย่างนี้:
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-ruby">&lt;?= GridView::widget([
 'dataProvider' =&gt; $dataProvider,
 'columns' =&gt; [
 'id',
 'name',
 'email',
 ],
 'pager' =&gt; [
 'options' =&gt; ['class' =&gt; 'pagination'], // set clas name to ul element
 'prevPageLabel' =&gt; '&lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;',
 'nextPageLabel' =&gt; '&lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;',
 'activePageCssClass' =&gt; 'active', // set active class for li element
 'linkOptions' =&gt; ['class' =&gt; 'page-link'], // set class for a tag
 'disabledPageCssClass' =&gt; 'disabled', // set class for disabled li element
 'maxButtonCount' =&gt; 5, // max number of page links to display
 ]
 ]); ?&gt;
</code></div>
</div>
</div>
</li>
<li>
สำหรับ Sorting ใน GridView สามารถทำได้โดยกำหนด <code>dataProvider</code> ด้วย <code>yii\data\ActiveDataProvider</code> หรือ <code>yii\data\ArrayDataProvider</code> และกำหนด <code>sort</code> option ตามตัวอย่างนี้:
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-ruby">&lt;?= GridView::widget([
 'dataProvider' =&gt; $dataProvider,
 'columns' =&gt; [
 [
 'attribute' =&gt; 'id',
 'label' =&gt; 'ID',
 'headerOptions' =&gt; ['class' =&gt; 'text-center'],
 'contentOptions' =&gt; ['class' =&gt; 'text-center'],
 'sortLinkOptions' =&gt; ['class' =&gt; 'sorting'],
 ],
 [
 'attribute' =&gt; 'name',
 'label' =&gt; 'Name',
 'headerOptions' =&gt; ['class' =&gt; 'text-center'],
 'contentOptions' =&gt; ['class' =&gt; 'text-center'],
 'sortLinkOptions' =&gt; ['class' =&gt; 'sorting'],
 ],
 [
 'attribute' =&gt; 'email',
 'label' =&gt; 'Email',
 'headerOptions' =&gt; ['class' =&gt; 'text-center'],
 'contentOptions' =&gt; ['class' =&gt; 'text-center'],
 'sortLinkOptions' =&gt; ['class' =&gt; 'sorting'],
 ],
 ],
 'pager' =&gt; [
 'options' =&gt; ['class' =&gt; 'pagination'], // set clas name to ul element
 'prevPageLabel' =&gt; '&lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;',
 'nextPageLabel' =&gt; '&lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;',
 'activePageCssClass' =&gt; 'active', // set active class for li element
 'linkOptions' =&gt; ['class' =&gt; 'page-link'], // set class for a tag
 'disabledPageCssClass' =&gt; 'disabled', // set class for disabled li element
 'maxButtonCount' =&gt; 5, // max number of page links to display
 ],
 'sort' =&gt; [
 'defaultOrder' =&gt; [
 'id' =&gt; SORT_DESC,
 ],
 'attributes' =&gt; [
 'id' =&gt; [
 'label' =&gt; 'ID',
 'default' =&gt; SORT_DESC,
 ],
 'name' =&gt; [
 'label' =&gt; 'Name',
 'default' =&gt; SORT_ASC,
 ],
 'email' =&gt; [
 'label' =&gt; 'Email',
 'default' =&gt; SORT_ASC,
 ],
 ],
 'sortLinkOptions' =&gt; ['class' =&gt; 'sorting'], // set class for th element
 ],
 ]); ?&gt;
</code></div>
</div>
ในตัวอย่างนี้ <code>sort</code> กำหนดให้เรียงลำดับตาม <code>id</code> โดยเรียงจากมากไปน้อย (SORT_DESC) และกำหนดให้สามารถเรียงลำดับตาม <code>name</code> และ <code>email</code> ได้โดยเรียงตามตัวอักษรเริ่มต้นจาก A ถึง Z (SORT_ASC)
</li>
<li>
นอกจากนี้ยังสามารถกำหนด option อื่น ๆ เช่น การใช้งาน Filter, Export, การแสดงข้อมูลที่ไม่ต้องการแสดงได้โดยใช้ <code>GridView</code> Widget ของ Yii2 ในการกำหนด option เหล่านี้
การใช้งาน Filter สามารถทำได้โดยกำหนด <code>filterModel</code> ของ GridView ดังนี้:
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php-template">&lt;?= GridView::widget([
 'dataProvider' =&gt; $dataProvider,
 'filterModel' =&gt; $searchModel,
 'columns' =&gt; [
 'id',
 'name',
 'email',
 ],
 ]); ?&gt;
</code></div>
</div>
ในตัวอย่างนี้ <code>filterModel</code> เป็น Model ที่ใช้สำหรับค้นหาข้อมูล
</li>
<li>
การใช้งาน Export สามารถทำได้โดยกำหนด <code>export</code> option ของ GridView ดังนี้:
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php-template">&lt;?= GridView::widget([
 'dataProvider' =&gt; $dataProvider,
 'columns' =&gt; [
 'id',
 'name',
 'email',
 ],
 'export' =&gt; [
 'fontAwesome' =&gt; true,
 'showConfirmAlert' =&gt; false,
 'target' =&gt; GridView::TARGET_BLANK,
 'icon' =&gt; [
 'excel' =&gt; 'fa fa-file-excel-o',
 'pdf' =&gt; 'fa fa-file-pdf-o',
 'csv' =&gt; 'fa fa-file-text-o',
 'html' =&gt; 'fa fa-file-code-o',
 ],
 'options' =&gt; ['class' =&gt; 'btn btn-default'],
 'label' =&gt; 'Export',
 ],
 ]); ?&gt;
</code></div>
</div>
ในตัวอย่างนี้ <code>export</code> กำหนดให้สามารถ Export เป็น Excel, PDF, CSV และ HTML ได้ และกำหนด option อื่น ๆ เช่น fontAwesome, showConfirmAlert, target, icon, options และ label
</li>
<li>
การแสดงข้อมูลที่ไม่ต้องการแสดง สามารถทำได้โดยกำหนด <code>visible</code> option ใน Column ของ GridView ดังนี้:
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-ruby">&lt;?= GridView::widget([
 'dataProvider' =&gt; $dataProvider,
 'columns' =&gt; [
 'id',
 'name',
 [
 'attribute' =&gt; 'email',
 'visible' =&gt; false, // hide this column
 ],
 ],
 ]); ?&gt;
</code></div>
</div>
ในตัวอย่างนี้ <code>email</code> ถูกกำหนดให้ไม่แสดงผลในตารางแสดงข้อมูล
</li>
<li>
การใช้งาน GridView ใน Yii2 เป็นวิธีการแสดงผลข้อมูลที่มีประสิทธิภาพสูง และมีความสามารถในการ customize ตามความต้องการ โดยสามารถกำหนด option ต่าง ๆ ได้ตามต้องการ
อย่างไรก็ตาม ในกรณีที่ต้องการ customize GridView ในรูปแบบที่ไม่สามารถกำหนดได้จาก option ที่มีอยู่ สามารถสร้าง GridView Widget ใหม่ขึ้นมาจาก <code>yii\grid\GridView</code> และ override method ต่าง ๆ ที่ต้องการ ตัวอย่างเช่นการแสดงข้อมูลเป็นรูปภาพแทนข้อความ
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php">use yii\grid\GridView;

class ImageGridView extends GridView
{
 public $imageAttribute; // attribute name for image url

protected function renderDataCellContent($model, $key, $index)
 {
 if ($this-&gt;imageAttribute !== null) {
 $url = $model-&gt;{$this-&gt;imageAttribute};
 return Html::img($url, ['width' =&gt; '100']);
 } else {
 return parent::renderDataCellContent($model, $key, $index);
 }
 }
}
</code></div>
</div>
ในตัวอย่างนี้ <code>ImageGridView</code> สืบทอดมาจาก <code>yii\grid\GridView</code> และ override method <code>renderDataCellContent</code> เพื่อแสดงข้อมูลเป็นรูปภาพแทนข้อความ โดยกำหนด <code>$imageAttribute</code> เพื่อกำหนด attribute ที่เก็บ url ของรูปภาพ
</li>
<li>
สำหรับการใช้งาน <code>ImageGridView</code> สามารถทำได้ดังนี้:
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-ruby">&lt;?= ImageGridView::widget([
 'dataProvider' =&gt; $dataProvider,
 'columns' =&gt; [
 'id',
 'name',
 [
 'attribute' =&gt; 'image_url',
 'imageAttribute' =&gt; 'image_url', // set attribute for image url
 ],
 ],
 ]); ?&gt;
</code></div>
</div>
ในตัวอย่างนี้ <code>ImageGridView</code> กำหนด <code>imageAttribute</code> เพื่อแสดงข้อมูลเป็นรูปภาพแทนข้อความ โดยกำหนด <code>image_url</code> เป็น attribute ที่เก็บ url ของรูปภาพ
</li>
<li>
เนื่องจาก GridView ใน Yii2 เป็น Component ของ Yii Framework ทำให้สามารถกำหนด Theme ของ GridView ได้โดยสร้าง GridView สำหรับแต่ละ Theme แล้วกำหนด option ต่าง ๆ ของ GridView ตาม Theme นั้นๆ
ตัวอย่างเช่น สำหรับ Theme Bootstrap 4 สามารถสร้าง GridView ใหม่ขึ้นมาจาก <code>yii\grid\GridView</code> และกำหนด option ตามตัวอย่างนี้:
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php">use yii\grid\GridView;

class Bootstrap4GridView extends GridView
{
 public $tableOptions = ['class' =&gt; 'table table-striped table-bordered'];
 public $headerRowOptions = ['class' =&gt; 'thead-light'];
 public $pager = [
 'class' =&gt; 'yii\bootstrap4\LinkPager',
 'options' =&gt; ['class' =&gt; 'pagination justify-content-center'],
 'prevPageCssClass' =&gt; 'page-item',
 'nextPageCssClass' =&gt; 'page-item',
 'prevPageLabel' =&gt; '&lt;span class="page-link"&gt;&amp;laquo;&lt;/span&gt;',
 'nextPageLabel' =&gt; '&lt;span class="page-link"&gt;&amp;raquo;&lt;/span&gt;',
 'activePageCssClass' =&gt; 'page-item active',
 'disabledPageCssClass' =&gt; 'page-item disabled',
 'linkOptions' =&gt; ['class' =&gt; 'page-link'],
 ];
}
</code></div>
</div>
ในตัวอย่างนี้ <code>Bootstrap4GridView</code> สืบทอดมาจาก <code>yii\grid\GridView</code> และ override option ต่าง ๆ ที่ใช้กับ Bootstrap 4 Theme เช่นกัน โดยกำหนด <code>$tableOptions</code> เพื่อกำหนด class ของ table, <code>$headerRowOptions</code> เพื่อกำหนด class ของ header row และ <code>$pager</code> เพื่อกำหนดการแสดงผลของ Pagination&nbsp;
</li>
</ol>

Content Short

Content Img Alt

Content Tag

อัพโหลดรูปภาพ

สำหรับ SEO

Meta Title

Meta Desc

Meta Keyword

Og Title

Og Desc

สถานะเปิดใช้งานบทความ

Back home