selectize ajaxダウンロード - 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}}')を使用します。
または、rails 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`