Formtastic

1. 安装Gem包

gem 'formtastic'
$ rails g formtastic:install

在application.css中添加

*= require formtastic 
*= require my_formtastic_changes

2. 新建Model

class CreateUsers < ActiveRecord::Migration
  def change
    create_table :users do |t|
      t.text :name
      t.string :desc

      t.timestamps null: false
    end
  end
end

3. 使用

<%= semantic_form_for @user do |f| %>
  <%= f.inputs :name, :desc, :created_at %>
  <%= f.actions :submit, :cancel %>
<% end %>

自动识别类型(时间如下)


shijian.png

4. 更常用

<%= semantic_form_for @user do |f| %>
  <%= f.inputs '基本信息', :id=>'basic_info' do %>
    <%= f.input :name, :as => :string %>
    <%= f.input :desc %>
    <%= f.input :created_at %>
  <% end %>
  <%= f.actions do %>
    <%= f.action :submit, :as => :button %>
    <%= f.action :cancel, :as => :link %>
  <% end %>
<% end %>
<%= f.inputs :name => '基本信息', :id=>'basic_info' do %> 修改id
<%= f.input :name, :label=>'姓名' ,:as => :string %>       更改label

inputs可以设置一些常用的参数

  • :name 设置标签
  • :id 设置html的id

input可以设置一些常用的参数

  • :as ->(:radio, :string, :select, :check_boxes, :boolean, :datalist)
  • :label 设置字符串
  • :hint 设置字符串
  • :required (false true)
  • :input_html 设置Hash =>{:size=>10, :class=>'autogrow'}
  • :wrapper_html 设置Hash=> { :style => "display:none;" },给input一 个<li>标签包围。

action可以设置属性

  • :button_html 设置Hash

5. 对象嵌套

新建一个Modal,Article。

class CreateArticles < ActiveRecord::Migration
  def change
    create_table :articles do |t|
      t.string :title
      t.text :content
      t.integer :user_id
      t.timestamps null: false
    end
  end
end

建立关联

class User < ActiveRecord::Base
  has_many :articles
  accepts_nested_attributes_for :articles
end
class Article < ActiveRecord::Base
  belongs_to :user
end

view中显示

<%= semantic_form_for @user do |f| %>
  <%= f.inputs :name => '基本信息', :id=>'basic_info' do %>
    <%= f.input :name, :label=>'姓名' ,:as => :string %>
    <%= f.input :desc, :as => :string %>
    <%= f.input :created_at %>
  <% end %>
###############嵌套属性##########################
  <%= f.semantic_fields_for :articles do |article| %>
    <%= article.inputs :title %>
    <%= article.inputs :content %>
    <!-- <%= article.inputs :title, :content, :name=>'文章' %>-->
  <% end %>
###############嵌套属性##########################
  <%= f.actions do %>
    <%= f.action :submit, :as => :button %>
    <%= f.action :cancel, :as => :link %>
  <% end %>
<% end %>

6. 设置命名空间控制id

<%= semantic_form_for(@post, :namespace => 'cat_form') do |f| %>
 <%= f.inputs do %>
   <%= f.input :title %> # id="cat_form_post_title"
   <%= f.input :body %> # id="cat_form_post_body"
   <%= f.input :created_at %> # id="cat_form_post_created_at"
 <% end %>
 <%= f.actions %>
 <% end %>

7. 其他嵌套

<%= f.input :articles, :as => :radio, :collection => @user.articles.all %>

8. 其他input

  • :select
  • :check_boxes
  • :radio
  • :time_zone
  • :password
  • :text
  • :date_select
  • :datetime_select
  • :time_select
  • :boolean
  • :string
  • :number
  • :file
  • :country
  • :email
  • :url
  • :phone
  • :search
  • :hidden
  • :range
  • :datalist
  • :image_upload

9. 本地化

使用顺序

  1. :label
  2. Formtastic i18n
  3. Activerecord i18n
  4. label_str_method

10. 小知识

<%= semantic_form_for(@post, :namespace => 'cat_form') do |f| %>
  <% f.object %> <!-- 获取对象 -->
<% end %>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,001评论 19 139
  • 1.从载入EasyUI开始 读者需要到EasyUI官网中下载包含原文件和demo的压缩包,并解压到之前编写的代码目...
    老皮丘阅读 1,809评论 0 6
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,779评论 18 399
  • 有茶,有阳光,有你们。健康欢乐的一天
    手砭姑苏毛毛阅读 252评论 0 0
  • 没有谈过恋爱,只在青春时与一个男生暧昧,以为互相喜欢,于是懵懂的年纪大胆回报的是误会,从此不再主动。 不知道是不是...
    微笑渐暖阅读 183评论 0 2