บทความ

ธนินัช ดอทคอม - ผู้เชี่ยวชาญทำเว็บไซต์

การใช้งาน Yii2 ListView สามารถทำได้ง่าย ๆ

Yii2 ListView เป็น Widget ที่ใช้แสดงผลข้อมูลในรูปแบบรายการ โดยสามารถแสดงผลข้อมูลจาก Data Provider ในรูปแบบรายการและสามารถใช้งาน Pagination ได้ นอกจากนี้ยังสามารถกำหนดการแสดงผลและการใช้งานของ ListView ตามต้องการได้ โดยการกำหนด property ต่าง ๆ ของ ListView ที่สำคัญได้แก่ itemView, summary, emptyText, emptyTextOptions, pager และอื่นๆ

การใช้งาน Yii2 ListView สามารถทำได้ง่าย ๆ โดยกำหนด Data Provider ที่ต้องการแสดงผลแล้วใช้งาน ListView ในรูปแบบต่าง ๆ ตามที่ต้องการผลลัพธ์ที่ได้จะเป็นการแสดงผลข้อมูลในรูปแบบรายการให้แก่ผู้ใช้งาน

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

use yii\widgets\ListView;
use app\models\Post;

$dataProvider = new ActiveDataProvider([
    'query' => Post::find(),
    'pagination' => [
        'pageSize' => 10,
    ],
]);

echo ListView::widget([
    'dataProvider' => $dataProvider,
    'itemView' => '_post_item',
]);

ในตัวอย่างนี้ เรากำหนด Data Provider และใช้ ListView ในการแสดงผลข้อมูลโดยกำหนด itemView เป็น _post_item ซึ่งจะแสดงผลข้อมูลแต่ละรายการในรูปแบบของ View _post_item โดยสามารถกำหนด View นี้ได้ตามต้องการ

สำหรับ property อื่น ๆ ของ ListView ที่สามารถกำหนดได้ จะมีดังนี้

layout: กำหนด Layout ของ ListView
options: กำหนด Options สำหรับ Container ของ ListView
emptyText: กำหนดข้อความแสดงเมื่อไม่มีข้อมูล
emptyTextOptions: กำหนด Options สำหรับ Element ของข้อความแสดงเมื่อไม่มีข้อมูล
pager: กำหนด Pager สำหรับ Pagination

สำหรับ ListView ยังมี property อื่น ๆ ที่สามารถกำหนดได้เช่นกัน เช่น

viewParams: กำหนดพารามิเตอร์ที่จะส่งไปยัง View แต่ละรายการ โดยเก็บเป็น Array โดย Key คือชื่อพารามิเตอร์และ Value คือค่าของพารามิเตอร์
itemOptions: กำหนด Options สำหรับ Element แต่ละรายการ
separator: กำหนดข้อความที่ใช้แยกระหว่างรายการ
summary: กำหนดข้อความที่จะแสดงผลบนส่วน Summary ของ ListView

สำหรับการกำหนด itemView สามารถใช้ View ได้ตามปกติโดยใช้โค้ด HTML, CSS และ JavaScript เพื่อแสดงผลข้อมูลแต่ละรายการในรูปแบบที่ต้องการ โดยสามารถใช้ Model ที่ได้รับมาผ่าน Data Provider ในการแสดงผลข้อมูลแต่ละรายการได้

ตัวอย่างของการกำหนด itemView ด้วย View ใน Yii2 ListView ดังนี้

use yii\widgets\ListView;
use app\models\Post;

$dataProvider = new ActiveDataProvider([
    'query' => Post::find(),
    'pagination' => [
        'pageSize' => 10,
    ],
]);

echo ListView::widget([
    'dataProvider' => $dataProvider,
    'itemView' => '_post_item',
]);

ในตัวอย่างนี้ เรากำหนด itemView ให้เป็น _post_item ซึ่งเป็น View ที่ใช้แสดงผลข้อมูลแต่ละรายการ โดยสามารถกำหนด View นี้ได้ตามต้องการ และสามารถใช้ Model ที่ได้รับมาผ่าน Data Provider ในการแสดงผลข้อมูลแต่ละรายการได้

สำหรับการกำหนด Layout ของ ListView สามารถกำหนดได้โดยใช้ property layout ซึ่งสามารถกำหนดได้ตามต้องการ เช่น

echo ListView::widget([
    'dataProvider' => $dataProvider,
    'itemView' => '_post_item',
    'layout' => "{items}\n<div class='text-center'>{pager}</div>",
]);

ในตัวอย่างนี้ เรากำหนด layout ให้แสดงผลรายการและ Pagination โดยใช้ {items} และ {pager} ตามลำดับ และกำหนดให้ Pagination แสดงตำแหน่งอยู่ตรงกลางด้านล่างของ ListView ด้วย CSS class text-center

สำหรับการใช้งาน Pagination ใน Yii2 ListView สามารถกำหนดได้โดยใช้ property pager ซึ่งสามารถกำหนด Options ของ Pagination ต่าง ๆ ได้ เช่น

echo ListView::widget([
    'dataProvider' => $dataProvider,
    'itemView' => '_post_item',
    'pager' => [
        'options' => ['class' => 'pagination'],
        'prevPageLabel' => '&laquo;',
        'nextPageLabel' => '&raquo;',
        'maxButtonCount' => 5,
    ],
]);

ในตัวอย่างนี้ เรากำหนด pager ให้แสดง Pagination ในรูปแบบของ Bootstrap โดยใช้ CSS class pagination และกำหนด prevPageLabel และ nextPageLabel สำหรับปุ่ม Previous และ Next ตามลำดับ และกำหนด maxButtonCount สำหรับกำหนดจำนวนเลขหน้าที่แสดงใน Pagination

สำหรับการกำหนด Options สำหรับ Element แต่ละรายการ ใน Yii2 ListView สามารถกำหนดได้โดยใช้ property itemOptions เช่น

echo ListView::widget([
    'dataProvider' => $dataProvider,
    'itemView' => '_post_item',
    'itemOptions' => [
        'tag' => 'div',
        'class' => 'post-item',
    ],
]);

ในตัวอย่างนี้ เรากำหนด itemOptions ให้แต่ละรายการใน ListView ใช้ tag <div> และ CSS class post-item เพื่อปรับแต่งรายการแต่ละรายการให้เหมาะสม

สำหรับการกำหนด Separator ระหว่างรายการ ใน Yii2 ListView สามารถกำหนดได้โดยใช้ property separator เช่น

echo ListView::widget([
    'dataProvider' => $dataProvider,
    'itemView' => '_post_item',
    'separator' => '<hr>',
]);

ในตัวอย่างนี้ เรากำหนด separator ให้แสดงผลเป็น tag <hr> เพื่อแยกแต่ละรายการใน ListView โดยเป็นตัวอย่างเท่านั้น สามารถปรับแต่งได้ตามต้องการ

สำหรับการกำหนด Summary ของ ListView ใน Yii2 สามารถกำหนดได้โดยใช้ property summary เช่น

echo ListView::widget([
    'dataProvider' => $dataProvider,
    'itemView' => '_post_item',
    'summary' => 'Showing {count} of {totalCount} posts.',
]);

ในตัวอย่างนี้ เรากำหนด summary ให้แสดงผลจำนวนข้อมูลที่แสดงผลอยู่ โดยใช้ {count} และ {totalCount} ในการแทนค่าจำนวนข้อมูลที่แสดงและทั้งหมดใน Data Provider ตามลำดับ

สำหรับการสร้าง Custom Layout สำหรับ ListView ใน Yii2 สามารถทำได้โดยใช้ property layout และสร้าง View สำหรับแสดงผลตามต้องการ เช่น

echo ListView::widget([
    'dataProvider' => $dataProvider,
    'layout' => '<div class="list-view">{items}</div><div class="text-center">{pager}</div>',
    'itemView' => function ($model, $key, $index, $widget) {
        return $this->render('_post_item', [
            'model' => $model,
            'index' => $index,
        ]);
    },
]);

ในตัวอย่างนี้ เรากำหนด layout โดยกำหนด <div> สองตัว แยกออกจากกันด้วย {items} และ {pager} และกำหนดให้ itemView เป็นฟังก์ชั่นที่ return View _post_item โดยส่งค่า $model และ $index เข้าไปใน View นั้น

สำหรับการสร้าง Custom Layout อื่น ๆ ใน Yii2 สามารถใช้ HTML, CSS และ JavaScript ได้ตามปกติ โดยใช้ itemView ในการแสดงผลข้อมูลแต่ละรายการ และ pager สำหรับแสดง Pagination ตามต้องการ

สำหรับการใช้งาน Filter ใน Yii2 ListView สามารถกำหนด Filter ได้ผ่าน property filterModel และ filters เช่น

echo ListView::widget([
    'dataProvider' => $dataProvider,
    'itemView' => '_post_item',
    'filterModel' => $searchModel,
    'filters' => [
        [
            'attribute' => 'title',
            'operator' => 'like',
            'options' => ['placeholder' => 'Search by title'],
        ],
        [
            'attribute' => 'status',
            'type' => ListView::FILTER_SELECT,
            'operator' => '=',
            'options' => ['prompt' => 'Select status'],
            'items' => ['draft' => 'Draft', 'published' => 'Published', 'archived' => 'Archived'],
        ],
    ],
]);

ในตัวอย่างนี้ เรากำหนด filterModel เป็น $searchModel ซึ่งเป็น Model ที่ใช้สำหรับการ Filter และกำหนด filters เพื่อกำหนดตัวเลือกในการ Filter โดยกำหนด attribute เป็นชื่อ Attribute ที่จะ Filter และกำหนด operator เป็น Operator ที่จะใช้ Filter และกำหนด Options สำหรับ Filter โดยใช้ options และกำหนดชนิดของ Filter ใน type ด้วย ListView::FILTER_SELECT สำหรับ Filter แบบเลือกตัวเลือก และกำหนดรายการตัวเลือกใน items

สำหรับการกำหนด Filter อื่น ๆ ใน Yii2 ListView สามารถใช้ Option filterPosition เพื่อกำหนดตำแหน่งของ Filter ได้ โดยมีค่า Default เป็น false หรือไม่แสดง Filter ใน ListView แต่ถ้ากำหนดเป็น header หรือ footer จะแสดง Filter ที่ส่วนหัวหรือส่วนท้ายของ ListView ได้เช่นกัน

สำหรับการใช้งานการเรียงลำดับ (Sorting) ใน Yii2 ListView สามารถกำหนดได้ผ่าน property sorter ซึ่งสามารถกำหนด Options ของการเรียงลำดับได้เช่นเดียวกับ GridView เช่น

echo ListView::widget([
    'dataProvider' => $dataProvider,
    'itemView' => '_post_item',
    'sorter' => [
        'attributes' => ['title', 'created_at'],
    ],
]);

ในตัวอย่างนี้ เรากำหนด sorter ให้กำหนด Attributes ที่ใช้ในการเรียงลำดับ ซึ่งในกรณีนี้เรากำหนดให้เรียงตาม Title และ Created At

สำหรับการกำหนด Sorter อื่น ๆ ใน Yii2 ListView สามารถใช้ Option sorterPosition เพื่อกำหนดตำแหน่งของ Sorter ได้ โดยมีค่า Default เป็น false หรือไม่แสดง Sorter ใน ListView แต่ถ้ากำหนดเป็น header หรือ footer จะแสดง Sorter ที่ส่วนหัวหรือส่วนท้ายของ ListView ได้เช่นกัน

สำหรับการใช้งานการแบ่งหน้า (Pagination) ใน Yii2 ListView สามารถกำหนดได้ผ่าน property pager ซึ่งสามารถกำหนด Options ของการแบ่งหน้าได้เช่นเดียวกับ GridView เช่น

echo ListView::widget([
    'dataProvider' => $dataProvider,
    'itemView' => '_post_item',
    'pager' => [
        'firstPageLabel' => 'First',
        'lastPageLabel' => 'Last',
        'prevPageLabel' => 'Previous',
        'nextPageLabel' => 'Next',
        'maxButtonCount' => 3,
    ],
]);

ในตัวอย่างนี้ เรากำหนด pager ให้กำหนด Label ของแต่ละปุ่มใน Pagination และกำหนด maxButtonCount ให้แสดงปุ่มแบบย่อ ๆ สูงสุด 3 ปุ่ม

สำหรับการกำหนด Pagination อื่น ๆ ใน Yii2 ListView สามารถใช้ Option pagerPosition เพื่อกำหนดตำแหน่งของ Pagination ได้ โดยมีค่า Default เป็น bottom หรือแสดง Pagination ใต้ส่วนของ ListView แต่ถ้ากำหนดเป็น top จะแสดง Pagination บนส่วนของ ListView

สำหรับการใช้งานการค้นหา (Search) ใน Yii2 ListView สามารถใช้ Filter และ Sorter เพื่อให้ผู้ใช้งานสามารถค้นหาและเรียงลำดับข้อมูลได้ โดยต้องกำหนด Model สำหรับการค้นหา (Search Model) ซึ่งต้องเป็น Model ที่สืบทอดจาก yii\base\Model และมีการกำหนด Rules สำหรับการค้นหา สามารถกำหนดได้เช่นเดียวกับ Model สำหรับการ Validate หรือจัดการข้อมูลใน Yii2

// Search Model
class PostSearch extends \yii\base\Model
{
    public $title;
    public $status;

    public function rules()
    {
        return [
            [['title', 'status'], 'safe'],
        ];
    }

    public function search($params)
    {
        $query = Post::find();

        $dataProvider = new ActiveDataProvider([
            'query' => $query,
        ]);

        if (!($this->load($params) && $this->validate())) {
            return $dataProvider;
        }

        $query->andFilterWhere(['like', 'title', $this->title])
            ->andFilterWhere(['status' => $this->status]);

        return $dataProvider;
    }
}

// View
use yii\widgets\ActiveForm;

$model = new PostSearch();
$form = ActiveForm::begin([
    'action' => ['index'],
    'method' => 'get',
]);

echo $form->field($model, 'title');
echo $form->field($model, 'status')->dropDownList(['draft' => 'Draft', 'published' => 'Published', 'archived' => 'Archived']);

echo \yii\helpers\Html::submitButton('Search', ['class' => 'btn btn-primary']);

ActiveForm::end();

echo ListView::widget([
    'dataProvider' => $dataProvider,
    'itemView' => '_post_item',
    'filterModel' => $model,
    'pager' => [
        'firstPageLabel' => 'First',
        'lastPageLabel' => 'Last',
        'prevPageLabel' => 'Previous',
        'nextPageLabel' => 'Next',
        'maxButtonCount' => 3,
    ],
]);

ในตัวอย่างนี้ เรากำหนด Search Model เป็น PostSearch ซึ่งเป็น Model สำหรับค้นหาโพสต์ และกำหนด rules ในการ Validate ข้อมูลที่ได้รับจากผู้ใช้งาน และ search() สำหรับสร้าง DataProvider โดยดึงข้อมูลโพสต์จากฐานข้อมูล และใช้ข้อมูลที่ได้รับจากผู้ใช้งานในการค้นหาโพสต์ และ return DataProvider

View ของเราจะใช้ ActiveForm เพื่อสร้างฟอร์มค้นหาและกำหนด Action และ Method สำหรับการค้นหา และกำหนด Field สำหรับการค้นหา และใช้ Html::submitButton เพื่อสร้างปุ่ม Submit สำหรับการค้นหา

ใน ListView เรากำหนด filterModel เป็น Search Model เพื่อใช้ในการค้นหา และกำหนด pager เพื่อกำหนด Option ของ Pagination

โดยการค้นหาและเรียงลำดับข้อมูลจะทำงานแบบ Asynchronous โดย ListView จะใช้ ActiveDataProvider และส่งข้อมูลที่ได้รับจากการค้นหาโดย Search Model ไปยัง dataProvider เพื่อแสดงผลใน ListView โดยไม่ต้อง Refresh หน้าเว็บไซต์