สวัสดีครับ ในบทเรียนรู้นี้เรามาเรียนรู้การทำให้ 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 ให้สามารถเรียงลำดับได้แล้ว
ความคิดเห็น