1.建立新的项目
rails new jsort -J
2.修改Gemfile,
gem 'rails3-generators' #用来安装jquery等
gem 'acts_as_list'
bundle install 安装gem
3.安装jquery和jquery ui,并且修改application.rb
rails g jquery:install --ui
在 application.rb中添加
config.action_view.javascript_expansions[:defaults] = %w(jquery jqueryui rails)
4.生成文章测试,并且修改post.rb添加acts_as_list
rails g scaffold post title:string body:text position:integer
#post.rb
class Post < ActiveRecord::Base
acts_as_list
end
5.移除index.html.修改 routes
rm public/index.html
#修改routes.rb
root :to=>"posts#index"
6.修改posts/_form.html.erb,去掉position列,添加几个文章测试下
<div class="field">
<%= f.label :position %><br />
<%= f.text_field :position %>
</div>
7.建立application.js,添加以下代码,
$(function(){
sortList("posts","tr");//调用排序方法,对post对行排序
})
//排序方法,可实现多次调用,obj:要排序的model复数名,item:排序元素,jqeury官方文发写的是对li进行排序,但可以对表格排序,具体访谈录请参考jquery ui文档
function sortList(obj,item)
{
$('#'+obj).sortable({
axis: 'y',
dropOnEmpty: false,
//handle: '.handle',
cursor: 'crosshair',
items: item,
opacity: 0.4,
scroll: true,
update: function(){
$.ajax({
type: 'post',
data: $('#'+obj).sortable('serialize'),
dataType: 'script',
complete: function(request){
$('#'+obj).effect('highlight');
},
url: ""+obj+"/sort"});
}
});
}
8.修改posts/index.html.erb
<h1>Listing posts</h1>
<table id="posts">
<tr>
<th>Title</th>
<th>Body</th>
<th>Position</th>
<th></th>
<th></th>
<th></th>
</tr>
<%=render :partial => "post", :collection => @posts%>
</table>
<br />
<%= link_to 'New Post', new_post_path %>
9.新建posts/_post.html.erb
<tr id="post_<%=post.id %>">
<td><%= post.title %></td>
<td><%= post.body %></td>
<td><%= post.position %></td>
<td><%= link_to 'Show', post %></td>
<td><%= link_to 'Edit', edit_post_path(post) %></td>
<td><%= link_to 'Destroy', post, :confirm => 'Are you sure?', :method => :delete %></td>
</tr>
10.把 application.js添加到application.html.erb
<%= javascript_include_tag "application" %>
11.在posts_controller.rb中添加排序方法
def sort
@posts = Post.all
@posts.each do |post|
post.position = params['post'].index(post.id.to_s) + 1
post.save
end
render :nothing => true
end
12.修改 routes.rb最终为:
resources :posts do
collection do
post :sort
end
end
root :to=>"posts#index"
最终代码:
git://github.com/doabit/jquery-sort-example.git
另:有个网站抓取JE的文章真速度,,打个标志:
转载注明:
javaeye--
doabit..
分享到:
相关推荐
jquery-ui+jquery-ui-rails
CRA+RailsAPI+设计登录+ActiveAdmin样板_Ruby_JavaScript_下
jquery-ui-rails 这个gem为Rails打包了jQuery UI资产(JavaScript,样式表和图像),因此您不必再通过下载自定义软件包。 请参阅以查看哪些版本的jquery-ui-rails捆绑了哪些版本的jQuery UI。 警告:此gem与3.0.0...
介绍插件,用于对记录进行排序(使用 gem)安装要启用rails_admin_acts_as_list,请将以下内容添加到您的Gemfile : gem 'rails_admin_acts_as_list'gem 'rails_admin' 重要提示: rails_admin_acts_as_list之前必须...
Rails3+GithubOAuth2+设计示例应用程序_Ruby_JavaScript_下
jquery-fileupload-rails, 用于 Rails的jQuery文件上传集成 Rails 文件上传jQuery-File-Plugin 是一个文件上传插件,由的Tschan 。 jQuery文件上传功能多文件选择。drag&拖放支持。进度栏和jQuery预览图像。 支持...
ruby2.0.0+selenium-webdriver+watir-webdriver+rails离线备份,设置环境变量后可使用(未测试)
jquery-datatables-rails, 用于 Rails的jquery数据表 gem jquery-datatables-rails 这个 gem 为 jQuery DataTables插件提供了方便,以便与 Rails 资产pipleine结合使用。 它提供所有基本的datatable文件,以及一些...
Api-acts_as_api.zip,使在rails中创建api响应变得简单和有趣,一个api可以被认为是多个软件设备之间通信的指导手册。例如,api可用于web应用程序之间的数据库通信。通过提取实现并将数据放弃到对象中,api简化了编程...
awesome-rails-gem-zh_CN, Rails 常用 Gem 列表 - Awesome Rails Gem 中文版
jquery-rails, 一个 gem,用于自动使用jQuery和 Rails 3 railsjQuery 面向 Rails 如此伟大。这里 gem 提供:jQuery 1.7.2jQuery UI 1.8.18 ( 仅适用于 javascript )jQuery UJS适配器assert_select_j
Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.
#ActsAsCategory acts_as_category (Version 2.0 beta)acts_as_category,是acts_as插件在acts_as_tree风格的Ruby on Rails的ActiveRecord的模式,但有一些额外的功能,以及多种便捷视图助手。例子(有关实例方法和...
acts_as_restful_list 就像acts_as_list 一样,但不必使用非标准方法调用(如insert_at)来弄乱您的代码,acts_as_restful_list 使管理列表变得简单。 您可以像更新其他任何内容一样更新 position 属性,其余的都...
该宝石提供: jQuery 1、2和3 jQuery UJS适配器assert_select_jquery在Ruby测试中测试jQuery响应版本号从v2.1开始,jquery-rails gem遵循以下版本指南,以从Gemfile中更好地控制应用程序的jQuery版本: patch ...
用 jQuery 替代Prototype/script.aculo.us 在Rails做 helpers 实现 javascript 的功能,jQuery library的优点: 快速简洁优雅. 也支持JQuery与Prototypea共存,方法如下: 1、将jquery.js放到prototype.js后面(这个...
Api-rails5_api_tutorial.zip,了解如何在michael hartl的rails 5教程上构建一个现代api立即在rails应用程序中构建一个api!(Rails 5版本),一个api可以被认为是多个软件设备之间通信的指导手册。例如,api可用于web...
semantic-ui-sass, 转换为Sass并准备放入 Rails &指南中的语义 UI 用于Sass的语义 UIsemantic-ui-sass 是一个sass的语义UI插件,可以将它的放到。Compass或者链轮中。 注释gem 只有默认主题。安装和使用gem '...
jasmine-jquery的Rails jasmine-jquery通过资产管道 安装 将此行添加到您的应用程序的Gemfile中: gem 'jasmine-jquery-rails' 然后执行: $ bundle 假设您使用的是茉莉花宝石,则在jasmine.yml中具有: src_...
ruby on rails 相关lib 其中包含:rspec flexmock acts_as_taggable-2.0.2 widgets acts_as_list classic_pagination