selectize ajax Unduh - selectize ajax

selectize ajax

Kategori lainnya

Stable release

Unduh

Pilih::Ajax

Tag kontrol formulir Selectize.js yang berguna dengan pelengkapan otomatis, membuat dan mengedit item dengan ajax.

Instalasi

Tambahkan baris ini ke Gemfile aplikasi Anda:

 gem 'selectize-ajax'

Dan kemudian jalankan:

 $ bundle

Atau instal sendiri sebagai:

 $ gem install selectize-ajax

Di application.js Anda, sertakan yang berikut ini:

 //= require selectize-ajax

Di application.css Anda, sertakan yang berikut ini:

 *= require selectize-ajax

Penggunaan

Misalnya Anda ingin membuat kontrol dropdown untuk memilih kategori postingan

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

Kode ini menghasilkan dropdown pilihan sederhana. Koleksinya harus sebagai berikut:

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

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

Pelengkapan otomatis

Untuk menggunakan pelengkapan otomatis ajax Anda harus menambahkan jalur untuk pencarian:

 selectize_ajax_tag f . object , :category_id , collection_path : categories_autocomplete_path

Secara default parameter pencarian adalah q , jika Anda ingin menggunakan parameter lain, Anda perlu mengatur search_param untuk kontrol.

Tambahkan item baru

Anda dapat menambahkan item baru dari jendela modal. Untuk ini, Anda perlu:

Tambahkan target jalur dan modal untuk memilih kontrol
Buat modal dan tindakan pada pengontrol

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

Jendela modal bootstrap

  ...
  .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|
  ...

Tindakan pengontrol setelah berhasil membuat catatan baru harus mengembalikan json:

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

Setelah itu, modal akan ditutup dan record baru akan dipilih pada dropdown.

Edit item yang dipilih

Untuk mengedit item yang dipilih, Anda harus menambahkan modal baru dan mengedit jalur tindakan.

<%= 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'
%>

PERINGATAN : jika Anda ingin menggunakan edit_path dan tidak memiliki id rekaman untuk menghasilkan jalur tautan, Anda perlu menggunakan templat berikut:

Ganti ID menjadi string {{id}} - edit_category_path(id: '{{id}}')
Atau gunakan edit_category_path(id: f.object.category_id || '{{id}}')
Atau tulis jalur hardcode tanpa rails hepler '/category/{{id}}/edit' (tidak disarankan)

Script secara otomatis akan mengganti parameter {{id}} ke nilai yang dipilih.

Semua pilihan

Parameter	Nilai-nilai	Bawaan
`label`	rangkaian	Dari objek
`value`	campur aduk	Dari objek
`placeholder`	rangkaian	--
`wrap_class`	tali \| PALSU	--
`wrap_class_only`	benar \| PALSU	PALSU
`label_class`	rangkaian	--
`input_html[class]`	rangkaian	--
`required`	benar \| PALSU	Dari objek
`collection`	susunan	[]
`add_modal`	rangkaian	--
`add_path`	rangkaian	--
`add_button_text`	rangkaian	I18n.t('selectize_ajax.add_button_text')
`add_button_class`	rangkaian	--
`edit_path`	rangkaian	--
`edit_modal`	rangkaian	--
`edit_button_text`	rangkaian	I18n.t('selectize_ajax.edit_button_text')
`edit_button_class`	rangkaian	--
`horizontal`	benar \| PALSU	BENAR
`collection_path`	rangkaian	--
`search_param`	rangkaian	`q`