enum을 사용한 선택 상자 구현

선택 상자의 항목이 늘어날 때마다 코드를 수정해야 합니다.
enum을 사용하여 확장 가능한 선택 상자를 만들고 싶습니다.

enum이란?



int 형, boolean 형으로 정의된 열을, 캐릭터 라인으로 표현할 수 있도록(듯이) 하는 기능입니다.
예를 들어 요일에서 말하면 아래와 같이 표현할 수 있도록 한 것입니다.
    MON = 1
    TUE = 2
    WED = 3
    THU = 4
    FRI = 5
    SAT = 6
    SUN = 7

사전 준비


  • 전술한 바와 같이 enum에 정의하는 컬럼은 int형, boolean형으로 정의되고 있을 필요가 있습니다.
  • Materialize나 simple_form의 도입에 대해서는 아래를 참조해 주세요.
    Materialize와 simple_form으로 간단하고 좋은 느낌의 양식을 만들고 싶습니다!

  • Materialize 확인 사항



    선택 상자를 사용하려면 jquery 설정이 필요합니다.
    application.js에 아래에 설명되어 있습니다. 또한 공식 페이지를 참고로
    language-javascript.js를 작성해, 이하 기재를 실시했습니다.

    application.js
    //= require jquery
    //= require jquery_ujs
    //= require materialize-sprockets
    //= require turbolinks
    //= require_tree .
    

    language-javascript.js
    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('select');
      var instances = M.FormSelect.init(elems, options);
    });
    
    // Or with jQuery
    
    $(document).ready(function(){
      $('select').formSelect();
    });
    

    enum 설정



    해당 모델의 파일에 기재를 실시합니다.
    이번은 통화를 설정하고 있는 Product 모델의 unit 컬럼(integer형)에 정의합니다.

    product.rb
    class Product < ApplicationRecord
      validates :name, presence: true
      validates :description, presence: true
      validates :price, presence: true
      validates :unit, presence: true
    
      enum unit: [:yen, :usd, :eur] #追記
    
      mount_uploader :image, ImageUploader
    end
    

    위에서 정의를 할 수있었습니다. 터미널의 결과입니다.
    [모델].[컬럼 복수형]에서 확인할 수 있습니다.

    터미널.
    Product.units
    => {"yen"=>0, "usd"=>1, "eur"=>2}
    
    

    또 keys와 추가로 기술하면 key만 취득하는 것도 가능합니다.

    터미널.
    Product.units.keys
    => ["yen", "usd", "eur"]
    

    선택 상자 추가



    아래와 같이 기술하는 것으로 select 박스를 사용할 수 있습니다.

    new.html.haml
      = simple_form_for(@product) do |f|
        .row
          .input-field.col.s6
            = f.input :name
            = f.input :description
            = f.input :price
            = f.select :unit,Product.units.keys, {}, placeholder: 0 #追加
            = f.input :image
            = f.button :submit
    

    결과




    성공적으로 구현할 수있었습니다!



    계속해서 enum의 일본어화를 아래에 정리하고 있습니다. 원한다면 계속하십시오.
    enum을 일본어화

    이상입니다. 조금이라도 참고가 되시면, 좋아요나 팔로우 부담없이 해 주시면 격려가 됩니다! \(^o^)/

    참고



    [참고] Github simple_form
    [참고] Github materialize-sass

    좋은 웹페이지 즐겨찾기