一个经典的Rails AJAX 搜索 排序 和分页示例

RubyOnRails 专栏收录该内容
293 篇文章 0 订阅
[color=green]写在前头
绿色的部分是,这个介绍容易出问题部分的解释。本来就是面向零基础,才写的,所以不怕麻烦和琐碎。然而,如果你还是嫌太麻烦,或者你不希望了解细节的话。那么,我建议你直接点击[url=http://hinder.iteye.com/topics/download/fc389e2c-e6f9-38cd-ba6f-7a76247aa0d5]这里[/url],下载ajaxtable.rar的压缩包。在安装ruby和rails的环境下,到解压的目录下,运行ruby script/server直接看效果。
压缩包里有paginate的plugin,数据库也不用配置因为是文件的。万一你的系统不认sqlite3,请下载sqlite3的rar,里面有个gem包安装就可以了。
希望能够给有兴趣的,或者初学者带来帮助
[/color]

这是一个相当经典的(我认为^_^)用来展示,ajax调用排序,搜索和分页的示例。这个示例的特点是把过程写的相当的啰嗦,大妈专杀。以至于非常的好理解,非常的初级,非常的好用。

[b][size=medium]任务说明简介和重要提示[/size][/b]

在这个示例教程理,我们将要使用Rails的AJAX,来实现对结果集的如下功能:

1. 分页
2. 排序,可以对结果集的任何一个属性进行ajax排序。
3. 查询,ajax检索

在线的示例演示,请访问如下网址:(还没有准备好...)

能够部分刷新的对页面的结果集进行更新,变得越来越普遍。对于Rails来说,天生的和ajax有着完美的支持。所以,对这项功能的实现相当容易。
示例中的代码, 很大部分来源于Rails Wiki的官方说明。特别是How to make a real-time search box with the Ajax helpers 和 How to paginate with Ajax.我只是把这些代码攒到了一起,不能用的时候,稍微改了一下变量名。以便看起来更不像抄袭。

注意啦,很重要:
我既不是Rails高手,也不是AJAX大拿。在这两个领域里,我都是拥有长期经验的菜鸟。所以这个示例是面对初学者和大妈们的。你会看到简介的代码,详尽的解释,但是缺乏高效规范。幸好,虽然,我的母语是汉语,但是难免还是有错误。
任何时候,请到我的博客告诉我。

[b]应用安装和配置[/b]
在这个示例中,我们假设已经安装了当前的Rails环境(至少高于2.0)和支持数据库。在我们这里用Sqlite,当然你也可以很容易的使用其他的数据库代替。

框架生成:
我们要在目录下生成“skeleton”先:

rails ajaxtable
cd ajaxtable


在rails 2.0以后,分页的功能已经从Rails core中分离出来,成为一个独立的plugin叫作classic pagination。很不幸的很多开发者,认为will_paginate是更加流行的分页插件。但是,我并没有使用will_paginate整合我的示例。所以,我们还是首先,使用下面的命令安装classic pagination plugin

ruby script/plugin install svn://errtheblog.com/svn/plugins/classic_pagination

[color=green]这里如果不能安装,请直接下载附件classic_pagination.rar解压缩放到verdor\plugin目录,就不用安装分页插件了。[/color]

鉴于,我们搭建的是一个非常基础的应用,所以,我们只有一个用来存储结果集的model和controller。我们将使用如下Rails的scripts生成

$ ruby script/generate model Item
$ ruby script/generate controller Item


[b]数据库准备:[/b]

简单起见,我们选择sqlite做存储。这将意味着我们将描述文件放到Rails中,并且用它生成数据库。
更新数据库配置文件:config/database.yml如下:

development:
adapter: sqlite3
database: db/development.db

然后,我们将使用如下Rails migration 工具创建数据库如下:

ruby script/generate migration database_creation


这条语句将生成类似db/migrate/20090303130724_database_creation.rb的文件。
[color=green]修改这个文件,重新定义数据库表结构[/color]

class DatabaseCreation < ActiveRecord::Migration

def self.up
create_table :items do |t|
t.column :name, :string, :limit => 30
t.column :quantity, :integer, :null => false, :default => 0
t.column :price, :integer, :null => false, :default => 0
end
end

def self.down
drop_table :items
end

end

然后,运行如下:


rake db:migrate


[color=green]这里如果,出现不能安装错误请下载附件sqlite3.rar,并放到ruby\bin目录下,执行[/color]

gem install -l c:\ruby\bin\sqlite3-ruby-1.2.3-mswin32.gem



用以创建表结构。接下来将加载数据

在db目录下应该有一个development.db的文件,这个文件就是存储sqlite数据。
你可以用如下的方法插入数据创建db/dump.sql如下:


BEGIN TRANSACTION;
INSERT INTO "items" VALUES(1, 'hoe', 3, 10);
INSERT INTO "items" VALUES(2, 'wheelbarrow', 2, 60);
INSERT INTO "items" VALUES(3, 'gherkin', 15, 3);
INSERT INTO "items" VALUES(4, 'batman', 1, 3000);
INSERT INTO "items" VALUES(5, 'fish sausage', 2, 8);
INSERT INTO "items" VALUES(6, 'sauerkraut', 9, 9);
INSERT INTO "items" VALUES(7, 'watering-can', 4, 13);
INSERT INTO "items" VALUES(8, 'dandelions', 78, 1);
INSERT INTO "items" VALUES(9, 'refrigerator', 12, 250);
INSERT INTO "items" VALUES(10, 'flying matches', 8, 145);
INSERT INTO "items" VALUES(11, 'broken accordion', 1, 18);
INSERT INTO "items" VALUES(12, 'savage whisper', 5, 7);
INSERT INTO "items" VALUES(13, 'hysterical snail', 8, 13);
COMMIT;


运行:

sqlite3 db/development.db < db/dump.sql

[color=green]注意:
1.如果运行这个命令的时候,提示找不到sqlite3,请下载sqlite3的附件,放到ruby\bin\下,并且运行时,请指明路径
2.如果你使用的数据库是mysql请自己修改,insertinto的语句格式如下 INSERT INTO items VALUES (1, 'hoe', 3, 10);[/color]那么,到现在为止,我们准备好了数据库和用到的文件

[b]创建model[/b]

就像你应该知道的,Rails程序通常会分为三层。实际上我们已经创建了/models/item.rb文件。并且我们并不需要更改。
那么,看起来,我们的第一步编码工作还不算太困难。

[b]创建view[/b]

我们应用将被分成两个部分,一个layout 另外一部分是view和partial。

Layout

Layout是页面模板用来容纳不同的几个views。Layout包含一些不变的元素例如:html的header和footer信息,导航和设计元素等。当然,这些功能完全没有能够在我们的示例中体现。因为,我们只有一个页面,
那么layout应该在app/views/layouts/item.rhtml,其中代码如下:


<html>
<head>
<title>Ajax table manipulation attempt</title>
<%= stylesheet_link_tag "style" %>
<%= javascript_include_tag :defaults %>
</head>
<body>

<div id="content">
<%= @content_for_layout %>
</div>

</body>
</html>


在这段代码中,值得注意的是javascript_include_tag 将加载对应的javascript库,以便Rails可以得到AJAX功能支持。
@content_for_layout 部分,将会被生成的内容代替。

[b] view部分[/b]

view将会把controller的结果展示。逻辑部分在一节详述。根据Rails配置原则,我们view将对应item controller的listaction所以我们的view在
app/views/item/list.rhtml.
该文件的内容如下:


<h1>欢迎使用神奇的 items 列表</h1>

<p>我们的列表是Web2.0的经典产物。</p>

<p>但是请注意,这里可能有太多的bug.</p>

<h2>bug list如下</h2>

<p>
<form name="sform" action="" style="display:inline;">
<label for="item_name">Filter on item name : </label>
<%= text_field_tag("query", params['query'], :size => 10 ) %>
</form>

<%= image_tag("spinner.gif",
:align => "absmiddle",
:border => 0,
:id => "spinner",
:style =>"display: none;" ) %>
</p>

<%= observe_field 'query', :frequency => 2,
:update => 'table',
:before => "Element.show('spinner')",
:success => "Element.hide('spinner')",
:url => {:action => 'list'},
:with => 'query' %>

<div id="table">
<%= render :partial => "items_list" %>
</div>


开始部分并没有什么复杂的,首先,是一段大妈专用的说明和一个检索输入框用以Filter。

然后,我们有一个id是spinner的隐藏image元素。这个image是用来AJAX有延迟调用的时候显示的(flash加载的滚动条)。当ajax的异步调用完成,可以显示数据时,这个image将再次隐藏。你可以从如下的网站得到更多的类似图片:
http://mentalized.net/activity-indicators/
[color=green]从上面的网站中下载一个gif,并重命名为spinner.gif放到public/images下。[/color]

在接下来的observe_field代码部分是最常用的AJAX代码。它的含义大概是定期检查指定区域的内容,并且当内容有变化的时候响应。

其中,使用到的变量有如下含义:
update 参数描述将要更新的<div>或<span>的id
url 该参数,指定响应和处理action。就是定期触发什么方法。
with 该参数,用以给url中指定的action,传递参数。在这里我们将会把observed field的检索数据传给list action
before 该方法用以指定,当AJAX的异步调用处理中将怎么执行。
sucess 当ajax的异步调用成功后,执行什么操作。

实际的操作流程相当简单,当用户在queryfield的检索框内输入要查询的东西,observerd 就会检测到监视区域的内容变化,然后,生成AJAX的请求,异步调用通过url和with的发送给服务器。注意这时页面是整体和局部都不刷新的。当请求发送的时候,before定义的操作将被执行。在我们的示例中是显示spinner图片。当请求有回复的时候,sucess的操作将被执行,在我们这里是隐藏图片。

实际上,observe_field方面发送的请求参数如下:


<script type="text/javascript">
//<![CDATA[
new Form.Element.Observer('query', 2, function(element, value) {Element.show('spinner'); new Ajax.Updater('table', '/item/list', {asynchronous:true, evalScripts:true, onSuccess:function(request){Element.hide('spinner')}, parameters:'query=' + value})})
//]]>
</script>


我们花时间来看,没一个参数选项的具体含义,是因为我们很快会再用到这些几乎每一种ajax调用都要用到的参数,

创建controller

我们的controller应该可以根据请求类别和参数的不同处理多种的请求。
Item contoller将会非常简单,我们只实现一个list的action。其他CRUD(创建、读取、更新、删除)方法将不在本示例中展示

那么,controller的内容如下:
[color=green]修改\ajaxtable\app\controllers\item_controller.rb[/color]


class ItemController < ApplicationController

def list

items_per_page = 10

sort = case params['sort']
when "name" then "name"
when "qty" then "quantity"
when "price" then "price"
when "name_reverse" then "name DESC"
when "qty_reverse" then "quantity DESC"
when "price_reverse" then "price DESC"
end

conditions = ["name LIKE ?", "%#{params[:query]}%"] unless params[:query].nil?

@total = Item.count(:conditions => conditions)
@items_pages, @items = paginate :items, :order => sort, :conditions => conditions, :per_page => items_per_page

if request.xml_http_request?
render :partial => "items_list", :layout => false
end

end

end


本段代码的简单说明如下:

controller的唯一一个方法,用于处理各种不同请求。其中,items_per_page 参数用以定义每页显示数量。sort参数取决于同名的传入参数。出于安全考虑以此代替真正的字段名。sort 中的reverse参数用于保证再次点击的时候可以依序排列。
conditions 参数用来指定从query请求参数提供的检索条件。这个参数是类似SQL样式。
然后,我们指定@total变量用来存储符合conditions条件的记录个数。

最终,我们调用Rails的分页机制。我们需要关联分页到数据库:item,和一个可排序字段,一个符合conditions的检索条件,和一个每页的显示个数。分页机制就会返回,一个@items_pages 的对象用以分页显示。

Rails和Ajax使用XmlHttpRequest,这不同与普通的GET和POST请求。XHR的请求由javascript通过后台的Http调用触发,请求一个部分的Xhtml代码片段来更新部分的浏览器显示。这样的好处是不用重新加载整个页面。用户的使用体验,会因此变快。

那么接下来呢?

[b]创建partial[/b]

partial是用来显示部分的页面。partial的设计初衷是为了复用,满足DRY(Don‘t Repeat Yoursel)的原则,当然,这里对于AJAX也非常有用。

这里我们使用partial更新部分页面,正好满足AJAX部分更新的要求。
Partial文件的名字总是下划线开头。我们的partialapp/views/item/_items_list.rhtml,内容如下


<% if @total == 0 %>

<p>No items found...</p>

<% else %>

<p>Number of items found : <b><%= @total %></b></p>

<p>
<% if @items_pages.page_count > 1 %>
Page :
<%= pagination_links_remote @items_pages %>
<% end %>
</p>


<table>
<thead>
<tr>
<td <%= sort_td_class_helper "name" %>>
<%= sort_link_helper "Name", "name" %>
</td>
<td <%= sort_td_class_helper "qty" %>>
<%= sort_link_helper "Quantity", "qty" %>
</td>
<td <%= sort_td_class_helper "price" %>>
<%= sort_link_helper "Price", "price" %>
</td>
</tr>
</thead>
<tbody>
<% @items.each do |i| %>
<tr class="<%= cycle("even","odd") %>">
<td><%= i.name %></td>
<td><%= i.quantity %></td>
<td><%= i.price %></td>
</tr>
<% end %>
</tbody>
</table>

<% end %>


[b]分页的helpers文件[/b]

在开始的时候,我们有一个符合条件的记录数和设定的每页显示记录数的判断。如果,符合条件的记录数小于每页可以显示的记录数,则不用分页。
相反,我们就需要要显示分页信息,虽然,Rails已经有了处理和显示的机制。可是我们希望能够实现ajax分页。那么我们需要创建pagination的helpers。
helper方法是用来帮助生成和显示view的。目的是为了将显示和逻辑分离,当然一定程度的复用和代码重构。
我们的helper文件在app/helpers/item_helper.rb. 我们的view可以读取这个文件的任何一个方法。但是,如果我们如果,希望应用中的任何view都可以使用这个文件的方法,那么我们就需要把代码放到application_helper.rb.
内容如下:


def pagination_links_remote(paginator)
page_options = {:window_size => 1}
pagination_links_each(paginator, page_options) do |n|
options = {
:url => {:action => 'list', :params => params.merge({:page => n})},
:update => 'table',
:before => "Element.show('spinner')",
:success => "Element.hide('spinner')"
}
html_options = {:href => url_for(:action => 'list', :params => params.merge({:page => n}))}
link_to_remote(n.to_s, options, html_options)
end
end

我们定义只有一个window_size的page_options的hash。这个参数标识当前页旁边的可以显示的页,如下如果window_size=1那么就会显示如下:
1 ... 5 6 7 ... 13
如果 window_size=2则显示
1 ... 4 5 6 7 8 ... 13

这样,我们就可以通过pagination_links得到对应的xhtml分页后的xhtml通过以上的连接。这的确可以用,然而,我们希望能够异步调用,实现AJAX的分页,所以我们重写pagination_links_each 方法
pagination_links_each 方法参数分析:
option和类似之前我们observe_field的参数,新的部分是params.merge,表示我们通过连接把将当前的请求参数代替之前的状态。
html_options是用来定义没有AJAX支持下的分页显示。以便分页机制在没有javascript支持下也可以用。

下面是实际的有两个页面市,第一个页面显示时的生成代码


<a href="/item/list?page=2" onclick="Element.show('spinner'); new Ajax.Updater('table', '/item/list?page=2', {asynchronous:true, evalScripts:true, onSuccess:function(request){Element.hide('spinner')}}); return false;">2</a>

sorting helpers

继续添加helpers

sort_td_class_helper代码如下:


def sort_td_class_helper(param)
result = 'class="sortup"' if params[:sort] == param
result = 'class="sortdown"' if params[:sort] == param + "_reverse"
return result
end

作用是添加一个class="sortup"用以支持逆序排列

sort_link_helper.


def sort_link_helper(text, param)
key = param
key += "_reverse" if params[:sort] == param
options = {
:url => {:action => 'list', :params => params.merge({:sort => key, :page => nil})},
:update => 'table',
:before => "Element.show('spinner')",
:success => "Element.hide('spinner')"
}
html_options = {
:title => "Sort by this field",
:href => url_for(:action => 'list', :params => params.merge({:sort => key, :page => nil}))
}
link_to_remote(text, options, html_options)
end


这个helper是上面pagination_links_remote的缩小版,它有两个参数:
text 用于显示字段的头和排序连接
param 和字段关联的请求参数
本段代码首先定义一个变量key用于保持param传递过来的参数。_reverse用于表示param是否正在排序中的参数。也就是说实现,第二次点击逆序。

接下来的代码定义了link_to_remote方法需要的参数,和paginateion_links_remote非常类似
option是哈希表,详情见上
html_options 也还是为了javascripte不支持下的功能实现。
下面是sort_link_helper以Quantity" 和 "qty" 作为 text 和 param 参数返回值的显示表格

最后,在用patial显示table的时候,如果希望能够,一行一个颜色,我们需要加入一个cycle的rails方法,来自动增加奇数和偶数的样式方法。

[b]最后了[/b]

我们已经或多或少的看了,在这个演示中用到的所有技术细节。在这个过程的最后,通过如下url享用你的劳动成果。
如果,这个文档对你有那么半点帮助,我的时间就值得欣慰了。我再重复一下,有什么问题请在我的博客反馈。
谢谢
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值