Ruby on Rails e jQuery: multiselect con checkbox

Oggi voglio presentarvi un plugin jQuery che ho trovato molto comodo per realizzare una combobox con dei checkbox per la multiselezione.

Nell’esempio che vi propongo supponiamo di avere una form di inserimento/modifica dei dati utente, e che all’utente possano essere associate più funzioni.
Iniziamo con il renderizzare la form con al suo interno un campo multiselect, dove sia possibile selezionare più funzioni con la combinazione “<ctrl> + click”.

1
2
3
4
5
6
7
8
9
10
11
12

<%= simple_form_for(@user) do |f| %>
<%= f.label :password %>
<%= f.password_field :password %>

<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation %>
<%= f.error :password, :class => "formError" %>

<%= f.label :functions %>
<%= select_tag("functions[]", options_for_select(@functions.collect { |ff| [ff.name, ff.id] }, @user.functions.collect { |fs| fs.id }),
{:multiple=>true, :id => "functions"}) %>
<%= f.submit %>

Nel codice riportato ho utilizzato il plugin simple_form per semplificare la creazione della form.
Il controller relativo conterrà qualcosa del tipo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

class UsersController < ApplicationController

def new
@user = User.new
@functions = Function.all
end

def create
@user = User.new(params[:user])
@user.functions << Function.find(params[:functions]) unless params[:functions].nil?
if @user.save
flash[:notice] = "User created"
redirect_to :action => :index
else
@functions = Function.all
render :action => :new
end
end

end

A questo punto aggiungiamo un po’ di jQuery per rendere più gradevole la nostra form.
Scarichiamo il pugin jQuery UI MultiSelect Widget ed includiamolo nelle nostre pagine, ad esempio nel file application.html.erb come segue:

1
2
3

[...]
<%= javascript_include_tag "jquery.multiselect.min" %>
[...]

A questo punto è sufficiente inserire alla fine della pagina contenente la form di creazione utente il seguente script:

1
2
3
4
5

<script type="text/javascript">
$(document).ready(function() {
$("#functions").multiselect();
});
</script>

Ricarichiamo la pagina ed otterremo qualcosa di simile allo screenshoot seguente.

Questo esempio è stato testato con Rails 3 e JQuery 1.4.2.



Looking for rental properties try real estate alameda.