[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…😀

11 Responses to [Yii Framework] Membuat Multi Select Control dengan EMultiSelect

  1. Ni saya udah bisa sampe save record..tapi kalo mau update gimana gan??
    maksudnya gini..
    waktu create kan datanya dah kesimpen di Db..
    Pengennya waktu mau update items yang udah dipilih masuk ke dalam kolom “item selected”..
    kalo gitu gimana caranya gan??
    thx

  2. Pingback: [Yii Framework] Update with Multi Select Control « Sabitlabscode

  3. Oke gan langsung ke TKP..

  4. wanprabu says:

    klo misalnya ingin membatasi jumlah pilihannya bs ga? misalnya maksimal cm boleh milih 5 pilihan saja

  5. waduh, saya lupa kalo yang ini mas.. kalo ga salah fitur yang kayak gitu pake echmultiselect yang ada..

  6. fahrur says:

    gan kalau buat pencarian data bisa gak gan tapi pakai 3 kategori gan?
    thanks sebelumnya

  7. kalo itu saya belum tau juga gan.. tapi saya dulu pernah liat yang kyak gitu.. tapi lupa apa extension yang ini atau bukan..

  8. sisman says:

    membingungkan teman

  9. Pingback: Membuat Multi Select Control dengan EMultiSelect

  10. Pingback: Membuat Menu Dinamis dengan Hirarki Parent Child dari Database | Spesials

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: