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

wave
มานพ กองอุ่น 5 ก.ค. 2015 18:46:58 17,588

การใช้งาน 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

เขียนบทเรียนรู้ของคุณ

รายละเอียด
  • ดู 17,588
  • รักเลย 0
  • หมวดหมู่ Yii Framework 2 (Yii2)
  • เขียนเมื่อ
  • แก้ไขเมื่อ
  • Tags yii2 select2 ajax
ข้อมูลผู้เขียน
มานพ กองอุ่น

มานพ กองอุ่น

เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009

เนื้อหาที่เกี่ยวข้อง