[RUBY] So installieren Sie die JavaScript-Bibliothek "select2", mit der mehrere Auswahlen von selectbox in Rails 6.0 in Mode kommen
Einführung
Hallo zusammen! Ich bin @hiroki_tanaka, der Produzent von Mayu Sakuma.
Neulich habe ich select2 eingeführt, ein Plug-In, mit dem mehrere Auswahlen von Selectboxen in der Rails 6.0-Serie in Mode kommen. Zu dieser Zeit war ich ein wenig süchtig nach dem Unterschied von der Einführungsmethode bis zur Rails 5-Serie, also fasste ich zusammen, was ich untersuchte.
Nutzungsumgebung
- Ruby 2.6.6
- Rails 6.0.2
Was ist select2
select2 ist eine JavaScript-Bibliothek, die das HTML-Selectbox-Design in Mode bringt. Unsere offizielle Seite ist hier. → select2 Es ist ein Plug-In, mit dem nicht nur die Benutzeroberfläche der Single-Select-Selectbox, sondern auch die Multi-Select-Selectbox problemlos implementiert werden kann.
Beispiel auf der offiziellen Website
--Vor der Einführung von select2
--Multiple-Auswahl-Pulldown nach Einführung von select2
So installieren Sie in Rails 6.0
Die Einführung von select2 in der Rails5-Serie wurde mit Gem eingeführt, ab Rails 6.0 wird jedoch Webpacker anstelle von Gem verwendet. Ich möchte das Verfahren einzeln vorstellen.
- Auf der folgenden Seite wird die Einführung von select2 in Rails 5 ausführlich erläutert. → [Rails 5] Erstellen Sie ein Auswahlfeld, das mit Select 2 eine Mehrfachauswahl ermöglicht
1. Einführung in die für select2 erforderliche Bibliothek mit Garn
Führen Sie den folgenden Befehl aus, um select2 in Ihrer Rails-Anwendung zu installieren. Zu diesem Zeitpunkt werden nicht nur select2, sondern auch jQuery (und popper.js) installiert, die für die Installation von select2 und bootstrap, dem UI-Teil von select2, erforderlich sind.
$ yarn add jquery
$ yarn add popper.js
$ yarn add bootstrap
$ yarn add select2
2. Verwenden Sie jQuery / popper.js für Rails
Stellen Sie die Rails-Anwendung "webpack / environment.js" so ein, dass jQuery aus einer beliebigen Rails-Datei aufgerufen werden kann.
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
//So verwenden Sie jQuery und Bootstrap JS
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: 'popper.js'
})
)
module.exports = environment
Fügen Sie außerdem JQuery zum Manifest "packs / application.js" hinzu.
app/javascript/packs/application.js
require("jquery")
3. Konfigurieren Sie den Bootstrap für Rails.
Nehmen Sie die folgenden zwei Einstellungen vor, damit Bootstrap in Rails-Anwendungen verwendet werden kann.
app/javascript/packs/application.js
import 'bootstrap';
import '../stylesheets/application';
app/javascript/stylesheets/application.scss
@import '~bootstrap/scss/bootstrap';
4. Stellen Sie die erb-Datei auf Webpacker ein.
In Webpacker installierter Bootstrap für alle View-Dateien der Rails-Anwendung ・ Stellen Sie die ursprünglichen Layouts / application.html.erb ein, damit jQuery verwendet werden kann.
app/views/layouts/application.html.erb
<head>
<%= stylesheet_pack_tag "application", media: "all" %>
<%= javascript_pack_tag 'application' %>
</head>
5. Definieren Sie selectbox auf erb und beschreiben Sie in der JS-Datei, ob select2 verwendet werden soll.
Definieren Sie ein Auswahlfeld, das im Erb der Anwendung mehrere Auswahlen vornimmt. Wenn select_tag zu diesem Zeitpunkt als Option auf "multiple: true" gesetzt ist, wird es zu einer Auswahlbox, die mehrfach ausgewählt werden kann.
Schreiben Sie dann in die JS-Datei, die der erb-Datei entspricht, so dass die entsprechende Auswahlbox select2 verwendet.
app/views/test.html.erb
<%= javascript_pack_tag 'test' %>
<%= select_tag('animal', options_for_select([['Inu', 'dog'], ['Katze', 'cat'], ['Tori', 'bird'], ['Ushi', 'cow'], ['Schlange', 'snake']]), class: "form-control", multiple: true) %>
app/javascript/packs/test.js
$(function () {
$('#animal').select2();
});
6. Abgeschlossen! !!
Bonus: Verwenden Sie die Option select2
In select2 gibt es verschiedene Optionen. → select2 Options Diese Optionen können mit jQuery festgelegt werden. Das Folgende ist ein Beispiel für Optionseinstellungen.
app/javascript/packs/test.js
$(function () {
$('#animal').select2({
width: 'resolve' //Ändern Sie die Breite dynamisch entsprechend der Seitengröße.
theme: "classic" //Wechseln Sie zur klassischen Benutzeroberfläche.
debug: true //Geben Sie eine Debug-Nachricht an die Browserkonsole aus.
});
});
abschließend
Ich bin der Meinung, dass die Einführung von select2 durch die Verwendung von Garn einfacher geworden ist. Da ich das interne Verhalten von select2 jedoch oft nicht verstehe, möchte ich mein Verständnis vertiefen.
Recommended Posts