Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Simple plug-in to easily create jqgrids using rails.

branch: master

Merge pull request #8 from anujjamwal/master

As the helper expects `records` to be a `WillPaginate::Collection`, I think there is no difference between using `first` and taking the first item using the index.

It's better to use the use the index though, in order to avoid an extra query if a `relation` is used instead, so I think it's good to merge it.

Thanks.
latest commit ca9e625bc7
Juan M. Cuello authored September 15, 2013
Octocat-spinner-32 lib Now it doesn't fire the query to fetch one record additionally July 30, 2013
Octocat-spinner-32 rails first commit December 18, 2010
Octocat-spinner-32 test Fix test when returning paginated empty results. April 01, 2013
Octocat-spinner-32 .gitignore Add test database file to .gitignore January 03, 2011
Octocat-spinner-32 CHANGELOG.rdoc Release 1.0.2 March 27, 2013
Octocat-spinner-32 MIT-LICENSE first commit December 18, 2010
Octocat-spinner-32 README.rdoc Update README.rdoc. June 08, 2011
Octocat-spinner-32 Rakefile Require rdoc/task instead of rake/rdoctask April 01, 2013
Octocat-spinner-32 install.rb first commit December 18, 2010
Octocat-spinner-32 jqgrid_for_rails.gemspec Make the project available as a gem. January 06, 2011
Octocat-spinner-32 uninstall.rb first commit December 18, 2010
README.rdoc

JqgridForRails

This is a simple plug-in to create a JqGrid javascript code easily inside rails views.

It is extremely flexible, all the ruby code is converted to java script code, so you can use all the jqgrid supported features. It is not an abstraction layer from the jqGrid apis, instead, you type the same code you would do to create the grid using javascript but in Ruby. The code should follow the jqgrid api definition.

For example, to get this java script code:

jQuery("#invoices_list").jqGrid("navGrid", "#invoices_pager", {"search":true,"refresh":false});

You should type in ruby:

jqgrid_api 'invoices_list', [:navGrid, '#invoices_pager', {:search => true, :refresh => false}]

See below for more examples.

Installation

As a gem:

$ gem install jqgrid_for_rails

As a plugin:

$ rails plugin install git://github.com/Juanmcuello/jqgrid_for_rails.git

Examples

There is an example application at:

github.com/Juanmcuello/jqgrid_for_rails_example

Views

To generate the grid, you can first create a method in a helper and then call the jqgrid_api method to generate the java script code. For example, if you have an invoices_helper.rb file, you can define a method there:

# app/helpers/invoices_helper.rb

module InvoicesHelper

  include JqgridsHelper

  def invoices_jqgrid

    grid = [{
      :url => '/invoices',
      :datatype => 'json',
      :mtype => 'GET',
      :colNames => ['Inv No','Date'],
      :colModel  => [
        { :name => 'invid',   :index => 'invid',    :width => 180 },
        { :name => 'invdate', :index => 'invdate',  :width => 180 },
      ],
      :pager => '#invoices_pager',
      :rowNum => 10,
      :rowList => [10, 20, 30],
      :caption => 'My first grid',
      :onSelectRow => "function() { alert('Row selected!');}".to_json_var
    }]

    jqgrid_api 'invoices_list', grid
  end
end

Now you can use the helper in the view:

# app/views/invoices/index.html.erb

<table id=invoices_list></table>
<div id=invoices_pager></div>

<%= raw(invoices_jqgrid) %>

Or, if you are using Rails 2.3.x :

<%= invoices_jqgrid %>

This will result in something like:

<table id=invoices_list></table>
<div id=invoices_pager></div>

<script>
  jQuery("#invoices_list").jqGrid({
    "url":"/invoices",
    "datatype":"json",
    "mtype":"GET",
    "colNames":["Inv No","Date"],
    "colModel":[
      {"name":"invid","index":"invid","width":180},
      {"name":"invdate","index":"invdate","width":180}],
    "pager":"#invoices_pager",
    "rowNum":10,
    "rowList":[10,20,30],
    "caption":"My first grid",
    "onSelectRow":function() { alert('Row selected!');}
  });
</script>

Note: resulting code was indented for clarification.

You can do it better using content_for in the view:

<% content_for :head do %>
  <%= raw(invoices_jqgrid) %>
<% end %>

Don't forget to include the jquery and jqgrid javascript and stylesheet files!

col_model_for_jqgrid

This helper easily creates an array to be used as col_model.

col_model_for_jqgrid(['inv_date', 'total' ], {:width => 100})

  #=> [{:name=>"inv_date", :index=>"inv_date", :width=>100}, {:name=>"total", :index=>"total", :width=>100}]

So you you can use it when creating the grid in the helper:

grid = [{
  :url => '/invoices',
  :datatype => 'json',
  :mtype => 'GET',
  :colNames => ['Inv No','Date'],
  :colModel  => col_model_for_jqgrid(['Inv No','Date']),
  :pager => '#invoices_pager',
  :rowNum => 10,
  :rowList => [10, 20, 30],
  :caption => 'My first grid',
  :onSelectRow => "function() { alert('Row selected!');}".to_json_var
}]

jqgrid_api 'invoices_list', grid

Controllers

There are convenient methods available in the controllers

json_for_jqgrid

This method generates the json response for the grid. It takes the records found by the paginate method offered by will_paginate.

In the controller:

# app/controllers/invoices_controller.rb

class InvoicesController < ApplicationController

  def index
    @columns = ['invid', 'invdate']
    @invoices = Invoice.paginate(:page => params[:page], :per_page => params[:rows])

    if request.xhr?
      render :json => json_for_jqgrid(@invoices, @columns)
    end
  end
end

order_by_from_params

This method creates an active record order string using the params sent by the grid.

@invoices = Invoice.paginate(
  :page     => params[:page],
  :per_page => params[:rows],
  :order    => order_by_from_params(params))

Maintainers

License

Copyright © 2010 Juan M. Cuello, released under the MIT license

Something went wrong with that request. Please try again.