rails javascript
(9,436 views)

jqGrid for RESTful Rails

jqGrid is a high quality grid plug-in for jQuery. I made a couple of tweaks so it supports RESTful requests and Rails routes.

jqGrid is a high quality grid plug-in for jQuery . I made a couple of tweaks so it supports RESTful requests and Rails routes. The changes are on github, and maybe they'll be pulled into the project once others have had a chance to try it.

To setup jqGrid to perform actions on individual rows in the table, you use the navGrid function to configure the pager bar with navigation tools. One of options is the url to use for the add, edit, and delete actions. Normally, jqGrid passes the Id of the row as a url parameter (eg /notes?id=123). RESTful Rails requests expect the Id to be part of the url (eg /notes/123 ). I changed grid.formedit.js so you can embed the id in the url. Using "{id}" in the url string will be replaced by the data Id.

jqGrid also lets you set the request verb ('GET', 'POST') using the mtype option. To support RESTful requests you'd want to make sure edit (update) uses 'PUT', add (create) uses 'POST', and delete (destroy) uses 'DELETE'.

 For example,

 jQuery("#mygrid").jqGrid('navGrid','#pager',
  { view:true, add:true, edit:true, del:true, search:false, refresh:false },
  { url: '/notes/{id}', mtype: 'PUT' },   // edit settings
  { url: '/notes', mtype: 'POST' },       // add settings
  { url: '/notes/{id}', mtype: 'DELETE' } // delete settings
);      

Note, if you support multiselects, for example for deleting multiple rows, id will be a comma delimited array string. Your rails controller can handle that by doing something like Note.destroy( params[:id].split(',') )

As a shortcut, I've added a grid option "restful: true" which overrides any mtype and url settings.

jQuery("#mygrid").jqGrid({
  url:      '/notes',
  restful:  true;
  ... 
}); 
 
jQuery("#mygrid").jqGrid('navGrid','#pager',
  { view:true, add:true, edit:true, del:true, search:false, refresh:false },
  {},   // edit settings
  {},   // add settings
  {}    // delete settings
); 

 

 

Comments

by stevev on Jul 23, 2010

>>

Have these changes been committed to the jqGrid project yet?

by Chris on Dec 05, 2011

>>

i have add your js files from github but nothing happens

by on Dec 06, 2011

>>

Hi, fyi, I'm no longer maintaining this project. Lately I've been using DataTables for jQuery (http://datatables.net/) instead of jqGrid, and like the simple_datatables gem for integration with Rails 3.1 apps (http://github.com/gryphon/simple_datatables)

New Comment

markdown formatting permitted