enum을 사용한 선택 상자 구현
enum을 사용하여 확장 가능한 선택 상자를 만들고 싶습니다.
enum이란?
int 형, boolean 형으로 정의된 열을, 캐릭터 라인으로 표현할 수 있도록(듯이) 하는 기능입니다.
예를 들어 요일에서 말하면 아래와 같이 표현할 수 있도록 한 것입니다.
MON = 1
TUE = 2
WED = 3
THU = 4
FRI = 5
SAT = 6
SUN = 7
사전 준비
MON = 1
TUE = 2
WED = 3
THU = 4
FRI = 5
SAT = 6
SUN = 7
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.jsdocument.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.rbclass 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
Reference
이 문제에 관하여(enum을 사용한 선택 상자 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sakuraniumarete/items/ac09780f6b42cc287815
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
//= require jquery
//= require jquery_ujs
//= require materialize-sprockets
//= require turbolinks
//= require_tree .
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('select').formSelect();
});
해당 모델의 파일에 기재를 실시합니다.
이번은 통화를 설정하고 있는 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
Reference
이 문제에 관하여(enum을 사용한 선택 상자 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sakuraniumarete/items/ac09780f6b42cc287815
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
= 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
Reference
이 문제에 관하여(enum을 사용한 선택 상자 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sakuraniumarete/items/ac09780f6b42cc287815
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
[참고] Github simple_form
[참고] Github materialize-sass
Reference
이 문제에 관하여(enum을 사용한 선택 상자 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sakuraniumarete/items/ac09780f6b42cc287815텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)