#jqgrid

Setting default Value Inline Add Jqgrid

Currently I have a requirement in a system where I need to repeat much of the data from the last row entered. Actualy this is my Grid:

$('#list').jqGrid({ colNames: ['VendedorId', 'Vendedor', 'Especie', 'Cabezas', 'Kilos', 'Precio', 'Guías Venta', 'Vencimiento'], colModel: [ { hidden: true, name: 'VendedorId' }, { editable: true, width: 160, edittype: 'select', editoptions: { dataUrl:…

jqgrid – json – getting wrong value

I have the following JSON:

{ "wrapper": { "table": { "rows": [ { "cells": [ { "fname": "Jack", "label": "fname", "editable": false }, { "lname": "Kalra", "label": "lname", "editable": true, "details": [ { "industry": "music" }, { "industry": "media" } ] } ] }, { "cells": [ { "fname": "Steven", "editable": true, "label": "fname" }, { "lname": "Martini", "editable": true, "label": "lname" } ] },…

How to clear jqGrid add/edit form with custom post?

I am currently working on jqGrid add / edit form. I am implementing custom buttons on both add and edit. with one of the custom buttons I have implemented javascript to post the form to server and reload the grid. This is currently working fine however, the form does not clear of the data that was entered.

i.e I’ll like to know how to clear off fields the add form after submitting?

see code…

I recently implemented keyboard navigation for a custom jQuery widget I used. My custom widget uses two jqGrid widgets. The idea is that a user can select row(s) from one grid and move it to the other grid or reorder rows or select multiple rows and move it between the two grids. The catch was that when I clicked on a row, the screen changed to show a different view and I was using onSelectRow for that functionality. I couldn't get onSelectRow to behave well with the bindKeys (onEnter etc) suggested by the jqGrid wiki for keyboard navigation. So figured, I would write my own keyboard navigation to make the custom widget accessible using just the keyboard. I am yet to make the reorder rows part of it accessible using just the keyboard. Here's my work in progress:

Une folle envie d'intégrer des listes (liste de membres, liste de produits, ...) à vos écrans facilement et sans prise de tête ?

La solution :  JqGrid

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

L'utilité ?

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.

Gem jqgrid for rails

et pour pas vous laisser dans l'ignorance voici le lien de la documentation avec des exemples présent sur github !

Documentation gem jqGrid

Un peu de code

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

Conclusion

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.