#jqgrid

[ngodingkode-blog-blog]

Setting default Value Inline Add 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:…

View On WordPress

[ngodingkode-blog-blog]

jqgrid - json - getting wrong value

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" } ] },…

View On WordPress

[ngodingkode-blog-blog]

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

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…

View On WordPress

[katoman]

ここでjqGridの基本的な動作とコーディングの仕方がわかりますね。

[ramyasethu-blog]

Keyboard accessibility for custom jQuery-jqGrid widget.

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:

//Tab to enter into the grid //Arrow up/down to simulate hover on rows //Press enter to select a row //When up/down arrow is pressed, if no row in grid has hover or highlight classes, first row is selected //else the row before/after the highlighted (or hovered) row gets selected //Use ctrl and shift keys to multi select. handleDestGridNav: function(e) { console.log('>medex.chooser.handleDestGridNav',e.keyCode); var that = this; switch(e.keyCode) { case 38: //UpArrow -- Let it fall to the next case case 40: //DownArrow var childRows = jQuery(e.currentTarget).find('tr.ui-widget-content'); if ((!childRows.hasClass('ui-state-hover')) && (!childRows.hasClass('ui-state-highlight'))) { var firstRow = jQuery(e.currentTarget).find('tr.ui-widget-content:first'); firstRow.focus(); firstRow.addClass('ui-state-hover'); } else { var thisRow = jQuery(e.currentTarget).find('tr.ui-state-hover'); if (thisRow.length === 0) { thisRow = jQuery(e.currentTarget).find('tr.ui-state-highlight'); } else if (that.options.captureSelection) { thisRow.addClass('ui-selected'); } childRows.removeClass('ui-state-hover'); if (e.keyCode === 38) { var prevRow = thisRow.prev('.ui-widget-content'); if (prevRow.length > 0) { prevRow.focus(); prevRow.addClass('ui-state-hover'); } else { thisRow.focus(); thisRow.addClass('ui-state-hover'); } } else if (e.keyCode === 40){ var nextRow = thisRow.next('.ui-widget-content'); if (nextRow.length > 0) { nextRow.focus(); nextRow.addClass('ui-state-hover'); } else { thisRow.focus(); thisRow.addClass('ui-state-hover'); } } } return false; break; case 37: //left arrow var sourceGrid = jQuery('#'+that.options.sourceGridId); var destGrid = jQuery('#'+that.options.destGridId); if (jQuery(e.currentTarget).attr('id') === destGrid.attr('id')) { var rows = destGrid.find('tr.ui-selected'); var rowId = rows.last().attr('id'); var nextRow = jQuery('#'+rowId).next(); that.addRowsToSourceGrid(rows); if (nextRow.length > 0) { nextRow.focus(); } else { destGrid.find('tr.ui-widget-content:first').focus(); } sourceGrid.find('tr.ui-state-hover').removeClass('ui-state-hover'); } break; case 39: //right arrow var sourceGrid = jQuery('#'+that.options.sourceGridId); var destGrid = jQuery('#'+that.options.destGridId); if (jQuery(e.currentTarget).attr('id') === sourceGrid.attr('id')) { var rows = sourceGrid.find('tr.ui-selected'); var rowId = rows.last().attr('id'); var nextRow = jQuery('#'+rowId).next(); that.addRowsToDestGrid(rows); if (nextRow.length > 0) { nextRow.addClass('ui-state-hover').focus(); } else { sourceGrid.find('tr.ui-widget-content:first').focus(); } destGrid.find('tr.ui-state-hover').removeClass('ui-state-hover'); } break; case 13: //enter key jQuery(e.currentTarget).find('tr.ui-state-hover').addClass('ui-selected'); that.options.captureSelection = false; break; case 16: //shift key that.options.captureSelection = true; break; default: break; }

[jumboweb]

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 ?

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.

Rails Version : 3.0

[tecknbstr-blog]

jqGrid 4.1.1のdate formatterでopts.S呼び出しでエラーになるワークアラウンド

jqGrid呼び出し前に $.jgrid.formatter.date.S = function(v) {return v};　// ほんとはフォーマットSの処理を書くべき

[cknbstr-blog]

jqGrid 4.1.1のdate formatterでopts.S呼び出しでエラーになるワークアラウンド

jqGrid呼び出し前に $.jgrid.formatter.date.S = function(v) {return v};　// ほんとはフォーマットSの処理を書くべき