rails3中jqgrid的应用
十月 13, 2010 in Ruby/Ruby on Rails
jqGrid是一款非常优秀的ajax表格，它通过ajax回调机制来动态和服务器进行数据的交互。
jqGrid是基于jquery，是jquery家族一个组件，所以它的运行需要jquery库的支持。那么在web application中使用jqGrid的时候，必须先导入jquery包，同时它支持jquery的UI theme。那么如果你不喜欢jqGrid的默认颜色，可以通过jquery UI的theme去更改外观。
在这里介绍rails里面使用jqGrid。其中jqGrid支持很多功能，支持对数据进行格式，查找，编辑，子表格，树表格，分组，显示和隐藏字段以及导入和导出功能。同时jqGrid针对于很多功能都是用单一个js文件来实现，所以你可以根据自己想要的功能来选择系统想要的js文件。
在rails3里面使用jqGrid非常的方便，但是针对于rail3需要使用jquery，而不采用prototype的javascript库。由于本文主要介绍jqGrid在rails3里面的使用，就先假设rails3系统已经使用jquery。
1.首先下载jqGrid针对于rails3的版本的插件：
rails plugin install git://github.com/kritik/2dc_jqgrid_rails3.git
2.下载完成以后，这个插件可以自动安装，会在public/javascript以及public/stylesheets 下面创建关于jqGrid的目录。但是你会发现其中关于这些目录多生成一层目录。这对于这种情况下，rails如果不进行设置的话，将不能访问这些目录的图片、javascript和css等。
3. 修改插件中的rake命令，阅读插件下面的lib/tasks/2dc_jqgrid_tasks.rake文件，发现下面这句话有问题，会将 source下面包括目录将所有的内容进行拷贝，而这个时候不需要目录，而仅仅需要目录下面的内容，所以使用copy_entry来实现：
FileUtils.copy_r(source, target, :verbose => true)
修改为
FileUtils.copy_entry(source, target, :verbose => true)
4. 在当前工程目录下面运行rake jqgrid:install，可以生成正确的jqgrid的文件目录。
文件目录如下：
–public
|
|– images
| |
| |–jqgrid
|
|– javascripts
| |
| |–jqgrid
|
|– stylesheets
|
|–jqgrid
5.根据功能选择，删除不要jqgrid的javascript文件，例如针对于i18n目录下面的可以只保留中文和英文两种。
6.而针对于css文件也需要进行修改，其中针对于图片的话也需要进行的url也要进行修改，将原来的url(images/..)修改为url(/images/jqgrid/..)。
7.修改scaffold的模板文件index.html.erb文件，使其能够显示jquery表格。
<div class="page_header">
<h1>Listing <%= plural_name %></h1>
</div>
<div class="page_content">
<div class ="basic_form">
<%%=raw jqgrid("Listing <%= plural_name %>", "<%= plural_name %>", "/<%= plural_name %>",
[
<% attributes.each_with_index do |attribute, i|-%>
{ :field => "<%= attribute.name %>", :label => "<%= attribute.name %>" }<% if i < attributes.size-1 -%>,<% end %>
<% end -%>
] , {:autowidth=>true}
) %>
</div>
</div>
运行scaffold generator来生成整套程序的框架：
rails g scaffold test5 name:string description:string
这个时候，直接访问index页面，有下面的表格的显示。见下图：
其中生成的index.html.erb页面代码如下：
<div class="page_header">
<h1>Listing test5s</h1>
</div>
<div class="page_content">
<div class ="basic_form">
<%=raw jqgrid("Listing test5s", "test5s", "/test5s",
[
{ :field => "name", :label => "name" },
{ :field => "description", :label => "description" }
] , {:autowidth=>true}
) %>
</div>
</div>
8.rails3给了我们很大的方便，其中就是所有的查询都可以通过scope的方式来实现。那么这个时候，在model里面增加下面的代码。
#动态构建语言查询,传入的column为当前表+字段名
scope :match_value, lambda { |column, value|
return {} if value.blank?
{ :conditions => ["#{column} like ?", "%#{value}%"] }
}
#排序构建
scope :column_order, lambda { |key_part1,key_part2|
{ 
rder => key_part1.to_s+" "+ key_part2.to_s
}
}
9.在application里面增加翻页的代码：
#进行分页，返回分页后的scope和scope的记录的总记录数
def paginate(scoped,page,per_page)
page||=1
per_page||=10
[scoped.offset((page.to_i-1)*per_page.to_i).limit(per_page),scoped.count]
end
10.这个时候，仅仅是显示表格，但是我们如何显示表格内容，前面也一再提到jqGrid是一款ajax表格的工具，可以通过json或者xml来传输数据。那么熟悉rails的开发人员来，scaffold默认生成的index action中，默认生成format.html和format.xml两种。这个时候，为针对于修改index为下面的代码：
def index
@test5=Test5.column_order(params[:sidx],params[:sord])
if params[:_search] == "true"
@test5 = @test5.match_value("#{Test5.table_name}.name",params[:name]).
match_value("#{Test5.table_name}.description",params[:description])
end
@test5,count=paginate(@test5,params[:page],params[:rows])
respond_to do |format|
format.html # index.html.erb
format.xml { render 
ml => @test5 }
format.json { render :json => @test5.to_jqgrid_json([:name,:description],params[:page], params[:rows], count) }
end
end
11.其中针对to_jqgrid_json([:name,:description],params[:page], params[:rows], count) }这句中，在这里定义前端表格里面显示数据中field定义的字段内容，顺序要一一对应。其中查询结果如下图：
当然jqGrid还提供了很多功能，例如在表格里面增加数据，显示主表格和子表格等等。这些功能实现起来都大同小异，这里就不在详细介绍了。
