การใช้งาน 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;
}
ความคิดเห็น