自定义表单

有时候我们希望我们的表单拥有一致的显示风格，今天我们就看看用Rails怎样创建一个Helper来自定义表单。

1，实现自己的FormBuilder
在app/helpers/application_helper.rb里加入以下代码:
Java代码

 

 1. class TabularFormBuilder < ActionView::Helpers::FormBuilder  
 2.     (field_helpers - %w(check_box radio_button)).each do |selector|  
 3.       src = <<-END_SRC  
 4.         def #{selector}(field, options = {})  
 5.           @template.content_tag("tr",  
 6.             @template.content_tag("td", field.to_s.humanize + ":") +  
 7.               @template.content_tag("td", super))  
 8.         end  
 9.       END_SRC  
10.       class_eval src, FILE, LINE  
11.     end  
12. end  
13.   
14. def tabular_form_for(name, object = nil, options = nil, &proc)  
15.     concat("&lt;table&gt;", proc.binding)  
16.     form_for(name,  
17.              object,  
18.              (options||{}).merge(:builder => TabularFormBuilder),  
19.              &proc)  
20.     concat("&lt;/table&gt;", proc.binding)  
21. end

 

class TabularFormBuilder < ActionView::Helpers::FormBuilder
(field_helpers - %w(check_box radio_button)).each do |selector|
src = <<-END_SRC
def #{selector}(field, options = {})
@template.content_tag("tr",
@template.content_tag("td", field.to_s.humanize + ":") +
@template.content_tag("td", super))
end
END_SRC
class_eval src, FILE, LINE
end
end

def tabular_form_for(name, object = nil, options = nil, &proc)
concat("<table>", proc.binding)
form_for(name,
object,
(options||{}).merge(:builder => TabularFormBuilder),
&proc)
concat("</table>", proc.binding)
end

 

这里我们创建了tabular_form_for这个helper方法供页面使用，这里:builder => TabularFormBuilder用来生成一个table格式的表单。

 

2，在页面中使用自定义表单helper方法
Java代码

1. <% tabular_form_for :contact do |f| %>  
2.     <%= f.text_field :name %>  
3.     <%= f.text_field :email %>  
4.     <%= f.text_field :phone %>  
5. <% end %>

 

就这么简单！
让我们来给form table隔行加上背景色:
Java代码

 

 

 1. class TabularAlternatingColorFormBuilder < ActionView::Helpers::FormBuilder  
 2.   (field_helpers - %w(check_box radio_button)).each do |selector|  
 3.     src = <<-END_SRC  
 4.       def #{selector}(field, options = {})  
 5.         @template.content_tag("tr",  
 6.           @template.content_tag("td", field.to_s.humanize + ":") +  
 7.           @template.content_tag("td", super),  
 8.             :class => (@alt = (@alt ? false : true)) ? "alt-row" : ""  )  
 9.       end  
10.     END_SRC  
11.     class_eval src, FILE, LINE  
12.   end  
13. end  
14.   
15. def tabular_form_with_alternating_colors_for(name, object = nil, options = nil, &proc)  
16.     concat("&lt;table&gt;", proc.binding)  
17.     form_for(name,  
18.              object,  
19.              (options||{}).merge(:builder => TabularAlternatingColorFormBuilder),  
20.              &proc)  
21.     concat("&lt;/table&gt;", proc.binding)  
22. end

 

 

class TabularAlternatingColorFormBuilder < ActionView::Helpers::FormBuilder
(field_helpers - %w(check_box radio_button)).each do |selector|
src = <<-END_SRC
def #{selector}(field, options = {})
@template.content_tag("tr",
@template.content_tag("td", field.to_s.humanize + ":") +
@template.content_tag("td", super),
:class => (@alt = (@alt ? false : true)) ? "alt-row" : "" )
end
END_SRC
class_eval src, FILE, LINE
end
end

def tabular_form_with_alternating_colors_for(name, object = nil, options = nil, &proc)
concat("<table>", proc.binding)
form_for(name,
object,
(options||{}).merge(:builder => TabularAlternatingColorFormBuilder),
&proc)
concat("</table>", proc.binding)
end

修改default.css:
Java代码

1. .alt-row {  
2.   background: #fab444;  
3. }

 

.alt-row {
background: #fab444;
}

页面调用:
Java代码

 

1. <%= stylesheet_link_tag "default" %>  
2.   
3. <% tabular_form_with_alternating_colors_for :contact do |f| %>  
4.     <%= f.text_field :name %>  
5.     <%= f.text_field :email %>  
6.     <%= f.text_field :phone %>  
7. <% end %>