美文网首页
Formtastic

Formtastic

作者: ibob2012 | 来源:发表于2019-08-24 12:35 被阅读0次

1. 安装Gem包

gem 'formtastic'

$ rails g formtastic:install

在application.css中添加

*=require formtastic*=require my_formtastic_changes

2. 新建Model

classCreateUsers<ActiveRecord::Migrationdefchangecreate_table:usersdo|t|t.text:namet.string:desct.timestamps null:falseendendend

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.actionsdo%>

    <%= 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。

classCreateArticles<ActiveRecord::Migrationdefchangecreate_table:articlesdo|t|t.string:titlet.text:contentt.integer:user_idt.timestamps null:falseendendend

建立关联

classUser<ActiveRecord::Basehas_many:articlesaccepts_nested_attributes_for:articlesend

classArticle<ActiveRecord::Basebelongs_to:userend

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. 本地化

使用顺序

:label

Formtastic i18n

Activerecord i18n

label_str_method

10. 小知识

<%=semantic_form_for(@post,:namespace=>'cat_form')do|f|%><%f.object%><!--获取对象--><%end%>

相关文章

网友评论

      本文标题:Formtastic

      本文链接:https://www.haomeiwen.com/subject/ueofectx.html