selectize ajax

selectize ajax

หมวดหมู่อื่นๆ

Stable release

ดาวน์โหลด

เลือก::อาแจ็กซ์

แท็กควบคุมแบบฟอร์ม 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'
%>

หน้าต่างโมดอล 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|
  ...

การดำเนินการของคอนโทรลเลอร์หลังจากสร้างเร็กคอร์ดใหม่สำเร็จควรส่งคืน 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}} - 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`