Rails 谁来讲一下 simple_form 的 wrapper 的使用?

hhuai · 2012年04月23日 · 最后由 yakjuly 回复于 2012年04月24日 · 7216 次阅读

看了几遍官方的 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 排版不是很好 见谅

#1 楼 @yakjuly 谢谢。 你在 wrapper 中定义的 td 啊 th,是怎么个匹配关系? 比如 Name 字段,是找到 label,就给他 wrapper 一个 th,找到 input 就给他 wrapper 一个 td 吗?

那这里写三个又是啥意思 td.use :input td.use :error td.use :hint

:label :input :error :hint 是 simple_form 的关键字,分别代表 输入框文字,输入框,错误信息提示,输入提示 wrapper 是代表一套 form 的结构和样式, :etable 就是 wrapper 的名字 f.use :tag => "th" 是你自己想怎么组织你的 form 就怎么写。 这里我想用表格 所以就写了 th, td

#3 楼 @yakjuly 只有:label :input :error :hint 吗?比如我下面这个,我怎么也 wrapper 不成功啊。

<%= f.button :submit  :wrapper=>:submit %>

这句代码生成也是 input 的,我的写法是这样

config.wrappers :submit, :tag => 'div', :class => 'form-actions' do |b|
    b.use :input
  end

#3 楼 @yakjuly

基本明白了,谢了哥们。 我上面的写法不成的原因是 f.button,并没有 wrapper 这个参数。

@hhuai 嗯 昨天没回复成功 貌似只有 simple_form_for 和 f.input 才接受 wrapper 参数

需要 登录 后方可回复, 如果你还没有账号请 注册新账号