Rails-Treasure chest2 嵌套表单;

  • 嵌套表单1-1
  • 嵌套表单1-多
  • 选日期时间的UI (一个jquery Plugin)
  • 拆除前后台css和js
  • Rich Editor, 显示输入的HTML tag
  • 批次编辑/删除

嵌套表单1-1

核心知识点:ActiveRecord Nested Attributes

嵌套属性的功能可以让你在关联的记录上保存属性,通过父记录。默认这个功能是关闭的。

使用类方法 #accepts_nested_attributes_for( :小写类名 ), 开启这个功能后,会增加一个属性存入方法,

如  profiles_attributes=(attributes)

⚠️::autosave被添加到关联上,当user更新, profile也自动更新。

实例方法:

:allow_destroy, 如果是true,任何删除record的行为,attributes_hash中会带一个_destroy key和a value("1"或true),对应的id的记录会被删除。

情景:

给User一个Profile,用于储存用户个人资料,1对1的关系。

model这样设计的原因是为了节省数据库的查询量。

单独的resource编辑UI

  1. 编辑一个嵌套的路由
    •    resources :users do
      resource :profile, :controller => "user_profiles"
      end
  2. 单独的连接,单独的edit表单, 单独的controller

使用accepts_nested_attributes_for方法编辑嵌套表单

  1. 在User.rb上加上accepts_nested_attributes_for :profile
  2. 在users_controller.rb上,把profile_attributes加入参数白名单。
    • :profile_attributes => [:id, ...]
  3. 在users_controller.rb上,edit方法上如果@user的profile不存在则创建一个(用关联方法)
    • @profile = @user.profile || @user.create_profile
  4. 在views/users/edit.html.erb上,塞入更新profile的表格。
  • f.field_for :profile do |ff|

方法:field_for(record_name, record_object=nil, field_options = {} , &block)

创建一个类似form_for的和指定model对象相关的scope,但不会创建form标签。

用于在一个form表格内添加额外的model对象。

和form_for类似,会生成FormBuilder对象(关联着model对象)

但参数有2个record_name和record_object用于不同的功能:

  1. record_name:  用于fields。提交的values出现在params hash中的样子。最终提交给controller。
  2. record_object(可选):what default values are shown when the form the fields appear in is first displayed。(没弄明白,但不重要,忽略)

嵌套表单(1-to-many)

def new
  @event = Event.new
  @event.tickets.build

end

在new方法中,每多加一行@event.tickets.build。在生成的表格中就多一个ticket输入框。

admin/events/_form.html.erb

<%= f.fields_for :tickets do |ff| %>
  <div class="form-group">
    <%= ff.label :name %>
    <%= ff.text_field :name, :class => "form-control"%>
  </div>
<% end %>

def edit
  if @event.tickets.empty?
    @event.tickets.build
  end
end

如果没有tickes则编辑时,增加一个ticket的输入框。

如果想要在编辑页面,新增功能:

  1. 增加一个“新增票”的按钮。点击后新增ticket输入框,新增一个ticket
  2. 在每个ticket输入框下面,增加一个“删除这个票据”的按钮。点击后删除这个ticket

需要使用javascript来实现相关功能。使用jQuery插件nested_form_fields gem

单独的rescources UI编辑

如果 has_many 的资料非常多、字段又多的话,就不适合用嵌套(Nested)表单 UI。


选日期时间的 UI

<%= f.date_select :birthday, :class => "form-control" %>

这是Rails内建的,有点丑,但所有浏览器都能用。

有:start_year, :end_year,等N多个选项



拆除前后台css和js

默认的 layout 是 app/views/layouts/application.html.erb

而后台的 controller 透过 layout "admin" 可以改用 :

app/views/layouts/admin.html.erb

但是有个部分我们没有拆开,那就是 css 和 javascript, 到目前还是共享:

app/assets/stylesheets/application.scss 和 app/assets/javascript/application.js

随着 Plugins 功能越装越多,有很多 css/js 前后台是不一样的,前台目前没有用到,但是因为前后台共享的关系,还是被用户下载了。

这部分的 css/js 也可以前后台拆开,除了可以让前台下载更有效率,也可以让代码分开管理。

方法:

1.

新增 app/assets/stylesheets/admin.scss

新增 app/assets/javascripts/admin.js

2. 修改 config/initializers/assets.rb

config/initializers/assets.rb

- # Rails.application.config.assets.precompile += %w( search.js )

+ Rails.application.config.assets.precompile += %w( admin.css admin.js )

3. 重启服务器后,更改admin.html.erb文件的<head> 为:

 <%= stylesheet_link_tag    'admin', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'admin', 'data-turbolinks-track': 'reload' %>

4. 挪动插件即可。



Rich Editor, 显示输入的HTML tag

simple_format方法的作用是换行,包裹一个<p>

去掉simple_format,  HTML 会完全被脱逸(escaped)了,例如 < 会变成 &lt;。这是 Rails 默认的安全机制。

如果使用 raw 或者 html_safe的话,如果是管理员后台操作倒没有问题,但前台用户使用的话容易被xss跨脚本攻击。

最好使用

sanitize 方法,白名单过滤sanitize(html, options = {})

可以设置白名单,单一定要全面:

tags: ["table", "tr", "td"]

attributes: ["border"]

或者在config/application.rb中设置

config.action_view.sanitized_allowed_tags = Rails::Html::WhiteListSanitizer.allowed_tags + %w(table tr td)
config.action_view.sanitized_allowed_attributes = Rails::Html::WhiteListSanitizer.allowed_attributes + %w(style border)

Rich Edit  ckeditor

编辑器:https://github.com/galetahub/ckeditor (Rails 5.1x, integration)

不是很流行的编辑器。

安装:

gem 'ckeditor', github: 'galetahub/ckeditor'

初始化:config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( ckeditor/*)

使用:

从gem上加载editor: app/assets/javascripts/application.js:

//= require ckeditor/init

⚠️在//= require_tree.前面。

FormHelpers:

= form_for @page do |form|
= form.cktext_area :notes, ckeditor: { language: 'uk'}
= form.cktext_area :content, value: 'Default value', id: 'sometext'
= cktext_area :page, :info, cols: 40, ckeditor: { uiColor: '#AADC6E', toolbar: 'mini' }

toolbar可以客制化。具体其他的设置见git。



批量删除

  1. 设置routes。使用collection { post :bulk_update}
  • 如果routes使用delete。则对应的form_tag必须明确指定method: :delete。
  • 如果要用同一个
  • 在index.html.erb上, 给table增加form_tag(),  check_box_tag(),和subimt_tag()。
  • 增加<script> javascript。
  • 修改controller, 增加bulk_update方法,使用Array[params[:ids]]循环遍历event,并删除。
  • 重点:

    第2步:请求参数的设置

    <th><%= check_box_tag("全选", "1", false, id:"toggle_all" )%></th>

    <td><%= check_box_tag("ids[]", event.id, false)%></td>

    ⚠️:

    必须使用"ids[]",这样可以得到属性name="ids[]"

    提交的时候,生成参数: "全选"=>"1", "ids"=>["22", "24",...] ,参数是由name/value对儿组成的。

    因为如果name是'ids' ,这是一个string,提交生成的参数只会取完全相同的名字的第一个value,生成 "ids"=>"26",  造成批量删除功能失败。

    第三步:用到增加和移除属性的method: setAttribute(), removeAttribute(),

    也使用了querySelectorAll()获得一个数组的checkbox tag,然后循环forEach()

    document.getElementById("toggle_all").addEventListener("click", function(){
     if (this.hasAttribute("checked") == false ) {
      this.setAttribute("checked", "checked");
        document.querySelectorAll("input[name='ids[]']").forEach(function(e){
        e.setAttribute("checked", "checked");
      })
     } else {
      this.removeAttribute("checked");
        document.querySelectorAll("input[name='ids[]']").forEach(function(e){
       e.removeAttribute("checked");
     })

    })})


    批次修改:

    一个form的url是固定的,也只能绑定一个action, ,同时form不能嵌套,如果想要多个批量功能,怎么办?

    上节使用form_tag(bulk_update_admin_events_path),因此地址指向确定。HTML方法是post。

    办法:

    提交按钮<input type="submit" name="commit", value="XXX">的name/value属性对儿,在request params中会出现,如"commit"=>"批次删除"。

    因此不同按钮使用不同的name,即可区别不同的功能要求,然后在controller的action中使用if进行判断。

    def bulk_update
     total = 0
     if params[:commit] == I18n.t(:bulk_update) && params[:ids]
      Array(params[:ids]).each do |event_id|
       event = Event.find(event_id)
       event.status = params[:status]
       event.save
       total += 1
      end
      flash[:notice] = "批量变更状态为#{params[:status]}"
     elsif params[:commit] == I18n.t(:bulk_delete) && params[:ids]
      Array(params[:ids]).each do |event_id|
       event = Event.find(event_id)
       event.destroy
       total += 1
      end
      flash[:alert] = "成功删除#{total}笔"
     end

    redirect_to admin_events_path
    end

    ⚠️: I18n.t(:bulk_delete)加上的话,需要在en.yml和zn-CH.yml上加上对应的翻译。

    上一篇:android获取Context


    下一篇:在Ubuntu13.04中配置Jexus+Mono3.2运行Asp.Net Mvc 4站点 (二)