logo icon
Taninut.com
image
image แดชบอร์ดรวม
image ประวัติการจอง
image การตั้งค่า
image ออกจากระบบ

155

Update
Delete
Back
 
 
 
Content ID155
Category ID2
Writer ID(not set)
User ID(not set)
Lang Modeth
Content NameGridView เป็นอีกหนึ่งคอมโพเนนต์ของ Yii2 ที่ช่วยให้เราสร้างตารางแสดงผลข้อมูลได้อย่างง่ายดาย
Content UrlGridView-เป็นอีกหนึ่งคอมโพเนนต์ของ-Yii2-ที่ช่วยให้เราสร้างตารางแสดงผลข้อมูลได้อย่างง่ายดาย
Content Desc<p>GridView เป็นอีกหนึ่งคอมโพเนนต์ของ Yii2 ที่ช่วยให้เราสร้างตารางแสดงผลข้อมูลได้อย่างง่ายดาย โดย GridView จะสร้าง HTML table ให้เราโดยอัตโนมัติโดยอิงจาก Model หรือ ArrayDataProvider ที่เรากำหนด<br><br></p>
<p>ตัวอย่างการใช้งาน GridView ใน Yii2 ดังนี้:<br><br></p>
<ol>
<li>
<p>สร้าง Model ของข้อมูลที่เราต้องการแสดงผล</p>
</li>
<li>
<p>สร้าง Action ใน Controller สำหรับแสดง GridView และส่งข้อมูลไปแสดงผล</p>
<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"><span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">actionIndex</span>(<span class="hljs-params"></span>)
</span>{
<span class="hljs-variable">$searchModel</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">MyModelSearch</span>();
<span class="hljs-variable">$dataProvider</span> = <span class="hljs-variable">$searchModel</span>-&gt;<span class="hljs-title function_ invoke__">search</span>(<span class="hljs-title class_">Yii</span>::<span class="hljs-variable">$app</span>-&gt;request-&gt;queryParams);

<span class="hljs-keyword">return</span> <span class="hljs-variable language_">$this</span>-&gt;<span class="hljs-title function_ invoke__">render</span>(<span class="hljs-string">'index'</span>, [
<span class="hljs-string">'searchModel'</span> =&gt; <span class="hljs-variable">$searchModel</span>,
<span class="hljs-string">'dataProvider'</span> =&gt; <span class="hljs-variable">$dataProvider</span>,
]);
}
</code></div>
</div>
<p>โดยในตัวอย่างนี้ <code>MyModelSearch</code> เป็น Model ที่ใช้สำหรับค้นหาข้อมูล และ <code>$dataProvider</code> เป็น ArrayDataProvider ที่เก็บข้อมูลที่จะนำไปแสดงผล</p>
</li>
<li>
<p>สร้าง View สำหรับแสดง GridView โดยใช้ GridView Widget ของ Yii2</p>
<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"><span class="php"><span class="hljs-meta">&lt;?=</span> <span class="hljs-title class_">GridView</span>::<span class="hljs-title function_ invoke__">widget</span>([
<span class="hljs-string">'dataProvider'</span> =&gt; <span class="hljs-variable">$dataProvider</span>,
<span class="hljs-string">'filterModel'</span> =&gt; <span class="hljs-variable">$searchModel</span>,
<span class="hljs-string">'columns'</span> =&gt; [
[<span class="hljs-string">'class'</span> =&gt; <span class="hljs-string">'yii\grid\SerialColumn'</span>],

<span class="hljs-string">'id'</span>,
<span class="hljs-string">'name'</span>,
<span class="hljs-string">'email:email'</span>,
<span class="hljs-string">'created_at:datetime'</span>,

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

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ImageGridView</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">GridView</span>
</span>{
<span class="hljs-keyword">public</span> <span class="hljs-variable">$imageAttribute</span>; <span class="hljs-comment">// attribute name for image url</span>

<span class="hljs-keyword">protected</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">renderDataCellContent</span>(<span class="hljs-params"><span class="hljs-variable">$model</span>, <span class="hljs-variable">$key</span>, <span class="hljs-variable">$index</span></span>)
</span>{
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">$this</span>-&gt;imageAttribute !== <span class="hljs-literal">null</span>) {
<span class="hljs-variable">$url</span> = <span class="hljs-variable">$model</span>-&gt;{<span class="hljs-variable language_">$this</span>-&gt;imageAttribute};
<span class="hljs-keyword">return</span> <span class="hljs-title class_">Html</span>::<span class="hljs-title function_ invoke__">img</span>(<span class="hljs-variable">$url</span>, [<span class="hljs-string">'width'</span> =&gt; <span class="hljs-string">'100'</span>]);
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">parent</span>::<span class="hljs-title function_ invoke__">renderDataCellContent</span>(<span class="hljs-variable">$model</span>, <span class="hljs-variable">$key</span>, <span class="hljs-variable">$index</span>);
}
}
}
</code></div>
</div>
<p>ในตัวอย่างนี้ <code>ImageGridView</code> สืบทอดมาจาก <code>yii\grid\GridView</code> และ override method <code>renderDataCellContent</code> เพื่อแสดงข้อมูลเป็นรูปภาพแทนข้อความ โดยกำหนด <code>$imageAttribute</code> เพื่อกำหนด attribute ที่เก็บ url ของรูปภาพ</p>
</li>
<li>
<p>สำหรับการใช้งาน <code>ImageGridView</code> สามารถทำได้ดังนี้:</p>
<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;<span class="hljs-string">?=</span> <span class="hljs-title class_">ImageGridView</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:widget</span>([
<span class="hljs-string">'dataProvider'</span> =&gt; <span class="hljs-variable">$dataProvider</span>,
<span class="hljs-string">'columns'</span> =&gt; [
<span class="hljs-string">'id'</span>,
<span class="hljs-string">'name'</span>,
[
<span class="hljs-string">'attribute'</span> =&gt; <span class="hljs-string">'image_url'</span>,
<span class="hljs-string">'imageAttribute'</span> =&gt; <span class="hljs-string">'image_url'</span>, <span class="hljs-regexp">//</span> set attribute <span class="hljs-keyword">for</span> image url
],
],
]); <span class="hljs-string">?&gt;</span>
</code></div>
</div>
<p>ในตัวอย่างนี้ <code>ImageGridView</code> กำหนด <code>imageAttribute</code> เพื่อแสดงข้อมูลเป็นรูปภาพแทนข้อความ โดยกำหนด <code>image_url</code> เป็น attribute ที่เก็บ url ของรูปภาพ</p>
</li>
<li>
<p>เนื่องจาก GridView ใน Yii2 เป็น Component ของ Yii Framework ทำให้สามารถกำหนด Theme ของ GridView ได้โดยสร้าง GridView สำหรับแต่ละ Theme แล้วกำหนด option ต่าง ๆ ของ GridView ตาม Theme นั้นๆ</p>
<p>ตัวอย่างเช่น สำหรับ Theme Bootstrap 4 สามารถสร้าง GridView ใหม่ขึ้นมาจาก <code>yii\grid\GridView</code> และกำหนด option ตามตัวอย่างนี้:</p>
<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"><span class="hljs-keyword">use</span> <span class="hljs-title">yii</span>\<span class="hljs-title">grid</span>\<span class="hljs-title">GridView</span>;

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Bootstrap4GridView</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">GridView</span>
</span>{
<span class="hljs-keyword">public</span> <span class="hljs-variable">$tableOptions</span> = [<span class="hljs-string">'class'</span> =&gt; <span class="hljs-string">'table table-striped table-bordered'</span>];
<span class="hljs-keyword">public</span> <span class="hljs-variable">$headerRowOptions</span> = [<span class="hljs-string">'class'</span> =&gt; <span class="hljs-string">'thead-light'</span>];
<span class="hljs-keyword">public</span> <span class="hljs-variable">$pager</span> = [
<span class="hljs-string">'class'</span> =&gt; <span class="hljs-string">'yii\bootstrap4\LinkPager'</span>,
<span class="hljs-string">'options'</span> =&gt; [<span class="hljs-string">'class'</span> =&gt; <span class="hljs-string">'pagination justify-content-center'</span>],
<span class="hljs-string">'prevPageCssClass'</span> =&gt; <span class="hljs-string">'page-item'</span>,
<span class="hljs-string">'nextPageCssClass'</span> =&gt; <span class="hljs-string">'page-item'</span>,
<span class="hljs-string">'prevPageLabel'</span> =&gt; <span class="hljs-string">'&lt;span class="page-link"&gt;&amp;laquo;&lt;/span&gt;'</span>,
<span class="hljs-string">'nextPageLabel'</span> =&gt; <span class="hljs-string">'&lt;span class="page-link"&gt;&amp;raquo;&lt;/span&gt;'</span>,
<span class="hljs-string">'activePageCssClass'</span> =&gt; <span class="hljs-string">'page-item active'</span>,
<span class="hljs-string">'disabledPageCssClass'</span> =&gt; <span class="hljs-string">'page-item disabled'</span>,
<span class="hljs-string">'linkOptions'</span> =&gt; [<span class="hljs-string">'class'</span> =&gt; <span class="hljs-string">'page-link'</span>],
];
}
</code></div>
</div>
<p>ในตัวอย่างนี้ <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;</p>
</li>
</ol>
Content Short
Content View2831
Content Thumb Highlight
Content Thumb/uploads/article/DC4XTCXa7h.png
Content Img AltGridView เป็นอีกหนึ่งคอมโพเนนต์ของ Yii2 ที่ช่วยให้เราสร้างตารางแสดงผลข้อมูลได้อย่างง่ายดาย
Content TagGridView Yii2, GridView เป็นอีกหนึ่งคอมโพเนนต์ของ Yii2
Content Date(not set)
Active Status1
Sort99999
Meta TitleGridView เป็นอีกหนึ่งคอมโพเนนต์ของ Yii2 ที่ช่วยให้เราสร้างตารางแสดงผลข้อมูลได้อย่างง่ายดาย
Meta DescGridView เป็นอีกหนึ่งคอมโพเนนต์ของ Yii2 ที่ช่วยให้เราสร้างตารางแสดงผลข้อมูลได้อย่างง่ายดาย
Meta KeywordGridView Yii2, GridView เป็นอีกหนึ่งคอมโพเนนต์ของ Yii2
Og TitleGridView เป็นอีกหนึ่งคอมโพเนนต์ของ Yii2 ที่ช่วยให้เราสร้างตารางแสดงผลข้อมูลได้อย่างง่ายดาย
Og DescGridView เป็นอีกหนึ่งคอมโพเนนต์ของ Yii2 ที่ช่วยให้เราสร้างตารางแสดงผลข้อมูลได้อย่างง่ายดาย
Status1
Create Date Time2023-04-03 08:59:59
Update Date Time2023-04-03 09:16:56
Create By
Update By