每天一剂Rails良药之In-Place Form Editing

看看蛙眼的博客分类管理，有点In Place Editing的意思，是否让用户感觉更方便呢？
Rails有许多很小的好处，让人欲罢不能。
今天来看看Rails使用script.aculo.us让In Place Editing更简单，让你的应用更加Web2.0

1，新建Rails项目，配好数据库设置

rails test

2，添加contacts表

ruby script/generate migration AddContactsTable

然后修改001_add_contacts_table.rb:

class AddContactsTable < ActiveRecord::Migration
  def self.up
    create_table :contacts do |t|
      t.column :name, :string
      t.column :email, :string
      t.column :phone, :string
      t.column :address_line1, :string
      t.column :address_line2, :string
      t.column :city, :string
      t.column :state, :string
      t.column :country, :string
      t.column :postal_code, :string
    end
  end

  def self.down
    drop_table :contacts
  end
end

然后运行rake:

rake db:migrate

3，生成Contact的scaffold

ruby script/generate scaffold Contact

4，添加默认的javascript库
修改app/views/layouts/contacts.rhtml，添加以下代码:

<%= javascript_include_tag :defaults %>

5，添加In Place Editing效果
修改app/views/contacts/show.rhtml

<% for column in Contact.content_columns %>
<p>
  <b><%= column.human_name %>:</b>
  <%= in_place_editor_field :contact, column.name %>
</p>
<% end %>

<%= link_to 'Back', :action => 'list' %>

注意<%= in_place_editor_field :contact, column.name %>这行代码就可以添加In Place
Editing效果，添加一个Contact并查看Show页面，实际上生成一段Javascript代码:

new Ajax.InPlaceEditor(....)

这里是对Contact所有的字段作In Place Editing，我们也可以只指定某一个字段，如:

<%= in_place_editor_field :contact, :name %>

但是现在还不能编辑字段，因为ContactsController没有相应的set_contact_attr()方法
还好Rails有相应的Convention来节省代码，在ContactsController里添加以下代码:

Contact.content_columns.each do |column|
  in_place_edit_for :contact, column.name
end

这样自动为每个字段生成set_contact_attr()方法了，现在访问页面看看效果吧！

6，更改InPlaceEditor的输入框的样式
参考Rails Framework Documentation的方法API即可
例如这里我们可以让输入框改为5行15列的textarea:

<% for column in Contact.content_columns %>
<p>
  <b><%= column.human_name %>:</b>
  <%= in_place_editor_field :contact, column.name, {}, {:rows => 5, :cols => 15} %>
</p>
<% end %>

<%= link_to 'Back', :action => 'list' %>

或者我们直接更改CSS做更细节上的修改:

.inplaceeditor-form input[type="text"] {
  width: 260px;
}

评论

5 楼 jshmemory 2009-02-11  

请教一下，column.human_name 的用法是什么啊？？

4 楼 hideto 2008-07-25  

Rails 2.x版本后需要单独安装In Place Editing插件
[url]http://svn.rubyonrails.org/rails//plugins/in_place_editing/ [/url]

3 楼 luodongju325 2008-07-25  

我试了出错:undefined method `出错:undefined method `in_place_edit_for' 是怎么回事?in_place_edit_for' 是怎么回事?

2 楼 shanghaichris 2008-04-03  

为什么我提交表单的时候，被修改的地方就变成了saving...然后刷新，什么都没有被改变？

1 楼 smokingcat 2008-03-20  

但是如果被编辑的字段不是string 或者integer 的话，会出现错误。　undefined method 'size' for XX.XX:float
好像是生成的action method 调用了size函数
而且，此时数据库的数据已经被修改了。