每天一剂Rails良药之Creating a Drag-and-Drop Sortable List
今天来看看用Rails创建一个可拖拽的List。
1，创建Rails项目，搭建数据库
这里一个Person对应多个GroceryList，一个GroceryList对应多个FoodItem
我们可以运行 ruby script/console或者直接访问数据库来初始化几条数据
这里我们创建一个Person，一个GroceryList和3个FoodItem，并保持外键关联
2，引入javascript
可以通过用一个layout文件来做这件事，如app/views/layouts/standard.rhtml:
3，创建一个列表controller
如app/controllers/grocery_list_controller.rb:
4，创建列表视图
如app/views/grocery_list/show.rhtml:
5，访问看看效果
打开浏览器访问 http://localhost:3000/grocery_list/show/1看看
我们拖拽一条数据在列表中的位置，然后刷新页面，发现该条数据的位置在数据库中保存了
6，原理
我们的FoodItem类有一个position列，并且声明为acts_as_list，并且GroceryList按照position来排序，我们的sortable_element()这个helper方法为我们生成一段为Sortable.create(...)的JavaScript代码为我们做Ajax调用，访问sort方法，而sort方法则在数据库中保存列表经拖拽后的新的position。
1，创建Rails项目，搭建数据库
Migration:
class AddPersonAndGroceryListsAndFoodItemsTables < ActiveRecord::Migration
def self.up
create_table :people do |t|
t.column :name, :string
end
create_table :grocery_lists do |t|
t.column :name, :string
t.column :person_id, :integer
end
create_table :food_items do |t|
t.column :grocery_list_id, :integer
t.column :position, :integer
t.column :name, :string
t.column :quantity, :integer
end
end
def self.down
drop_table :people
drop_table :grocery_lists
drop_table :food_items
end
end
Model:
class Person < ActiveRecord::Base
has_many :grocery_lists
end
class GroceryList < ActiveRecord::Base
has_many :food_items, :order => :position
belongs_to :person
end
class FoodItem < ActiveRecord::Base
belongs_to :grocery_list
acts_as_list :scope => :grocery_list
end
这里一个Person对应多个GroceryList，一个GroceryList对应多个FoodItem
我们可以运行 ruby script/console或者直接访问数据库来初始化几条数据
这里我们创建一个Person，一个GroceryList和3个FoodItem，并保持外键关联
2，引入javascript
可以通过用一个layout文件来做这件事，如app/views/layouts/standard.rhtml:
<html>
<head>
<%= javascript_include_tag :defaults %>
</head>
<body>
<%= yield %>
</body>
</html>
3，创建一个列表controller
如app/controllers/grocery_list_controller.rb:
class GroceryListController < ApplicationController
layout 'standard'
def show
@grocery_list = GroceryList.find(params[:id])
end
def sort
@grocery_list = GroceryList.find(params[:id])
@grocery_list.food_items.each do |food_item|
food_item.position = params['grocery-list'].index(food_item.id.to_s) + 1
print food_item.position
food_item.save
end
render :noting => true
end
end
4，创建列表视图
如app/views/grocery_list/show.rhtml:
<h2><%= @grocery_list.person.name %>'s Grocery List</h2>
<h3><%= @grocery_list.name %></h3>
<ul id="grocery-list">
<% @grocery_list.food_items.each do |food_item| %>
<li id="item_<%= food_item.id %>">
<%= food_item.quantity %> units of <%= food_item.name %>
</li>
<% end %>
</ul>
<%= sortable_element 'grocery-list',
:url => { :action => "sort", :id => @grocery_list },
:complete => visual_effect(:highlight, 'grocery-list')
%>
5，访问看看效果
打开浏览器访问 http://localhost:3000/grocery_list/show/1看看
我们拖拽一条数据在列表中的位置，然后刷新页面，发现该条数据的位置在数据库中保存了
6，原理
我们的FoodItem类有一个position列，并且声明为acts_as_list，并且GroceryList按照position来排序，我们的sortable_element()这个helper方法为我们生成一段为Sortable.create(...)的JavaScript代码为我们做Ajax调用，访问sort方法，而sort方法则在数据库中保存列表经拖拽后的新的position。