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

156

Update
Delete
Back
 
 
 
Content ID156
Category ID2
Writer ID(not set)
User ID(not set)
Lang Modeth
Content Nameการใช้งาน Yii2 ListView สามารถทำได้ง่าย ๆ
Content Urlการใช้งาน-Yii2-ListView-สามารถทำได้ง่าย
Content Desc<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>Yii2 ListView เป็น Widget ที่ใช้แสดงผลข้อมูลในรูปแบบรายการ โดยสามารถแสดงผลข้อมูลจาก Data Provider ในรูปแบบรายการและสามารถใช้งาน Pagination ได้ นอกจากนี้ยังสามารถกำหนดการแสดงผลและการใช้งานของ ListView ตามต้องการได้ โดยการกำหนด property ต่าง ๆ ของ ListView ที่สำคัญได้แก่ itemView, summary, emptyText, emptyTextOptions, pager และอื่นๆ</p>
<p>การใช้งาน Yii2 ListView สามารถทำได้ง่าย ๆ โดยกำหนด Data Provider ที่ต้องการแสดงผลแล้วใช้งาน ListView ในรูปแบบต่าง ๆ ตามที่ต้องการผลลัพธ์ที่ได้จะเป็นการแสดงผลข้อมูลในรูปแบบรายการให้แก่ผู้ใช้งาน</p>
<p>ตัวอย่างการใช้งาน Yii2 ListView ดังนี้</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">widgets</span>\<span class="hljs-title">ListView</span>;
<span class="hljs-keyword">use</span> <span class="hljs-title">app</span>\<span class="hljs-title">models</span>\<span class="hljs-title">Post</span>;

<span class="hljs-variable">$dataProvider</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ActiveDataProvider</span>([
<span class="hljs-string">'query'</span> =&gt; <span class="hljs-title class_">Post</span>::<span class="hljs-title function_ invoke__">find</span>(),
<span class="hljs-string">'pagination'</span> =&gt; [
<span class="hljs-string">'pageSize'</span> =&gt; <span class="hljs-number">10</span>,
],
]);

<span class="hljs-keyword">echo</span> <span class="hljs-title class_">ListView</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">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด Data Provider และใช้ ListView ในการแสดงผลข้อมูลโดยกำหนด <code>itemView</code> เป็น <code>_post_item</code> ซึ่งจะแสดงผลข้อมูลแต่ละรายการในรูปแบบของ View <code>_post_item</code> โดยสามารถกำหนด View นี้ได้ตามต้องการ</p>
<p>สำหรับ property อื่น ๆ ของ ListView ที่สามารถกำหนดได้ จะมีดังนี้</p>
<ul>
<li>layout: กำหนด Layout ของ ListView</li>
<li>options: กำหนด Options สำหรับ Container ของ ListView</li>
<li>emptyText: กำหนดข้อความแสดงเมื่อไม่มีข้อมูล</li>
<li>emptyTextOptions: กำหนด Options สำหรับ Element ของข้อความแสดงเมื่อไม่มีข้อมูล</li>
<li>pager: กำหนด Pager สำหรับ Pagination&nbsp;</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>สำหรับ ListView ยังมี property อื่น ๆ ที่สามารถกำหนดได้เช่นกัน เช่น</p>
<ul>
<li>viewParams: กำหนดพารามิเตอร์ที่จะส่งไปยัง View แต่ละรายการ โดยเก็บเป็น Array โดย Key คือชื่อพารามิเตอร์และ Value คือค่าของพารามิเตอร์</li>
<li>itemOptions: กำหนด Options สำหรับ Element แต่ละรายการ</li>
<li>separator: กำหนดข้อความที่ใช้แยกระหว่างรายการ</li>
<li>summary: กำหนดข้อความที่จะแสดงผลบนส่วน Summary ของ ListView</li>
</ul>
<p>สำหรับการกำหนด itemView สามารถใช้ View ได้ตามปกติโดยใช้โค้ด HTML, CSS และ JavaScript เพื่อแสดงผลข้อมูลแต่ละรายการในรูปแบบที่ต้องการ โดยสามารถใช้ Model ที่ได้รับมาผ่าน Data Provider ในการแสดงผลข้อมูลแต่ละรายการได้</p>
<p>ตัวอย่างของการกำหนด itemView ด้วย View ใน Yii2 ListView ดังนี้</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">widgets</span>\<span class="hljs-title">ListView</span>;
<span class="hljs-keyword">use</span> <span class="hljs-title">app</span>\<span class="hljs-title">models</span>\<span class="hljs-title">Post</span>;

<span class="hljs-variable">$dataProvider</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ActiveDataProvider</span>([
<span class="hljs-string">'query'</span> =&gt; <span class="hljs-title class_">Post</span>::<span class="hljs-title function_ invoke__">find</span>(),
<span class="hljs-string">'pagination'</span> =&gt; [
<span class="hljs-string">'pageSize'</span> =&gt; <span class="hljs-number">10</span>,
],
]);

<span class="hljs-keyword">echo</span> <span class="hljs-title class_">ListView</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">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>itemView</code> ให้เป็น <code>_post_item</code> ซึ่งเป็น View ที่ใช้แสดงผลข้อมูลแต่ละรายการ โดยสามารถกำหนด View นี้ได้ตามต้องการ และสามารถใช้ Model ที่ได้รับมาผ่าน Data Provider ในการแสดงผลข้อมูลแต่ละรายการได้&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>สำหรับการกำหนด Layout ของ ListView สามารถกำหนดได้โดยใช้ property <code>layout</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-php"><span class="hljs-keyword">echo</span> <span class="hljs-title class_">ListView</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">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
<span class="hljs-string">'layout'</span> =&gt; <span class="hljs-string">"{items}\n&lt;div class='text-center'&gt;{pager}&lt;/div&gt;"</span>,
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>layout</code> ให้แสดงผลรายการและ Pagination โดยใช้ <code>{items}</code> และ <code>{pager}</code> ตามลำดับ และกำหนดให้ Pagination แสดงตำแหน่งอยู่ตรงกลางด้านล่างของ ListView ด้วย CSS class <code>text-center</code></p>
<p>สำหรับการใช้งาน Pagination ใน Yii2 ListView สามารถกำหนดได้โดยใช้ property <code>pager</code> ซึ่งสามารถกำหนด Options ของ Pagination ต่าง ๆ ได้ เช่น</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">echo</span> <span class="hljs-title class_">ListView</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">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</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-string">'prevPageLabel'</span> =&gt; <span class="hljs-string">'&amp;laquo;'</span>,
<span class="hljs-string">'nextPageLabel'</span> =&gt; <span class="hljs-string">'&amp;raquo;'</span>,
<span class="hljs-string">'maxButtonCount'</span> =&gt; <span class="hljs-number">5</span>,
],
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>pager</code> ให้แสดง Pagination ในรูปแบบของ Bootstrap โดยใช้ CSS class <code>pagination</code> และกำหนด <code>prevPageLabel</code> และ <code>nextPageLabel</code> สำหรับปุ่ม Previous และ Next ตามลำดับ และกำหนด <code>maxButtonCount</code> สำหรับกำหนดจำนวนเลขหน้าที่แสดงใน Pagination&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>สำหรับการกำหนด Options สำหรับ Element แต่ละรายการ ใน Yii2 ListView สามารถกำหนดได้โดยใช้ property <code>itemOptions</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-php"><span class="hljs-keyword">echo</span> <span class="hljs-title class_">ListView</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">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
<span class="hljs-string">'itemOptions'</span> =&gt; [
<span class="hljs-string">'tag'</span> =&gt; <span class="hljs-string">'div'</span>,
<span class="hljs-string">'class'</span> =&gt; <span class="hljs-string">'post-item'</span>,
],
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>itemOptions</code> ให้แต่ละรายการใน ListView ใช้ tag <code>&lt;div&gt;</code> และ CSS class <code>post-item</code> เพื่อปรับแต่งรายการแต่ละรายการให้เหมาะสม</p>
<p>สำหรับการกำหนด Separator ระหว่างรายการ ใน Yii2 ListView สามารถกำหนดได้โดยใช้ property <code>separator</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-php"><span class="hljs-keyword">echo</span> <span class="hljs-title class_">ListView</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">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
<span class="hljs-string">'separator'</span> =&gt; <span class="hljs-string">'&lt;hr&gt;'</span>,
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>separator</code> ให้แสดงผลเป็น tag <code>&lt;hr&gt;</code> เพื่อแยกแต่ละรายการใน ListView โดยเป็นตัวอย่างเท่านั้น สามารถปรับแต่งได้ตามต้องการ</p>
<p>สำหรับการกำหนด Summary ของ ListView ใน Yii2 สามารถกำหนดได้โดยใช้ property <code>summary</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-php"><span class="hljs-keyword">echo</span> <span class="hljs-title class_">ListView</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">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
<span class="hljs-string">'summary'</span> =&gt; <span class="hljs-string">'Showing {count} of {totalCount} posts.'</span>,
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>summary</code> ให้แสดงผลจำนวนข้อมูลที่แสดงผลอยู่ โดยใช้ <code>{count}</code> และ <code>{totalCount}</code> ในการแทนค่าจำนวนข้อมูลที่แสดงและทั้งหมดใน Data Provider ตามลำดับ&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>สำหรับการสร้าง Custom Layout สำหรับ ListView ใน Yii2 สามารถทำได้โดยใช้ property <code>layout</code> และสร้าง View สำหรับแสดงผลตามต้องการ เช่น</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-bash"><span class="hljs-built_in">echo</span> ListView::widget([
<span class="hljs-string">'dataProvider'</span> =&gt; <span class="hljs-variable">$dataProvider</span>,
<span class="hljs-string">'layout'</span> =&gt; <span class="hljs-string">'&lt;div class="list-view"&gt;{items}&lt;/div&gt;&lt;div class="text-center"&gt;{pager}&lt;/div&gt;'</span>,
<span class="hljs-string">'itemView'</span> =&gt; <span class="hljs-keyword">function</span> (<span class="hljs-variable">$model</span>, <span class="hljs-variable">$key</span>, <span class="hljs-variable">$index</span>, <span class="hljs-variable">$widget</span>) {
<span class="hljs-built_in">return</span> <span class="hljs-variable">$this</span>-&gt;render(<span class="hljs-string">'_post_item'</span>, [
<span class="hljs-string">'model'</span> =&gt; <span class="hljs-variable">$model</span>,
<span class="hljs-string">'index'</span> =&gt; <span class="hljs-variable">$index</span>,
]);
},
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>layout</code> โดยกำหนด <code>&lt;div&gt;</code> สองตัว แยกออกจากกันด้วย <code>{items}</code> และ <code>{pager}</code> และกำหนดให้ <code>itemView</code> เป็นฟังก์ชั่นที่ return View <code>_post_item</code> โดยส่งค่า <code>$model</code> และ <code>$index</code> เข้าไปใน View นั้น</p>
<p>สำหรับการสร้าง Custom Layout อื่น ๆ ใน Yii2 สามารถใช้ HTML, CSS และ JavaScript ได้ตามปกติ โดยใช้ <code>itemView</code> ในการแสดงผลข้อมูลแต่ละรายการ และ <code>pager</code> สำหรับแสดง Pagination ตามต้องการ&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>สำหรับการใช้งาน Filter ใน Yii2 ListView สามารถกำหนด Filter ได้ผ่าน property <code>filterModel</code> และ <code>filters</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-php"><span class="hljs-keyword">echo</span> <span class="hljs-title class_">ListView</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">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
<span class="hljs-string">'filterModel'</span> =&gt; <span class="hljs-variable">$searchModel</span>,
<span class="hljs-string">'filters'</span> =&gt; [
[
<span class="hljs-string">'attribute'</span> =&gt; <span class="hljs-string">'title'</span>,
<span class="hljs-string">'operator'</span> =&gt; <span class="hljs-string">'like'</span>,
<span class="hljs-string">'options'</span> =&gt; [<span class="hljs-string">'placeholder'</span> =&gt; <span class="hljs-string">'Search by title'</span>],
],
[
<span class="hljs-string">'attribute'</span> =&gt; <span class="hljs-string">'status'</span>,
<span class="hljs-string">'type'</span> =&gt; <span class="hljs-title class_">ListView</span>::<span class="hljs-variable constant_">FILTER_SELECT</span>,
<span class="hljs-string">'operator'</span> =&gt; <span class="hljs-string">'='</span>,
<span class="hljs-string">'options'</span> =&gt; [<span class="hljs-string">'prompt'</span> =&gt; <span class="hljs-string">'Select status'</span>],
<span class="hljs-string">'items'</span> =&gt; [<span class="hljs-string">'draft'</span> =&gt; <span class="hljs-string">'Draft'</span>, <span class="hljs-string">'published'</span> =&gt; <span class="hljs-string">'Published'</span>, <span class="hljs-string">'archived'</span> =&gt; <span class="hljs-string">'Archived'</span>],
],
],
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>filterModel</code> เป็น <code>$searchModel</code> ซึ่งเป็น Model ที่ใช้สำหรับการ Filter และกำหนด <code>filters</code> เพื่อกำหนดตัวเลือกในการ Filter โดยกำหนด <code>attribute</code> เป็นชื่อ Attribute ที่จะ Filter และกำหนด <code>operator</code> เป็น Operator ที่จะใช้ Filter และกำหนด Options สำหรับ Filter โดยใช้ <code>options</code> และกำหนดชนิดของ Filter ใน <code>type</code> ด้วย <code>ListView::FILTER_SELECT</code> สำหรับ Filter แบบเลือกตัวเลือก และกำหนดรายการตัวเลือกใน <code>items</code></p>
<p>สำหรับการกำหนด Filter อื่น ๆ ใน Yii2 ListView สามารถใช้ Option <code>filterPosition</code> เพื่อกำหนดตำแหน่งของ Filter ได้ โดยมีค่า Default เป็น <code>false</code> หรือไม่แสดง Filter ใน ListView แต่ถ้ากำหนดเป็น <code>header</code> หรือ <code>footer</code> จะแสดง Filter ที่ส่วนหัวหรือส่วนท้ายของ ListView ได้เช่นกัน&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>สำหรับการใช้งานการเรียงลำดับ (Sorting) ใน Yii2 ListView สามารถกำหนดได้ผ่าน property <code>sorter</code> ซึ่งสามารถกำหนด Options ของการเรียงลำดับได้เช่นเดียวกับ 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">echo</span> <span class="hljs-title class_">ListView</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">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
<span class="hljs-string">'sorter'</span> =&gt; [
<span class="hljs-string">'attributes'</span> =&gt; [<span class="hljs-string">'title'</span>, <span class="hljs-string">'created_at'</span>],
],
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>sorter</code> ให้กำหนด Attributes ที่ใช้ในการเรียงลำดับ ซึ่งในกรณีนี้เรากำหนดให้เรียงตาม Title และ Created At</p>
<p>สำหรับการกำหนด Sorter อื่น ๆ ใน Yii2 ListView สามารถใช้ Option <code>sorterPosition</code> เพื่อกำหนดตำแหน่งของ Sorter ได้ โดยมีค่า Default เป็น <code>false</code> หรือไม่แสดง Sorter ใน ListView แต่ถ้ากำหนดเป็น <code>header</code> หรือ <code>footer</code> จะแสดง Sorter ที่ส่วนหัวหรือส่วนท้ายของ ListView ได้เช่นกัน&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>สำหรับการใช้งานการแบ่งหน้า (Pagination) ใน Yii2 ListView สามารถกำหนดได้ผ่าน property <code>pager</code> ซึ่งสามารถกำหนด Options ของการแบ่งหน้าได้เช่นเดียวกับ 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">echo</span> <span class="hljs-title class_">ListView</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">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
<span class="hljs-string">'pager'</span> =&gt; [
<span class="hljs-string">'firstPageLabel'</span> =&gt; <span class="hljs-string">'First'</span>,
<span class="hljs-string">'lastPageLabel'</span> =&gt; <span class="hljs-string">'Last'</span>,
<span class="hljs-string">'prevPageLabel'</span> =&gt; <span class="hljs-string">'Previous'</span>,
<span class="hljs-string">'nextPageLabel'</span> =&gt; <span class="hljs-string">'Next'</span>,
<span class="hljs-string">'maxButtonCount'</span> =&gt; <span class="hljs-number">3</span>,
],
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>pager</code> ให้กำหนด Label ของแต่ละปุ่มใน Pagination และกำหนด <code>maxButtonCount</code> ให้แสดงปุ่มแบบย่อ ๆ สูงสุด 3 ปุ่ม</p>
<p>สำหรับการกำหนด Pagination อื่น ๆ ใน Yii2 ListView สามารถใช้ Option <code>pagerPosition</code> เพื่อกำหนดตำแหน่งของ Pagination ได้ โดยมีค่า Default เป็น <code>bottom</code> หรือแสดง Pagination ใต้ส่วนของ ListView แต่ถ้ากำหนดเป็น <code>top</code> จะแสดง Pagination บนส่วนของ ListView&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>สำหรับการใช้งานการค้นหา (Search) ใน Yii2 ListView สามารถใช้ Filter และ Sorter เพื่อให้ผู้ใช้งานสามารถค้นหาและเรียงลำดับข้อมูลได้ โดยต้องกำหนด Model สำหรับการค้นหา (Search Model) ซึ่งต้องเป็น Model ที่สืบทอดจาก <code>yii\base\Model</code> และมีการกำหนด Rules สำหรับการค้นหา สามารถกำหนดได้เช่นเดียวกับ Model สำหรับการ Validate หรือจัดการข้อมูลใน 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"><span class="hljs-comment">// Search Model</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PostSearch</span> <span class="hljs-keyword">extends</span> \<span class="hljs-title">yii</span>\<span class="hljs-title">base</span>\<span class="hljs-title">Model</span>
</span>{
<span class="hljs-keyword">public</span> <span class="hljs-variable">$title</span>;
<span class="hljs-keyword">public</span> <span class="hljs-variable">$status</span>;

<span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">rules</span>(<span class="hljs-params"></span>)
</span>{
<span class="hljs-keyword">return</span> [
[[<span class="hljs-string">'title'</span>, <span class="hljs-string">'status'</span>], <span class="hljs-string">'safe'</span>],
];
}

<span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">search</span>(<span class="hljs-params"><span class="hljs-variable">$params</span></span>)
</span>{
<span class="hljs-variable">$query</span> = <span class="hljs-title class_">Post</span>::<span class="hljs-title function_ invoke__">find</span>();

<span class="hljs-variable">$dataProvider</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ActiveDataProvider</span>([
<span class="hljs-string">'query'</span> =&gt; <span class="hljs-variable">$query</span>,
]);

<span class="hljs-keyword">if</span> (!(<span class="hljs-variable language_">$this</span>-&gt;<span class="hljs-title function_ invoke__">load</span>(<span class="hljs-variable">$params</span>) &amp;&amp; <span class="hljs-variable language_">$this</span>-&gt;<span class="hljs-title function_ invoke__">validate</span>())) {
<span class="hljs-keyword">return</span> <span class="hljs-variable">$dataProvider</span>;
}

<span class="hljs-variable">$query</span>-&gt;<span class="hljs-title function_ invoke__">andFilterWhere</span>([<span class="hljs-string">'like'</span>, <span class="hljs-string">'title'</span>, <span class="hljs-variable">$this</span>-&gt;title])
-&gt;<span class="hljs-title function_ invoke__">andFilterWhere</span>([<span class="hljs-string">'status'</span> =&gt; <span class="hljs-variable">$this</span>-&gt;status]);

<span class="hljs-keyword">return</span> <span class="hljs-variable">$dataProvider</span>;
}
}

<span class="hljs-comment">// View</span>
<span class="hljs-keyword">use</span> <span class="hljs-title">yii</span>\<span class="hljs-title">widgets</span>\<span class="hljs-title">ActiveForm</span>;

<span class="hljs-variable">$model</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">PostSearch</span>();
<span class="hljs-variable">$form</span> = <span class="hljs-title class_">ActiveForm</span>::<span class="hljs-title function_ invoke__">begin</span>([
<span class="hljs-string">'action'</span> =&gt; [<span class="hljs-string">'index'</span>],
<span class="hljs-string">'method'</span> =&gt; <span class="hljs-string">'get'</span>,
]);

<span class="hljs-keyword">echo</span> <span class="hljs-variable">$form</span>-&gt;<span class="hljs-title function_ invoke__">field</span>(<span class="hljs-variable">$model</span>, <span class="hljs-string">'title'</span>);
<span class="hljs-keyword">echo</span> <span class="hljs-variable">$form</span>-&gt;<span class="hljs-title function_ invoke__">field</span>(<span class="hljs-variable">$model</span>, <span class="hljs-string">'status'</span>)-&gt;<span class="hljs-title function_ invoke__">dropDownList</span>([<span class="hljs-string">'draft'</span> =&gt; <span class="hljs-string">'Draft'</span>, <span class="hljs-string">'published'</span> =&gt; <span class="hljs-string">'Published'</span>, <span class="hljs-string">'archived'</span> =&gt; <span class="hljs-string">'Archived'</span>]);

<span class="hljs-keyword">echo</span> \yii\helpers<span class="hljs-title class_">\Html</span>::<span class="hljs-title function_ invoke__">submitButton</span>(<span class="hljs-string">'Search'</span>, [<span class="hljs-string">'class'</span> =&gt; <span class="hljs-string">'btn btn-primary'</span>]);

<span class="hljs-title class_">ActiveForm</span>::<span class="hljs-title function_ invoke__">end</span>();

<span class="hljs-keyword">echo</span> <span class="hljs-title class_">ListView</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">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
<span class="hljs-string">'filterModel'</span> =&gt; <span class="hljs-variable">$model</span>,
<span class="hljs-string">'pager'</span> =&gt; [
<span class="hljs-string">'firstPageLabel'</span> =&gt; <span class="hljs-string">'First'</span>,
<span class="hljs-string">'lastPageLabel'</span> =&gt; <span class="hljs-string">'Last'</span>,
<span class="hljs-string">'prevPageLabel'</span> =&gt; <span class="hljs-string">'Previous'</span>,
<span class="hljs-string">'nextPageLabel'</span> =&gt; <span class="hljs-string">'Next'</span>,
<span class="hljs-string">'maxButtonCount'</span> =&gt; <span class="hljs-number">3</span>,
],
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด Search Model เป็น <code>PostSearch</code> ซึ่งเป็น Model สำหรับค้นหาโพสต์ และกำหนด <code>rules</code> ในการ Validate ข้อมูลที่ได้รับจากผู้ใช้งาน และ <code>search()</code> สำหรับสร้าง DataProvider โดยดึงข้อมูลโพสต์จากฐานข้อมูล และใช้ข้อมูลที่ได้รับจากผู้ใช้งานในการค้นหาโพสต์ และ return DataProvider</p>
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>View ของเราจะใช้ <code>ActiveForm</code> เพื่อสร้างฟอร์มค้นหาและกำหนด Action และ Method สำหรับการค้นหา และกำหนด Field สำหรับการค้นหา และใช้ <code>Html::submitButton</code> เพื่อสร้างปุ่ม Submit สำหรับการค้นหา</p>
<p>ใน ListView เรากำหนด <code>filterModel</code> เป็น Search Model เพื่อใช้ในการค้นหา และกำหนด <code>pager</code> เพื่อกำหนด Option ของ Pagination</p>
<p>โดยการค้นหาและเรียงลำดับข้อมูลจะทำงานแบบ Asynchronous โดย ListView จะใช้ <code>ActiveDataProvider</code> และส่งข้อมูลที่ได้รับจากการค้นหาโดย Search Model ไปยัง <code>dataProvider</code> เพื่อแสดงผลใน ListView โดยไม่ต้อง Refresh หน้าเว็บไซต์</p>
</div>
</div>
</div>
</div>
</div>
</div>
Content Short
Content View3556
Content Thumb Highlight
Content Thumb/uploads/article/SQuvx52t0U.png
Content Img Altการใช้งาน Yii2 ListView สามารถทำได้ง่าย ๆ
Content TagYii2 ListView ,ListView
Content Date(not set)
Active Status1
Sort99999
Meta Titleการใช้งาน Yii2 ListView สามารถทำได้ง่าย ๆ
Meta Descการใช้งาน Yii2 ListView สามารถทำได้ง่าย ๆ
Meta KeywordYii2 ListView ,ListView
Og Titleการใช้งาน Yii2 ListView สามารถทำได้ง่าย ๆ
Og Descการใช้งาน Yii2 ListView สามารถทำได้ง่าย ๆ
Status1
Create Date Time2023-04-03 10:09:13
Update Date Time2023-04-03 10:09:13
Create By
Update By