Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Simple plug-in to easily create jqgrids using rails.
Ruby
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
@Juanmcuello authored
Failed to load latest commit information.
lib Now it doesn't fire the query to fetch one record additionally
rails
test Fix test when returning paginated empty results.
.gitignore
CHANGELOG.rdoc Release 1.0.2
MIT-LICENSE
README.rdoc Update README.rdoc.
Rakefile
install.rb
jqgrid_for_rails.gemspec Make the project available as a gem.
uninstall.rb

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.