[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

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 mince ・ Introduction de Bootstrap 3 ・ Introduction de Font Awesome

• Implémentation de la fonction de connexion ・ Mise en œuvre de la fonction de publication
• Implémentation de la fonction de catégorie plusieurs-à-plusieurs ・ Implémentation de la fonction de catégorie multicouche (préparation) ・ Implémentation de la fonction de catégorie multicouche (édition de base) ・ [Implémentation de la fonction de catégorie multicouche (formulaire de création)] (https://qiita.com/matsubishi5/items/4afb4a4f307023126c66) ・ [Implémentation de la fonction de catégorie multicouche (formulaire d'édition)] (https://qiita.com/matsubishi5/items/10e61f314f6c56b8690d)

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