Filed under: Rails
A Flexigrid possui um tema padrão bem interessante, atraente e profissional, semelhante as datagrids usadas em aplicações Desktop. Sua comunicação com o servidor, por padrão, é feita usando o formato JSON para a troca de dados, mas pode ser alterado para XML dependendo da necessidade.
O demo com o plugin pode ser baixado nessa link. Mude a extenção .doc para .rar, assim poderá descompactar o projeto. Qualquer comentário ou sugestão que tenha a fazer, poste.
Instalação
Crie uma aplicação rails, dentro dela faça:
ruby script/generate scaffold country iso:string name:string printable_name:string iso3:string numcode:string
# Linux
script/generate scaffold country iso:string name:string printable_name:string iso3:string numcode:string
# MAC
./script/generate scaffold country iso:string name:string printable_name:string iso3:string numcode:string
Adicione alguns dados para a sua migração, você pode usar este.
Crie o banco e execute a migração:
rake db:migrate
Instalando o plugin:
Substitua o método index em seu controller por esse:
#Insert in index method of your controller Countries
1: def index
2: @flexigrid = Flexigrid.new
3:
4: @flexigrid.buttons << {:label => "New", :class => "add", :onpress => "test"}
5: @flexigrid.buttons << {:label => "Delete", :class => "delete", :onpress => "test"}
6: @flexigrid.buttons << {:separator => true}
7:
8: @flexigrid.search_items << {:iso => "Ison", :name => "Name"}
9: @flexigrid.search_items << {:printable_name => "Printable Name", :iso3 => "Iso3"}
10:
11: @flexigrid.columns << {:id => "ID", :width => 75, :align => "center", :hide => true}
11: @flexigrid.columns << {:iso => "ISO", :width => 40, :sortable => true, :align => "left"}
12: @flexigrid.columns <<
13: [
14: {:name => "Name", :width => 180, :sortable => true, :align => "left"},
15: ["<span style='color:#ff4400' onclick=\"alert('ISO ? - NUM_CODE ?')\" >?</span>", :iso3, "numcode", :name]
16: ]
17: @flexigrid.columns << {:printable_name => "Printable Name", :width => 120, :sortable => true, :align => "left"}
18: @flexigrid.columns << {:iso3 => "ISO3", :width => 130, :sortable => true, :align => "left", :hide => true}
19:
20: @flexigrid.columns <<
21: [
22: {:numcode => "Numcode", :width => 120, :sortable => true, :align => "left"},
23: [
24: ["<a href=\"#\" onclick=\"alert('Test')\">
</a> ", :id],
25: ["<span style='color:green'>?</span>"]
26: ]
27: ]
28:
29: @flexigrid.columns <<
30: [
31: {:action => "Actions", :width => 50, :align => "center", :sortable => false},
32: [
33: ["<a href=\"#\" onclick=\"alert('edit(?)')\"><img border=\"0\" src=\"/images/edit.png\"/></a> ", :id],
34: ["<a href=\"#\" onclick=\"alert('show(?)')\"><img border=\"0\" src=\"/images/show.png\"/></a>", "id"]
35: ]
36: ]
37:
38: #Start the configuration of the interface display of the component
39: @flexigrid.interface_init(:title => "Countries Panel",:url => "/countries/grid_data",
40: :table => true, :use_pager => true, :display_paging_control => false, :width => 650)
41: end
Crie o método grid_data, que responde as requisições da datagrid, dessa forma:
#Create the grid_data method that will respond to requests from datagrid
1: def grid_data
2: @countries = Country.find_to_flexigrid(
3: :all,
4: :page => params[:page],
5: :per_page => params[:rp],
6: :sort_name => params[:sortname],
7: :sort_order => params[:sortorder],
8: :conditions => ["#{params[:qtype] || "name"} like ?", "%#{params[:query] || ""}%"])
9:
10: render :json => @countries.to_flexigrid_json
11: end
Acrescente no seu controller uma exceção de token para o método grid_data (mais informações):
Observe como o plugin torna fácil adicionar filtros, botões e colunas na tabela. Veja também que foi injetado um método to_flexigri_json, que irá gerar o JSON necessário pra você. A ordem dos campos segue a ordem das colunas no objeto Flexigrid criado no método index.
Agora só falta prepara o index.html.erb do projeto para que você possa visualizar a datagrid.
No arquivo index.html.erb adicione o seguinte:
<script type="text/javascript">
function test(com,grid) {
if (com=='Delete') {
confirm('Delete ' + $('.trSelected',grid).length + ' items?')
}
else if (com=='Add') {
alert('Add New Item');
}
else {
alert('Test')
}
}
</script>
<%= @flexigrid %>
Acrescente as duas linhas no template Countries.html.erb:
<%= stylesheet_link_tag :flexigrid, :media => :all%>
Pronto! você verá uma datagrid assim. :0)
Andamento da coisa
Existe um helper que esta sendo construído para possibilitar montar a datagrid passando parâmetros diretos na view. Nessa primeira versão do projeto é possível usá-lo entretanto a pesquisa ainda não está funcionando.
Você podera testa-lo removendo o código posto no método index e pondo este na view:
<%= flexigrid("Countries", "flex1", '/countries/grid_data',
[
{ :iso => "ISO", :width => 40, :sortable => true, :align => "left" },
{ :name => "Name", :width => 180, :sortable => true, :align => "left" },
{ :printable_name => "Printable Name", :width => 120, :sortable => true, :align => "left" },
{ :iso3 => "ISO3", :width => 130, :sortable => true, :align => "left", :hide => true },
{ :numcode => "Numcode", :width => 120, :sortable => true, :align => "left" }
],
{
:buttons =>
[
{ :label => "Add", :bclass => "add", :onpress => "test" },
{ :label => "Delete", :bclass => "delete", :onpress => "test" },
{ :separator => true },
{ :label => "Teste", :onpress => "test" }
]
}
) -%>
no controller deve-se mudar o metodo grid_data removendo o :conditions da consulta.
Por alguns problemas técnicos, ainda não foi possível por o projeto no GitHub mas em breve ele será passado para lá. Por enquanto o plugin encontra-se disponível no demo citado no inicio do artigo.
Att,
