`
doabit
  • 浏览: 52952 次
  • 性别: Icon_minigender_1
  • 来自: 江苏
社区版块
存档分类
最新评论

rails3 +jquery-ui+acts_as_list实现可拖曳排序

阅读更多
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..
2
0
分享到:
评论
2 楼 doabit 2010-08-27  
夜鸣猪 写道
也发现了,一写东西就能被趴走,怎么做到的

爬虫吧,JE应该土牛他的IP。。现在写什么都打个标记。。
1 楼 夜鸣猪 2010-08-26  
也发现了,一写东西就能被趴走,怎么做到的

相关推荐

    jquery-ui+jquery-ui-rails

    《jQuery UI与jQuery UI Rails整合应用详解》 在Web开发领域,jQuery UI和Rails框架的结合使用能够构建出功能丰富、交互性强的用户界面。本文将深入探讨如何将这两个强大的工具集结合,以提升Web应用的用户体验。 ...

    jquery-ui-rails:Rails资产管道的jQuery UI

    jquery-ui-rails 这个gem为Rails打包了jQuery UI资产(JavaScript,样式表和图像),因此您不必再通过下载自定义软件包。 请参阅以查看哪些版本的jquery-ui-rails捆绑了哪些版本的jQuery UI。 警告:此gem与3.0.0...

    rails_admin_acts_as_list:rails_admin插件以对记录进行排序

    介绍插件,用于对记录进行排序(使用 gem)安装要启用rails_admin_acts_as_list,请将以下内容添加到您的Gemfile : gem 'rails_admin_acts_as_list'gem 'rails_admin' 重要提示: rails_admin_acts_as_list之前必须...

    CRA+RailsAPI+设计登录+ActiveAdmin样板_Ruby_JavaScript_下.zip

    标题 "CRA+RailsAPI+设计登录+ActiveAdmin样板_Ruby_JavaScript_下" 提供了关于项目的核心技术栈,其中包括Create React App (CRA)、Ruby on Rails API 和 ActiveAdmin,以及登录功能的设计。这是一份使用前端React...

    acts_as_authenticated

    "acts_as_authenticated" 是一个经典的Ruby on Rails插件,它为Rails应用提供了用户认证功能。在Rails框架中,用户认证通常涉及验证用户身份、管理会话以及处理登录和登出等操作。acts_as_authenticated插件简化了这...

    jquery-fileupload-rails, 用于 Rails的jQuery文件上传集成.zip

    jquery-fileupload-rails, 用于 Rails的jQuery文件上传集成 Rails 文件上传jQuery-File-Plugin 是一个文件上传插件,由的Tschan 。 jQuery文件上传功能多文件选择。drag&拖放支持。进度栏和jQuery预览图像。 支持...

    Rails3+GithubOAuth2+设计示例应用程序_Ruby_JavaScript_下.zip

    标题 "Rails3+GithubOAuth2+设计示例应用程序" 提供了我们正在处理一个使用Rails 3框架构建的Web应用程序,该应用集成了Github的OAuth2授权机制。Rails是Ruby on Rails的简称,是一个流行的开源Web开发框架,以其DRY...

    ruby2.0.0+selenium-webdriver+watir-webdriver+rails离线备份

    ruby2.0.0+selenium-webdriver+watir-webdriver+rails离线备份,设置环境变量后可使用(未测试)

    用acts_as_rateable实现简单的打分功能

    在Ruby on Rails框架中,`acts_as_rateable`是一个非常实用的插件,它允许用户对模型进行评分,从而实现简单的打分功能。这个插件是Rails社区中的一个开源项目,旨在简化应用中的评分系统集成。在本篇讨论中,我们将...

    jquery-datatables-rails, 用于 Rails的jquery数据表 gem.zip

    jquery-datatables-rails, 用于 Rails的jquery数据表 gem jquery-datatables-rails 这个 gem 为 jQuery DataTables插件提供了方便,以便与 Rails 资产pipleine结合使用。 它提供所有基本的datatable文件,以及一些...

    Api-acts_as_api.zip

    Api-acts_as_api.zip,使在rails中创建api响应变得简单和有趣,一个api可以被认为是多个软件设备之间通信的指导手册。例如,api可用于web应用程序之间的数据库通信。通过提取实现并将数据放弃到对象中,api简化了编程...

    jquery-rails, 一个 gem,用于自动使用jQuery和 Rails 3.zip

    jquery-rails, 一个 gem,用于自动使用jQuery和 Rails 3 railsjQuery 面向 Rails 如此伟大。这里 gem 提供:jQuery 1.7.2jQuery UI 1.8.18 ( 仅适用于 javascript )jQuery UJS适配器assert_select_j

    acts_as_paranoid

    "acts_as_paranoid" 是一个在Ruby on Rails框架中常用的gem,用于处理数据库记录的软删除(soft delete)。在数据库操作中,通常我们会遇到删除数据的需求,但直接删除可能会导致数据丢失,尤其是在生产环境中。...

    rails-master_TheWeb_rubyrails_

    Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

    jQuery-File-Upload

    **jQuery-File-Upload** 是一个非常流行的前端文件上传插件,它基于JavaScript库jQuery,专为实现现代浏览器上的多文件上传功能而设计。这个插件不仅提供了用户友好的界面,还支持各种高级特性,如进度条显示、批量...

    acts_as_category:想想acts_as_tree +权限

    #ActsAsCategory acts_as_category (Version 2.0 beta)acts_as_category,是acts_as插件在acts_as_tree风格的Ruby on Rails的ActiveRecord的模式,但有一些额外的功能,以及多种便捷视图助手。例子(有关实例方法和...

    acts_as_nested_set的增强版BetterNestedSet

    - 配置:在模型中添加`acts_as_better_nested_set`,并可自定义字段,如`left_column_name: :lft, right_column_name: :rgt`。 - 常用操作: - 插入节点:`node.insert_at(position)`,其中position可以是其他...

    Rails3 使用Jquery datepicker

    在Ruby on Rails(简称Rails)框架中,jQuery UI是一个常用库,其中的datepicker组件用于处理日期选择。这篇博客“Rails3 使用Jquery datepicker”将会介绍如何在Rails 3项目中集成并使用这个功能强大的日期选择器。...

    acts_as_restful_list:就像acts_as_list一样,但很安静

    acts_as_restful_list 就像acts_as_list 一样,但不必使用非标准方法调用(如insert_at)来弄乱您的代码,acts_as_restful_list 使管理列表变得简单。 您可以像更新其他任何内容一样更新 position 属性,其余的都...

    jquery-rails:一个可将jQuery与Rails结合使用以实现自动化的宝石

    该宝石提供: jQuery 1、2和3 jQuery UJS适配器assert_select_jquery在Ruby测试中测试jQuery响应版本号从v2.1开始,jquery-rails gem遵循以下版本指南,以从Gemfile中更好地控制应用程序的jQuery版本: patch ...

Global site tag (gtag.js) - Google Analytics