selectize ajax

selectize ajax

기타 카테고리

Stable release

다운로드

선택::Ajax

자동 완성 기능이 있는 유용한 Selectize.js 양식 제어 태그, ajax로 항목 생성 및 편집.

설치

애플리케이션의 Gemfile에 다음 줄을 추가하세요.

 gem 'selectize-ajax'

그런 다음 다음을 실행합니다.

 $ bundle

또는 다음과 같이 직접 설치하십시오.

 $ gem install selectize-ajax

application.js에 다음을 포함합니다.

 //= require selectize-ajax

application.css에 다음을 포함합니다.

 *= require selectize-ajax

용법

예를 들어 게시물 카테고리를 선택하기 위한 드롭다운 컨트롤을 만들고 싶습니다.

 selectize_ajax_tag f . object , :category_id , collection : Category . collection

이 코드는 간단한 선택 드롭다운을 생성합니다. 컬렉션은 다음과 같아야 합니다.

 [
  ...
  { value : < id > , label : < title > } ,
  ...
]

 def self . collection
  Category . map do | category |
    { label : category . title , value : category . id }
  end
end

자동완성

Ajax 자동 완성을 사용하려면 검색 경로를 추가해야 합니다.

 selectize_ajax_tag f . object , :category_id , collection_path : categories_autocomplete_path

기본적으로 검색 매개변수는 q 입니다. 다른 매개변수를 사용하려면 제어를 위해 search_param 설정해야 합니다.

새 항목 추가

모달 창에서 새 항목을 추가할 수 있습니다. 이를 위해서는 다음이 필요합니다.

컨트롤을 선택하려면 경로 및 모달 대상을 추가하세요.
컨트롤러에서 모달 및 액션 생성

<%= selectize_ajax_tag f . object , :category_id ,
    collection : Category . collection ,
    add_path : new_category_path ,
    add_modal : '#new-category-modal'
%>

부트스트랩 모달 창

  ...
  .modal-header
    % h4 .modal-title
      Create new category

  .modal-body
    = simple_form_for(@category_form, url: categories_path ,
      data: { target: '#new-category-modal' }, remote: true) do |f|
  ...

새 레코드 생성 성공 후 컨트롤러 작업은 json을 반환해야 합니다.

 def create
  ...
  render json : { label : record . title , value : record . id }
end

그 후에는 모달이 닫히고 드롭다운에서 새 레코드가 선택됩니다.

선택한 항목 수정

선택한 항목을 편집하려면 새 모달을 추가하고 작업 경로를 편집해야 합니다.

<%= selectize_ajax_tag f . object , :category_id ,
    collection : Category . collection ,
    add_path : new_category_path ,
    add_modal : '#new-category-modal' ,
    edit_path : edit_category_path ( @category ) ,
    edit_modal : '#edit-category-modal'
%>

경고 : edit_path 사용하고 링크 경로 생성을 위한 레코드 ID가 없으면 다음 템플릿을 사용해야 합니다.

ID를 문자열 {{id}} 로 교체 - edit_category_path(id: '{{id}}')
또는 edit_category_path(id: f.object.category_id || '{{id}}') 사용하세요.
또는 레일 hepler '/category/{{id}}/edit' 없이 하드코딩된 경로를 작성합니다 (권장되지 않음).

스크립트는 자동으로 {{id}} 매개변수를 선택한 값으로 대체합니다.

모든 옵션

매개변수	가치	기본
`label`	끈	개체에서
`value`	혼합된	개체에서
`placeholder`	끈	--
`wrap_class`	문자열 \| 거짓	--
`wrap_class_only`	사실 \| 거짓	거짓
`label_class`	끈	--
`input_html[class]`	끈	--
`required`	사실 \| 거짓	개체에서
`collection`	정렬	[]
`add_modal`	끈	--
`add_path`	끈	--
`add_button_text`	끈	I18n.t('selectize_ajax.add_button_text')
`add_button_class`	끈	--
`edit_path`	끈	--
`edit_modal`	끈	--
`edit_button_text`	끈	I18n.t('selectize_ajax.edit_button_text')
`edit_button_class`	끈	--
`horizontal`	사실 \| 거짓	진실
`collection_path`	끈	--
`search_param`	끈	`q`