การ Sort GridView แบบลากวางด้วย Sortable Gridview ใน Yii Framework 2

สวัสดีครับ ในบทเรียนรู้นี้เรามาเรียนรู้การทำให้ GridView สามารถ Sort หรือเรียงลำดับได้โดยการลากวางแล้วบันทึกค่าการเรียงลำดับลงในฐานข้อมูล โดยใช้ Package ที่มีชื่อว่า 

https://github.com/richardfan1126/yii2-sortable-gridview

การติดตั้ง

สำหรับการติดตั้งสามารถติดตั้งผ่าน Composer ได้โดยพิมพ์คำสั่ง

composer require richardfan1126/yii2-sortable-gridview

การใช้งาน

การกำหนดใน Model หลัก

สำหรับใน Model หลักนั้นเราจะกำหนด Field ในฐานข้อมูลโดยกำหนดให้เป็น integer ในที่นี้จะใช้ field ที่มีชื่อว่า sort_order เอาไว้เก็บข้อมูลการเรียงลำดับนั่นเอง

public function rules()
    {
        return [
            [['sort_order',....], 'integer'],
        ];
    }

การตั้งค่าใน SearchModel

ใน SearchModel นั้นตอนที่มีการเรียกข้อมูลเราจะให้เรียกข้อมูลจาก sort_order โดยให้เรียงลำดับตามต้องการเช่น จากน้อยไปหามาก SORT_ASC หรือจากมากไปหาน้อย SORT_DESC

use yii\data\ActiveDataProvider;

//.....

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

        // add conditions that should always apply here

        $dataProvider = new ActiveDataProvider([
            'query' => $query,
            'sort' => [
                'defaultOrder' => [
                    'sort_order' => SORT_ASC //กำหนดให้เรียงลำดับจากน้อยไปหามาก หรือ SORT_DESC จากมากไปหาน้อย sort_order คือ attribute ที่เก็บข้อมูลลำดับ
                ]
            ]
        ]);

        $this->load($params);
//.....

การตั้งค่าใน View

สำหรับการแสดงผลนั้นจะเรียกผ่าน SortableGridView โดยมีตัวอย่างการตั้งค่าต่างๆ ดังนี้

use richardfan\sortable\SortableGridView;

<?=SortableGridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'sortUrl' => Url::to(['sortItem']),
        'sortingPromptText' => 'กำลังประมวลผล...',
        'failText' => 'ไม่สามารถเรียงลำดับได้',
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
//...
            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>

การตั้งค่าใน Controller

ใน Controller นั้นเมื่อมีการ Sort จะมีการส่งข้อมูลมาที่ action sortItem โดยเราจะกำหนด attribute ที่ sort คือ sort_order โดยนำไปประมวลผล แล้วบันทึกในฐานข้อมูลใน field sort_order นั่นเอง

use richardfan\sortable\SortableAction;


public function actions(){
        return [
            'sortItem' => [
                'class' => SortableAction::className(),
                'activeRecordClassName' => Model::className(),
                'orderColumn' => 'sort_order',
            ],
        ];
    }

เพียงเท่านี้ก็สามารถกำหนด GridView ให้สามารถเรียงลำดับได้แล้ว