Facile, vos écrans de liste avec jqGrid & Rails
Une folle envie d'intégrer des listes (liste de membres, liste de produits, ...) à vos écrans facilement et sans prise de tête ?
Mais qu'est ce que c'est ?
JqGrid est un framework javascript / ajax, basé sur la célèbre librairie jQuery, qui fournit des solutions allant de la plus simple à la plus compliquée pour représenter et manipuler des données sous forme de tableau stylisés et complètement dynamiques (merci la technologie AJAX). Le tout s'appuie sur les thèmes jQuery UI, ce qui vous permet de personnaliser l'apparence à 100%.
Pour plus d'informations : JqGrid wiki
Obtenir très rapidement, un tableau triable, filtrable, paginé, etc ... en seulement quelques lignes de code !!! Finis, les interminables prises de têtes pour savoir comment faire un tableau "user-friendly" et ultra fonctionnel, jqGrid le fait pour vous !
La liste des fonctionnalités est très très longue, et je vous invite à vous rendre sur la démo de jqGrid (Démos). Pêle-mêle, vous y trouverez listes simples, imbriquées, groupées, édition 'in-line', affichage en arbre (treeview), etc.
Et je fais comment pour l'intégrer dans mon application rails ?
Rien de plus simple, grâce à la communauté Ruby, une gem (librairie) à été créée pour implémenter facilement jqGrid dans n'importe quelle application Rails.
et pour pas vous laisser dans l'ignorance voici le lien de la documentation avec des exemples présent sur github !
Commencez par télécharger le code de jQgrid et déplacez-le dans votre dossier JS. Si besoin est, faites l'inclusion dans votre layout :
<%= stylesheet_link_tag('jqgrid/ui-jqgrid') %>
incluez la gem jqgrid_rails dans votre gemfile :
gem "jqgrid_for_rails", "~> 1.0.1"
Voyez ci-dessous un exemple type de jqGrid, monté en moins de 5 minutes :
#products_controller.rb: On sélectionne les données def index
can_read('Produits', false)
@form_prefix=@@form_prefix #On construit un tableau associatif avec les clés dans @columns
#et les résultats dans @products
@columns = ['id','ref']
@products = Product.select("products.id, products.ref as ref") #Notez la pagination intégrée !
@products = @products.paginate(:page => params[:page], :per_page => params[:rows],:order => order_by_from_params(params)) respond_to do |format|
format.html {render :layout => false}
format.js
format.json {render :json => json_for_jqgrid(@products, @columns)}
end end
#products_helper.rb : On prépare le jqGrid à recevoir les données include JqgridsHelper grid = [{
:url => products_path+'.json',
:datatype => 'json',
:mtype => 'GET',
:colNames => [
"Id",
"Référence"
],
:colModel => [
{ :name => 'products.id', :index => 'products.id' , hidden: true },
{ :name => 'products.ref', :index => 'products.ref', :width => 180 }
],
:pager => '#products_pager', :rowNum => 10,
:rowList => [10, 20, 30],
:caption => "Liste des produits",
:viewrecords => true
}]
jqgrid_api 'products_list', grid
#index.html.erb : Dans la vue, on prépare deux div, qui seront remplacé par le jQgrid à l'affichage. On appelle le helper qui termine le travail. <table id="products_list"></table>
<div id="products_pager"></div>
<%= raw(products_jqgrid) %>
On reload et hop ! Voilà une liste triable très pro, sur laquelle il est très facile d'ajouter des filtres, des opérations CRUD en Ajax, des cellules formatées par type (dates, heures, etc.) et même du Drag & Drop et du pilotage au clavier...
En voilà, du bon travail mâché, re-mâché et re re-mâché pour faciliter la vie des développeurs et également alléger le coût d'une application. Aujourd'hui, chez Jumboweb il nous parait tout simplement impensable de créer un écran de liste sans jQgrid.
