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

الإكمال التلقائي

لاستخدام الإكمال التلقائي لأياكس، يجب عليك إضافة مسار للبحث:

 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}} 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`