看了几遍官方的 guide,还是有点没看懂,严重怀疑自己的智商。
给你几个例子吧。
simple_form.rb
config.wrappers :etable, :tag => "tr", :error_class => "error" do |b|
b.use :tag => "th" do |td|
td.use :label
end
b.use :tag => "td" do |td|
td.use :input
td.use :error
td.use :hint
end
end
products/edit.haml
= simple_form_for @product, :wrapper => :etable do |f|
%table.table.table-bordered.table-condensed.etable
= f.input :name
= f.input :price
= f.input :unit
= f.input :effective_date, :as => :datepicker
= f.input :expiration_date, :as => :string, :input_html => {:"data-datepicker" => "datepicker"}
产生的 html
<form accept-charset="UTF-8" action="/products/1" class="simple_form edit_product" id="edit_product_1" method="post" novalidate="novalidate">
<table class="table table-bordered table-condensed etable">
<tbody>
<tr class="string optional">
<th><label class="string optional" for="product_name"> Name</label></th>
<td><input class="string optional" id="product_name" name="product[name]" size="50" type="text" value="hahah"></td>
</tr>
<tr class="decimal optional">
<th><label class="decimal optional" for="product_price"> Price</label></th>
<td><input class="numeric decimal optional" id="product_price" name="product[price]" type="text" value="10.0"></td>
</tr>
<tr class="string optional">
<th><label class="string optional" for="product_unit"> Unit</label></th>
<td><input class="string optional" id="product_unit" name="product[unit]" size="50" type="text" value="元/小时"></td>
</tr>
<tr class="datepicker optional">
<th><label class="datepicker optional" for="product_effective_date"> Effective date</label></th>
<td><input class="string datepicker optional" data-datepicker="datepicker" id="product_effective_date" name="product[effective_date]" size="50" type="text" value="2012-02-11" style="display: none; "><input type="text" value="2012-02-11" style="margin-right: 10px; " id="dp1335147092623" class="hasDatepicker"><img class="ui-datepicker-trigger" src="/assets/calendar.png" alt="..." title="..."></td>
</tr>
<tr class="string optional">
<th><label class="string optional" for="product_expiration_date"> Expiration date</label></th>
<td><input class="string optional" data-datepicker="datepicker" id="product_expiration_date" name="product[expiration_date]" size="50" type="text" value="2012-02-25" style="display: none; "><input type="text" value="2012-02-25" style="margin-right: 10px; " id="dp1335147092624" class="hasDatepicker"><img class="ui-datepicker-trigger" src="/assets/calendar.png" alt="..." title="..."></td>
</tr>
</tbody></table>
</form>
html 排版不是很好 见谅
:label :input :error :hint 是 simple_form 的关键字,分别代表 输入框文字,输入框,错误信息提示,输入提示 wrapper 是代表一套 form 的结构和样式, :etable 就是 wrapper 的名字 f.use :tag => "th" 是你自己想怎么组织你的 form 就怎么写。 这里我想用表格 所以就写了 th, td