為Ruby on Rails程序加入拖曳排序功能

要為Ruby on Rails程序加入拖曳排序功能~我們可以使用sortable_element helper function~
它可近呼自動地為程式加入拖曳排序功能
這個程式中會用到acts_as_list插件,請先行安裝~ 我們現在先用scaffold建立基本CRUD功能~
ruby generate scaffold task title:string position:integer
現在我們修改Task Model如下
class Task < ActiveRecord::Base
acts_as_list
end
這樣便可以將其變成有序列表~
然後我們把Tasks Controller的index Action修改如下
def index
@tasks = Task.find(:all, :order => :position)

respond_to do |format|
format.html # index.html.erb
format.xml { render :xml => @tasks }
end
end
這樣顯示時便會依照List的順序~
現在在layout中的tasks.html.erb的head中加入一行
<%= javascript_include_tag :defaults %>
然後修改index View~
<h1>Listing tasks</h1>

<ul id='tasks'>

<% for task in @tasks %>
<li id='task_<%= task.id %>'>
<%=h task.title %>
<%= link_to 'Edit', edit_task_path(task) %>
<%= link_to 'Destroy', task, :confirm => 'Are you sure?', :method => :delete %>
</li>
<% end %>
</ul>

<br />

<%= link_to 'New task', new_task_path %>
<%= sortable_element 'tasks', :url => {:action => :sort} %>
現在便啟用了拖曳的功能了~不過拖曳後重新整理~位置並沒有更新~
那是因為我們還沒有增加sort Action~
現在到Tasks Controller中加入sort Action
def sort
params[:tasks].each_with_index do |id, position|
Task.update(id, :position => position + 1)
end
render :nothing => true
end
這樣~在重新整理之後~位置也是新的位置了
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值