Senin, 17 Juni 2013

[Yii Framework] Membuat Multi Select Control dengan EMultiSelect

Cukup sering kita temukan kasus yang membutuhkan suatu form yang mengizinkan user menginput pilihan yang dapat dipilih lebih dari satu pilihan. Ada banyak cara yang bisa diterapkan untuk memungkinkan form seperti itu, tapi salah satu yang cukup efektif menurut saya adalah menggunakan extension EMultiSelect yang mana hasilnya adalah seperti gambar berikut :


Big thanks lah buat developernya emultiselect.. Kita sudah dimanjakan dengan fitur add, remove, search, add all, dan remove all dengan menggunakan emultiselect..  Lalu bagaimana cara menerapkannya pada code kita??
Seperti biasa, donlot extensionnya dari link di atas dan pindahkan ke folder extensions yang ada pada project anda..

Lalu pada tampilan anda, masukkan code berikut :

$isis=CHtml::listData(Lfunction::model()->findAll(),'id','label');
 $this->widget(
    'application.extensions.emultiselect.EMultiSelect',
    array('sortable'=>true, 'searchable'=>true)
 );

 echo $form->listBox($model,'namaAttribute',
       $isis,array('multiple'=>'multiple','key'=>'label', 'class'=>'multiselect',
      'style'=>'width:650px')
 );
Penejelasan : pada kode diatas pertama-tama kita mendefinisikan 
terlebih dahulu extension EMultiSelect. Lalu kita definisikan sebuah 
control “listbox” (anda dapat gunakan listbox ataupun dropdownlist untuk
 menggunakan emultiselect) kemudian kita masukkan class “multiselect” ke
 dala listbox tersebut. Lalu jangan lupa untuk melemparkan data 
option-option yang akan mengisi control tersebut..
Dan sekarang tinggal “How to save our data from emultiselect?”. Anda harus lakukan sedikit perubahan pada controller anda seperti berikut :
foreach ($_POST['NamaModel']['namaAttribute'] as $ii) 
 {
    $model2=new NamaModel;
    $model2->namaAttribute=$ii;
    $model2->save();
 }

Pada kode di atas, kita mengambil masing-masing nilai yang sudah di pilih pada multi select. Kemudian satu persatu datanya kita simpan dalam database kita..
Selesai..
Selamat mencoba…

Semoga membantu… :D

Tidak ada komentar:

Posting Komentar