[JAVA] [Rails] Implémentation de la fonction de catégorie multicouche en utilisant l'ascendance "J'ai essayé de créer une fenêtre avec Bootstrap 3"

Cible

ezgif.com-video-to-gif.gif

Environnement de développement

・ Rubis: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Système d'exploitation: macOS Catalina

supposition

Ce qui suit a été mis en œuvre.

Présentation minceIntroduction de Bootstrap 3Introduction de Font Awesome

1. Modifiez le contrôleur

homes_controller.rb


#Postscript
def category_window
  @children = Category.find(params[:parent_id]).children
end

[Explication]

(1) Extraire les catégories enfants des catégories correspondant aux paramètres envoyés par la communication Ajax et les affecter aux variables d'instance.

@children = Category.find(params[:parent_id]).children

2. Créez / modifiez le fichier json.jbuilder

Terminal


$ touch app/views/homes/category_window.json.jbuilder

ruby:category_window.json.jbuilder


json.array! @children do |children|
  json.id children.id
  json.name children.name
end

[Explication]

① Itérez les enregistrements extraits par l'action get_category_children pour créer un tableau.

json.array! @children do |children|

(2) Stockez chaque ID et nom dans le tableau créé par .

json.id children.id
json.name children.name

** ◎ Valeur renvoyée lorsque la souris est sur la catégorie parente (entreprise) **

[
  {
    "id": 2, 
    "name": "La finance"
  },
  {
    "id": 6, 
    "name": "Économie"
  },
  {
    "id": 9, 
    "name": "la gestion"
  },
  {
    "id": 13, 
    "name": "commercialisation"
  },
]

** ◎ Valeur renvoyée lorsque la souris est sur la catégorie enfant (finance) **

[
  {
    "id": 3, 
    "name": "Stock"
  },
  {
    "id": 4, 
    "name": "échange"
  },
  {
    "id": 5, 
    "name": "impôt"
  },
]

3. Ajouter un routage

routes.rb


#Postscript
get 'get_category/new', to: 'homes#category_window', defaults: { format: 'json' }

4. Modifier la vue

slim:application.html.slim


body
  header
    nav.navbar.navbar-default.navbar-fixed-top
      .container-fluid
        ul.nav.navbar-nav.navbar-right
          li.dropdown role='presentation'
            a.dropdown-toggle data-toggle='dropdown' href='#' role='button' aria-expanded='false'
              i.fas.fa-list-ul
              span
                |Recherche par catégorie
              span.caret
            ul.dropdown-menu role='menu'
              li role='presentation'
                - Category.where(ancestry: nil).each do |parent|
                  = link_to parent.name, root_path, id: "#{parent.id}", class: 'parent-category'
              br
              li role='presentation' class='children-list'
              br
              li role='presentation' class='grandchildren-list'

[Explication]

** * J'omettrai comment écrire Bootstrap. ** **

(1) La valeur de l'ascendance est «nil», c'est-à-dire que toutes les catégories parentes sont extraites et affichées dans le menu déroulant.

- Category.where(ancestry: nil).each do |parent|
  = link_to parent.name, root_path, id: "#{parent.id}", class: 'parent-category'

(2) Préparez un endroit pour afficher la catégorie enfant.

li role='presentation' class='children-list'

③ Préparez un endroit pour afficher la catégorie des petits-enfants.

li role='presentation' class='grandchildren-list'

5. Créer / modifier un fichier JavaScript

Terminal


$ touch app/assets/javascripts/category_window.js

category_window.js


$(function() {
  function buildChildHTML(children) {
    let html = `
      <a class="children-category" id="${children.id}" href="/">
        ${children.name}
      </a>
    `;
    return html;
  }

  $('.parent-category').on('mouseover', function() {
    let id = this.id;
    $('.children-category').remove();
    $('.grandchildren-category').remove();
    $.ajax({
      type: 'GET',
      url: '/get_category/new',
      data: {
        parent_id: id,
      },
      dataType: 'json',
    }).done(function(children) {
      children.forEach(function(child) {
        let html = buildChildHTML(child);
        $('.children-list').append(html);
      });
    });
  });

  function buildGrandChildHTML(children) {
    let html = `
      <a class="grandchildren-category" id="${children.id}" href="/">
        ${children.name}
      </a>
    `;
    return html;
  }

  $(document).on('mouseover', '.children-category', function() {
    let id = this.id;
    $.ajax({
      type: 'GET',
      url: '/get_category/new',
      data: {
        parent_id: id,
      },
      dataType: 'json',
    }).done(function(children) {
      children.forEach(function(child) {
        let html = buildGrandChildHTML(child);
        $('.grandchildren-list').append(html);
      });
      $(document).on('mouseover', '.children-category', function() {
        $('.grandchildren-category').remove();
      });
    });
  });
});

[Explication]

① Créez du HTML pour la catégorie enfant.

function buildChildHTML(children) {
  let html = `
    <a class="children-category" id="${children.id}" href="/">
      ${children.name}
    </a>
  `;
  return html;
}

(2) Modifiez le contenu d'affichage de la catégorie enfant en fonction de la catégorie parent sur laquelle se trouve la souris.

  $('.parent-category').on('mouseover', function() {
    let id = this.id;
    $('.children-category').remove();
    $('.grandchildren-category').remove();
    $.ajax({
      type: 'GET',
      url: '/get_category/new',
      data: {
        parent_id: id,
      },
      dataType: 'json',
    }).done(function(children) {
      children.forEach(function(child) {
        let html = buildChildHTML(child);
        $('.children-list').append(html);
      });
    });
  });

** ◎ Créez un événement qui se déclenche lorsque la souris est placée sur la catégorie parent. ** **

$('.parent-category').on('mouseover', function() {});

** ◎ Attribuez l'ID envoyé de category_window.json.jbuilder à la variable. ** **

let id = this.id;

** ◎ Pour le moment, supprimez la catégorie enfant et ci-dessous. ** **

$('.children-category').remove();
$('.grandchildren-category').remove();

** ◎ Définissez la variable créée précédemment dans le paramètre (parent_id) et exécutez l'action category_window de manière asynchrone. ** **

  $.ajax({
    type: 'GET',
    url: '/get_category/new',
    data: {
      parent_id: id,
    },
    dataType: 'json',
  })

** ◎ Si la communication Ajax réussit, créez et affichez du HTML pour la catégorie enfant correspondante. ** **

.done(function(children) {
  children.forEach(function(child) {
    var html = buildChildHTML(child);
    $('.children-list').append(html);
  });
});

③ Créez du HTML pour la catégorie des petits-enfants.

function buildGrandChildHTML(children) {
  var html = `
    <a class="grandchildren-category" id="${children.id}" href="/">
      ${children.name}
    </a>
  `;
  return html;
}

④ Modifiez le contenu d'affichage de la catégorie petit-enfant en fonction de la catégorie enfant sur laquelle se trouve la souris. (Comme c'est presque la même chose que «③», l'explication est omise)

$(document).on('mouseover', '.children-category', function() {
  var id = this.id;
  $.ajax({
    type: 'GET',
    url: '/get_category/new',
    data: {
      parent_id: id,
    },
    dataType: 'json',
  }).done(function(children) {
    children.forEach(function(child) {
      var html = buildGrandChildHTML(child);
      $('.grandchildren-list').append(html);
    });
    $(document).on('mouseover', '.children-category', function() {
      $('.grandchildren-category').remove();
    });
  });
});

Mise en garde

Si vous ne désactivez pas turbolinks, le menu déroulant ne fonctionnera pas de manière asynchrone, alors assurez-vous de le désactiver.

Comment désactiver les turbolinks

Recommended Posts

[Rails] Implémentation de la fonction de catégorie multicouche en utilisant l'ascendance "J'ai essayé de créer une fenêtre avec Bootstrap 3"
[Rails] Implémentation de la fonction de catégorie multicouche en utilisant l'ascendance "Préparation"
[Rails] Implémentation de la fonction de catégorie multicouche à l'aide de l'ascendance "seed edition"
[Rails] Implémentation de la fonction de catégorie multicouche à l'aide de l'ascendance "Formulaire de création"
J'ai essayé de créer une fonction de groupe (babillard) avec Rails
J'ai essayé de créer une fonction de message de l'extension Rails Tutorial (Partie 1): Créer un modèle
J'ai essayé de faire une fonction de réponse de l'extension Rails Tutorial (Partie 3): Correction d'un malentendu des spécifications
J'ai essayé de créer une fonction de message pour l'extension Rails Tutorial (Partie 2): Créer un écran à afficher
J'ai essayé d'implémenter une fonction équivalente à Felica Lite avec HCE-F d'Android
Rails6 Je veux créer un tableau de valeurs avec une case à cocher
J'ai essayé de créer une fonction de connexion avec Java
[Rails] Implémentation de la fonction de catégorie
[Rails] J'ai essayé de créer une mini application avec FullCalendar
Je veux créer une fonction avec kotlin et java!
J'ai créé un client RESAS-API en Java
[Rails] Implémentation de la fonction de catégorie d'ascendance gemme
J'ai essayé d'implémenter le traitement Ajax de la fonction similaire dans Rails
Je souhaite ajouter une fonction de navigation avec ruby on rails
J'ai essayé d'implémenter la fonction de prévisualisation d'image avec Rails / jQuery
[Unity] J'ai essayé de créer un plug-in natif UniNWPathMonitor en utilisant NWPathMonitor
[Rails] Implémentation de la fonction coupon (avec fonction de suppression automatique par traitement par lots)
J'ai essayé de créer une application simple en utilisant Dockder + Rails Scaffold
J'ai créé une application d'apprentissage automatique avec Dash (+ Docker) part2 ~ Façon basique d'écrire Dash ~
Créez quand même une fonction de connexion avec Rails
J'ai essayé de créer une classe parent d'objet de valeur dans Ruby
J'ai essayé de créer une simple application Android de reconnaissance faciale en utilisant OpenCV
[iOS] J'ai essayé de créer une application de traitement de type insta avec Swift
[Rails] Je vais expliquer la procédure d'implémentation de la fonction follow en utilisant form_with.
J'ai essayé de créer une API Web qui se connecte à DB avec Quarkus
J'ai essayé de créer une application de conversation en Java à l'aide de l'IA «A3RT»
J'ai essayé de créer un exemple de programme en utilisant le problème du spécialiste des bases de données dans la conception pilotée par domaine
[Rails] Implémentation de la fonction de recherche en utilisant le ransack de gem
J'ai essayé de faire une authentification de base avec Java
[Rails] Implémentation de la fonction d'agrandissement d'image à l'aide de lightbox2
[Rails] J'ai créé une fonction de brouillon en utilisant enum
Faisons une fonction de recherche avec Rails (ransack)
[Rails] Implémentation du diaporama d'images à l'aide de Bootstrap 3
J'ai essayé d'implémenter un serveur en utilisant Netty
J'ai essayé de casser le bloc avec java (1)
J'ai créé une application d'apprentissage automatique avec Dash (+ Docker) part3 ~ Practice ~
Je souhaite pouvoir lire des fichiers en utilisant refile avec administrate [rails6]
J'ai essayé de faire un jeu simple avec Javafx ① "Trouvons le jeu du bonheur" (inachevé)
[Java] J'ai essayé de me connecter en utilisant le pool de connexion avec Servlet (tomcat) & MySQL & Java
[Android] J'ai créé un écran de liste de matériaux avec ListView + Bottom Sheet
J'ai essayé de cloner une application Web pleine de bugs avec Spring Boot
J'ai essayé de créer une fonction / écran d'administrateur de site commercial avec Java et Spring
J'ai essayé de faire un jeu simple avec Javafx ① "Trouvons le jeu du bonheur" (version inachevée ②)
J'ai essayé d'utiliser la fonction Server Push de Servlet 4.0
[Rails] Implémentation de la fonction glisser-déposer (avec effet)
Je souhaite définir une fonction dans la console Rails
J'ai essayé d'étudier le mécanisme d'Emscripten en l'utilisant avec un solveur allemand
J'ai essayé de créer un outil de comparaison des prix des produits Amazon dans le monde entier avec Java, l'API Amazon Product Advertising, l'API Currency (29/01/2017)
J'ai essayé de convertir l'exemple d'application en microservice selon l'idée du livre "Microservice Architecture".
J'ai essayé de moderniser une application Java EE avec OpenShift.