Bootstrap과 Simple_form 젬을 이용한 라디오버튼과 체크박스 레시피 (3)

2015-05-19_17-04-47

이번에는 category 항목을 다중 선택이 가능하도록 해 보자. 이를 위해서 우선 3개의 boolean 속성을 추가하자.

$ rails g migration add_fields_to_posts life_option:boolean study_option:boolean computer_option:boolean 

그리고 생성된 마이그레이션 파일을 아래와 같이 수정하자.

class AddFieldsToPosts < ActiveRecord::Migration 
  def change 
    add_column :posts, :life_option, :boolean, default: false 
    add_column :posts, :study_option, :boolean, default: false 
    add_column :posts, :computer_option, :boolean, default: false 
  end 
end 

(각 필드의 디본값으로 false를 지정하였다.)

이것을 데이터베이스에 최종 반영하기 위해서 커맨드라인에서 rake db:migrate 명령을 실행하자. 다음은 app/views/posts/_form.html.erb 파일을 아래와 같이 수정한다.

<%= simple_form_for(@post) do |f| %> 
  <%= f.error_notification %> 
  <div class="form-inputs"> 
    <%= f.input :category, as: :radio_buttons, item_wrapper_class: :with_label, collection: [['없음',''],['life','0'],['study','1'],['computer','2']], collection_wrapper_tag: :div, collection_wrapper_class: 'radio-group' %> 
    <%= f.input :category, collection: [['life','0'],['study','1'],['computer','2']], prompt: '없음' %> 
    <div class='row'> 
      <div class='col-md-12'> 
        <%= f.label :category %> 
        <div class="multi-select"> 
          <%= f.input :life_option %> 
          <%= f.input :study_option %> 
          <%= f.input :computer_option %> 
        </div> 
      </div> 
    </div> 
    <%= f.input :title %> 
    <%= f.input :content, input_html: { rows: 10 } %> 
    <%= f.input :published, as: :radio_buttons, collection_wrapper_tag: :div, collection_wrapper_class: 'radio-group' %> 
  </div> 
  <div class="form-actions"> 
    <%= f.button :submit %> 
  </div> 
<% end %>

그리고 임의의 스타일시트 파일에 multi-select 라는 클래스를 아래와 같이 정의하자.

.multi-select { 
  border: 1px solid #cccccc !important; 
  border-radius:5px; 
  padding: .5em 1em; 
  background-color: #ffffff; 
  margin-bottom:1.5em; 
  .form-group { 
    display: inline;
  } 
  input { 
    margin-top:4px;
  } 
  .checkbox { 
    display: inline !important;   
    margin-right: 1em; 
  } 
} 

이제 브라우저에서 http://localhost:3000/posts/new 로 연결하면 우리가 의도했던 바와 동일한 입력 폼을 볼 수 있게 될 것이다.

자, 지금까지 bootstrap-sasssimple_form 젬을 이용하여 라디오버튼 그룹과 체크박스 그룹을 표시하는 방법에 대해서 3개의 글을 통해서 알아 보았다.

실제로 이와 같이 보이도록 하기 위해서 필자는 많은 시행착오를 겪어야 했다. 다른 개발자들은 이미지 알고 있는 내용일 수도 있지만, 어렵게 터득한 내용은 함께 공유할 때 기쁨이 배가되는 것을 잊지 말아야 할 것이다.


소스코드 : 

https://github.com/hschoidr/radiobutton_and_checkboxes

댓글 남기기

This site uses Akismet to reduce spam. Learn how your comment data is processed.