Vinícius Luiz Blog


Adicionar datagrids Flexigrid as suas aplicações Rails
julho 16, 2009, 12:37 pm
Filed under: Rails

Flexigrid é um incrível projeto Javascript que fornece funções em Ajax para aplicações Web. Esse projeto foi usado na construção do plugin Vl_Flexigrid de forma a possibilita que você possa usar de maneira mais simples a datagrid Flexigrid em seus projeto RubyOnRails com apenas algumas poucas linhas de código.

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:

# $win
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:create
rake db:migrate

Instalando o plugin:

rake vl:flexigrid:install

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):

protect_from_forgery :except => [:grid_data]

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:

<%= @flexigrid.css_add_delete %>

<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:

<%= javascript_include_tag :flexigrid %>
<%= stylesheet_link_tag :flexigrid, :media => :all%>

Pronto! você verá uma datagrid assim. :0)

ruby

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,


10 Comentários so far
Deixe um comentário

POw Muito bom Chará =D
Vou brincar com ele mais tarde parabéns!

Comentário por LuizCarvalho

Olá Vinicius,

Não consegui baixar o seu plugin no github! Vc pode me passar gostaria de implementar o flexible com rails.

Grato,

Rodrigo

Comentário por Rodrigo Pestana

Olá Rodrigo, no momento não tenho o plugin disponivel no github mas voce pode baixa-lo nesse link aqui

https://viniciusluizz.files.wordpress.com/2009/07/flexigrid_plugin.doc

apenas mude a extensão de .doc para .rar pos assim poderá descompactar o projeto.

Comentário por Vinícius Luiz

Can you explain how to use the helper a little better. Do I place the index code from the controller in a new helper method? If so, what do I call the helper method?

Comentário por Chris

Hello Chris,
I hope you can understand me

1 put the helper method in the file index
2 the grid_data method in controller

this should be sufficient
it receives as a parameter: title, id, json list, array of columns, one hash

#controller
def grid_data

end

#view
<%= flexigrid(“Countries Title”, “id_flex1”, ‘/countries/grid_data’, [], {} %>

hope it helps :)

Comentário por Vinícius Luiz

Hi, that was great. I had one additional question. Where do I define the default sortorder (asc vs desc)? I tried changing it in the flexigrid.rb file, but it seems my query is still sorting asc…

#sortname: “date”,
@init << get_value_hash(interface, :sort_name) do |sort_name|
" sortname: \"#{sort_name || "date"}\","
end

#sortorder: "desc",
@init < if params[:sortname]=’id’
‘date’
end,

Any help is appreciated, I can understand your english just fine.

Thanks!

Chris

Comentário por Chris

Hello again Chris
at the time, the helper does not support this, only the controller.

Just add the parameter so
@flexigrid.interface_init(:sort_order => “desc”)

yet not terminel the helper, so some things do not work but will soon be completed.
this is the second part of this article (with some improvements) :)

att,

Comentário por Vinícius Luiz

Thanks!

I was really close, I used :sortorder rather than :sort_order. That worked great! I liked this tutorial better than Nick Fessels although he did a great job too. Thanks for the good resource!

Comentário por Chris

Great tutorial! I’m running it successfully on rails 2.3.5.

My question is, how can I use this with named routes? Seems like I can’t access /countries/grid_data using named routes?

I am a rails beginner, converting an Adobe Flex + PHP app to rails so if the answer is obvious please forgive me :-)

Comentário por Jeremy

Hello Jeremy!
This version does not have this support however, I’m working on another that will give this support and other things more..

will be published soon =]
att,

Comentário por Vinícius Luiz




Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s



%d blogueiros gostam disto: