xf986321

浏览: 163883 次
性别:
来自: 杭州

最近访客更多访客>>

liunancun

ccsp

xmgcoffee

vegaxh

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Add jQuery datagrids to your Rails applications

博客分类：

rails cookbook

jQuery Rails CSS json JavaScript

Add jQuery datagrids to your Rails applications

Update : added support for subgrids. Have a look at the last example!

The jQuery grid plugin is an amazing Javascript project providing multi-functions Ajax datagrids for your web applications. With the 2dcJqgrid Rails plugin , you can now add these datagrids to your Ruby on Rails applications with just a few lines of code.

If you don't like the look & feel of this demo, you can easily customize it using jQuery themes .

Communications between your grids and the server will use the JSON format to exchange data.

The source code of this demo application is available on GitHub.

This solution is compatible with most of web browsers (even Internet Explorer 6 !!).

If you have any comments or suggestions, please post them here .

Installation

Inside your Rails application :

$ ./script/plugin install git://github.com/ahe/2dc_jqgrid.git
$ ./script/plugin install git://github.com/thoughtbot/squirrel.git

./script/generate scaffold user pseudo:string firstname:string lastname:string email:string role:string

Add some data to your migration file, you can use this one .
Run the migration :

$ rake db:migrate

Open the default layout created for you by the scaffold script (layouts/users.html.erb) and add the required JS & CSS in the header :

<%= jqgrid_stylesheets %>
<%= jqgrid_javascripts %>

Replace the index method in your controller by this one :

def 
index

  users
 =
 User
.
find
(
:all
)
 do

    if
 params
[
:_search
]
 ==
 "
true
"

      pseudo
    =~
 "
%#{params[:pseudo]}%
"
 if
 params
[
:pseudo
].
present?

      firstname
 =~
 "
%#{params[:firstname]}%
"
 if
 params
[
:firstname
].
present?

      lastname
  =~
 "
%#{params[:lastname]}%
"
 if
 params
[
:lastname
].
present?
                
      email
     =~
 "
%#{params[:email]}%
"
 if
 params
[
:email
].
present?

      role
      =~
 "
%#{params[:role]}%
"
 if
 params
[
:role
].
present?
        
    end

    paginate
 :page
 =>
 params
[
:page
],
 :per_page
 =>
 params
[
:rows
]
      
    order_by
 "
#{params[:sidx]} #{params[:sord]}
"

  end


  respond_to
 do
 |
format
|

    format
.
html

    format
.
json
 {
 render
 :json
 =>
 users
.
to_jqgrid_json
([
:id
,
:pseudo
,
:firstname
,
:lastname
,
:email
,
:role
],
 
                                                       params
[
:page
],
 params
[
:rows
],
 users
.
total_entries
)
 }

  end

end

The query has been added into the controller for clarity purposes in this demo. It's of course a better idea to create a method in your User class. Notice how the squirrel plugin makes it easy to add filters and pagination to our finder.

Also notice the to_jqgrid_json method, it will generate the required JSON for you. The order of the fields in the first parameter matters, it should be the same than the display order in your datagrid.
You are now ready to create datagrids.

Simple DataGrid with search, pagination & sorting

The code used to create this grid is :

<%= jqgrid
("
Football Players
",
 "
players
",
 "
/users
",

	[

		{
 :field
 =>
 "
id
",
 :label
 =>
 "
ID
",
 :width
 =>
 35
,
 :resizable
 =>
 false
 },

		{
 :field
 =>
 "
pseudo
",
 :label
 =>
 "
Pseudo
"
 },

		{
 :field
 =>
 "
firstname
",
 :label
 =>
 "
Firstname
"
 },

		{
 :field
 =>
 "
lastname
",
 :label
 =>
 "
Lastname
"
 },

		{
 :field
 =>
 "
email
",
 :label
 =>
 "
Email
"
 },

		{
 :field
 =>
 "
role
",
 :label
 =>
 "
Role
"
 }
				
	]

)
 %>

The first argument of the jqgrid helper is the title of your grid.
The second one is his DOM ID.
The third one is the URL used to retrieve data.
Finally, it takes an array of hashes to configure columns.

Simple DataGrid with selection link/button

Get ID of selected row

In this case, we added a "Get ID of selected row" link. When this link is clicked, the Javascript method defined by :selection_handler is called, with the ID of the row as a parameter :

<script type="text/javascript">
function handleSelection(id) {
	alert('ID selected : ' + id);
}
</script>
<%=jqgrid
("
Football Players
",
 "
players_2
",
 "
/users
",

	[

		{
 :field
 =>
 "
id
",
 :label
 =>
 "
ID
",
 :width
 =>
 35
,
 :resizable
 =>
 false
 },

		{
 :field
 =>
 "
pseudo
",
 :label
 =>
 "
Pseudo
"
 },

		{
 :field
 =>
 "
firstname
",
 :label
 =>
 "
Firstname
"
 },

		{
 :field
 =>
 "
lastname
",
 :label
 =>
 "
Lastname
"
 },

		{
 :field
 =>
 "
email
",
 :label
 =>
 "
Email
"
 },

		{
 :field
 =>
 "
role
",
 :label
 =>
 "
Role
"
 }

	],

	{
 :selection_handler
 =>
 "
handleSelection
"
 }

)
%>
<a href="#" id="players_2_select_button">Get ID of selected row</a>

The ID of this link is very important, it must be the ID of the jqgrid + "_select_button". You can use a button instead of a link if you want.

Simple DataGrid with direct selection

If you want to call the handler directly when you select a row instead of clicking on a link/button, use the following options. Of course, you also need the Javascript method "handleSelection" defined in the previous section.

<%=jqgrid
("
Football Players
",
 "
players_3
",
 "
/users
",

	[

		{
 :field
 =>
 "
id
",
 :label
 =>
 "
ID
",
 :width
 =>
 35
,
 :resizable
 =>
 false
 },

		{
 :field
 =>
 "
pseudo
",
 :label
 =>
 "
Pseudo
"
 },

		{
 :field
 =>
 "
firstname
",
 :label
 =>
 "
Firstname
"
 },

		{
 :field
 =>
 "
lastname
",
 :label
 =>
 "
Lastname
"
 },

		{
 :field
 =>
 "
email
",
 :label
 =>
 "
Email
"
 },

		{
 :field
 =>
 "
role
",
 :label
 =>
 "
Role
"
 }

	],

	{
 :selection_handler
 =>
 "
handleSelection
",
 :direct_selection
 =>
 true
 }

)
%>

Simple DataGrid with multiple selections

Get IDs of selected rows

>%=jqgrid
("
Football Players
",
 "
players_4
",
 "
/users
",

	[

		{
 :field
 =>
 "
id
",
 :label
 =>
 "
ID
",
 :width
 =>
 35
,
 :resizable
 =>
 false
 },

		{
 :field
 =>
 "
pseudo
",
 :label
 =>
 "
Pseudo
"
 },

		{
 :field
 =>
 "
firstname
",
 :label
 =>
 "
Firstname
"
 },

		{
 :field
 =>
 "
lastname
",
 :label
 =>
 "
Lastname
"
 },

		{
 :field
 =>
 "
email
",
 :label
 =>
 "
Email
"
 },

		{
 :field
 =>
 "
role
",
 :label
 =>
 "
Role
"
 }

	],

	{
 :selection_handler
 =>
 "
handleSelection
",
 :multi_selection
 =>
 true
 }

)
%>
<a href="#" id="players_4_select_button">Get IDs of selected rows</a>

Simple DataGrid with master details

We need associated data to create this master-details grid :

$ ./script/generate model pet name:string user_id:integer

Add a relationship in your User (has_many :pets) and Pet (belongs_to :user) models.
Then add data to your migration file : you can use this one .

Create the table :

$ rake db:migrate

And add the pets method in your users controller :

def 
pets

  if
 params
[
:id
].
present?

    pets
 =
 User
.
find
(
params
[
:id
]).
pets
.
find
(
:all
)
 do

      paginate
 :page
 =>
 params
[
:page
],
 :per_page
 =>
 params
[
:rows
]
      
      order_by
 "
#{params[:sidx]} #{params[:sord]}
"
        
    end

    total_entries
 =
 pets
.
total_entries

  else

    pets
 =
 []

    total_entries
 =
 0

  end

  respond_to
 do
 |
format
|

    format
.
json
 {
 render
 :json
 =>
 pets
.
to_jqgrid_json
([
:id
,
:name
],
 params
[
:page
],
 params
[
:rows
],
 total_entries
)
 }

  end

end

Don't forget to edit your routes and restart the server :

map.resources :users, :collection => { :pets => :get }

You can finally add your grids :

<%=jqgrid
("
Football Players
",
 "
players_5
",
 "
/users
",

	[

		{
 :field
 =>
 "
id
",
 :label
 =>
 "
ID
",
 :width
 =>
 35
,
 :resizable
 =>
 false
 },

		{
 :field
 =>
 "
pseudo
",
 :label
 =>
 "
Pseudo
"
 },

		{
 :field
 =>
 "
firstname
",
 :label
 =>
 "
Firstname
"
 },

		{
 :field
 =>
 "
lastname
",
 :label
 =>
 "
Lastname
"
 },

		{
 :field
 =>
 "
email
",
 :label
 =>
 "
Email
"
 },

		{
 :field
 =>
 "
role
",
 :label
 =>
 "
Role
"
 }

	],

	{
 :master_details
 =>
 true
,
 :details_url
 =>
 "
/users/pets
",
 :details_caption
 =>
 "
Pets
"
 }

)
%>
<br/>
<%=jqgrid
("
Pets
",
 "
players_5_details
",
 "
/users/pets
",

	[

		{
 :field
 =>
 "
id
",
 :label
 =>
 "
ID
",
 :width
 =>
 35
,
 :resizable
 =>
 false
 },

		{
 :field
 =>
 "
name
",
 :label
 =>
 "
Name
",
 :width
 =>
 500
,
 :align
 =>
 '
center
'
 }

	]

)
%>

The DOM ID of your details grid is important, it must be the ID of the master grid + "_details".

For evident reasons, data manipulation has been disabled in this demo

Data manipulation with inline editing

We need one last method in our controller to handle data manipulation.
Create the post_data method in your users controller :

def 
post_data

  if
 params
[
:oper
]
 ==
 "
del
"

    User
.
find
(
params
[
:id
]).
destroy

  else

    user_params
 =
 {
 :pseudo
 =>
 params
[
:pseudo
],
 :firstname
 =>
 params
[
:firstname
],
 :lastname
 =>
 params
[
:lastname
],
 
                    :email
 =>
 params
[
:email
],
 :role
 =>
 params
[
:role
]
 }

    if
 params
[
:id
]
 ==
 "
_empty
"

      User
.
create
(
user_params
)

    else

      User
.
find
(
params
[
:id
]).
update_attributes
(
user_params
)

    end

  end

  render
 :nothing
 =>
 true

end

It's of course your role to add security & validation rules.

If protect_from_forgery is on, disable it for this action :

protect_from_forgery :except => [:post_data]

Edit your routes and restart the server :

map.resources :users, :collection => { :pets => :get, :post_data => :post }

You can now add the grid :

<%=jqgrid
("
Football Players
",
 "
players_6
",
 "
/users
",

	[

		{
 :field
 =>
 "
id
",
 :label
 =>
 "
ID
",
 :width
 =>
 35
,
 :resizable
 =>
 false
 },

		{
 :field
 =>
 "
pseudo
",
 :label
 =>
 "
Pseudo
",
 :editable
 =>
 true
 },

		{
 :field
 =>
 "
firstname
",
 :label
 =>
 "
Firstname
",
 :editable
 =>
 true
 },

		{
 :field
 =>
 "
lastname
",
 :label
 =>
 "
Lastname
",
 :editable
 =>
 true
 },

		{
 :field
 =>
 "
email
",
 :label
 =>
 "
Email
",
 :editable
 =>
 true
 },

		{
 :field
 =>
 "
role
",
 :label
 =>
 "
Role
",
 :editable
 =>
 true
 }

	],

	{
 :add
 =>
 true
,
 :edit
 =>
 true
,
 :inline_edit
 =>
 true
,
 :delete
 =>
 true
,
 :edit_url
 =>
 "
/users/post_data
"
 }

)
%>

Data manipulation with modal editing (+ navigation)

<%=jqgrid
("
Football Players
",
 "
players_7
",
 "
/users
",

	[

		{
 :field
 =>
 "
id
",
 :label
 =>
 "
ID
",
 :width
 =>
 35
,
 :resizable
 =>
 false
 },

		{
 :field
 =>
 "
pseudo
",
 :label
 =>
 "
Pseudo
",
 :editable
 =>
 true
 },

		{
 :field
 =>
 "
firstname
",
 :label
 =>
 "
Firstname
",
 :editable
 =>
 true
 },

		{
 :field
 =>
 "
lastname
",
 :label
 =>
 "
Lastname
",
 :editable
 =>
 true
 },

		{
 :field
 =>
 "
email
",
 :label
 =>
 "
Email
",
 :editable
 =>
 true
 },

		{
 :field
 =>
 "
role
",
 :label
 =>
 "
Role
",
 :editable
 =>
 true
 }

	],

	{
 :add
 =>
 true
,
 :edit
 =>
 true
,
 :inline_edit
 =>
 false
,
 :delete
 =>
 true
,
 :edit_url
 =>
 "
/users/post_data
"
 }

)
%>

Data manipulation with various input types

分享到：

URI 与 URL的区别 | Multiple Attachments in Rails

2009-06-03 10:39
浏览 1519
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Add jQuery datagrids to your Rails applications

Add jQuery datagrids to your Rails applications

Installation

Simple DataGrid with search, pagination & sorting

Simple DataGrid with selection link/button

Simple DataGrid with direct selection

Simple DataGrid with multiple selections

Simple DataGrid with master details

Data manipulation with inline editing

Data manipulation with modal editing (+ navigation)

Data manipulation with various input types

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Add jQuery datagrids to your Rails applications

Add jQuery datagrids to your Rails applications

Installation

Simple DataGrid with search, pagination & sorting

Simple DataGrid with selection link/button

Simple DataGrid with direct selection

Simple DataGrid with multiple selections

Simple DataGrid with master details

Data manipulation with inline editing

Data manipulation with modal editing (+ navigation)

Data manipulation with various input types

评论

发表评论

相关推荐

actionmailer发送邮件失败的问题解决记录

ROR rake

控制器内部对请求的操作

在rails环境中直接执行sql语句而不需要创建MODEL

6 Steps To Refactoring Rails (for Mere Mortals)

rails 中简单的创建保存一条信息

uninstall all gems

rails 拖拉排序效果demo

something about with_scope

Multiple Attachments in Rails

REST on Rails之自定义路由

自定义will_paginage输出

Rails Cookie测试

配置ActionMailer使用GMail发送邮件

rails 记住跳转前的url

给Non-ActiveRecord Objects进行validate

file_column简单的照片上传

cookie + js动态修改iframe 父窗口的链接参数

git 冲突解决

git 下gw来查看团队的修改

最近访客更多访客>>