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

글쓴이: 최효성

외과전문의,웹프로그래밍,컴퓨터 일러스트레이션 / Surgeon, Medical Illustration, Web Programmer

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중