Extension การใช้งาน kartik Select2 แบบ AJAX (ข้อมูลเยอะ)

Extension การใช้งาน kartik Select2 แบบ AJAX (ข้อมูลเยอะ)

มานพ กองอุ่น yii2 select2 ajax 4,320

การใช้งาน kartik Select2 จากตัวอย่างนี้เป็นตัวอย่างการใช้งาน Select2 โดยการเลือกคำนำหน้าเป็นการสมมติทดสอบข้อมูลหากมีข้อมูลจำนวนมากๆ ถ้ามีการ select ขึ้นมาใส่ใน Select จะทำให้ Web Application ทำงานได้ช้ามาก ดังนั้นทางออกคือทำ Select แบบ AJAX ดึงข้อมูลมาเฉพาะที่ค้นหา

ส่วน View สำหรับการแสดง Select

<?php

$url = \yii\helpers\Url::to(['prefix-list']);//กำหนด URL ที่จะไปโหลดข้อมูล
                $prefix = empty($person->prefix_id) ? '' : BasePrefix::findOne($model->prefix_id)->prefix_name;//กำหนดค่าเริ่มต้น
                echo $form->field($person, 'prefix_id')->widget(Select2::className(), [
                    'initValueText'=>$prefix,//กำหนดค่าเริ่มต้น
                    'options'=>['placeholder'=>'เลือกคำนำหน้า...'],
                    'pluginOptions'=>[
                        'allowClear'=>true,
                        'minimumInputLength'=>3,//ต้องพิมพ์อย่างน้อย 3 อักษร ajax จึงจะทำงาน
                        'ajax'=>[
                            'url'=>$url,
                            'dataType'=>'json',//รูปแบบการอ่านคือ json
                            'data'=>new JsExpression('function(params) { return {q:params.term};}')
                        ],
                        'escapeMarkup'=>new JsExpression('function(markup) { return markup;}'),
                        'templateResult'=>new JsExpression('function(prefix){ return prefix.text;}'),
                        'templateSelection'=>new JsExpression('function(prefix) {return prefix.text;}'),
                    ]
                ]);
                ?>

$person คือ model หลักในการเก็บข้อมูล prefix_id 

ส่วนของ Controller ในการดึงข้อมูล

ดึงข้อมูลแล้วแสดงผลในรูปของ JSON

public function actionPrefixList($q = null, $id = null){
        Yii::$app->response->format = \yii\web\Response::FORMAT_JSON; //กำหนดการแสดงผลข้อมูลแบบ json
        $out = ['results'=>['id'=>'','text'=>'']];
        if(!is_null($q)){
            $query = new \yii\db\Query();
            $query->select('id, prefix_name as text')
                    ->from('base_prefix')
                    ->where("prefix_name LIKE '%".$q."%'")
                    ->limit(20);
            $command = $query->createCommand();
            $data = $command->queryAll();
            $out['results'] = array_values($data);
        }else if($id>0){
            $out['results'] = ['id'=>$id, 'text'=>  BasePrefix::find($id)->prefix_name];
        }
        return $out;
    }

 


หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com
มานพ กองอุ่น

มานพ กองอุ่น
admin

  • 2 เพื่อน
  • 13 ผู้ติดตาม
  • 766 โพสต์