[JAVA] [Rails] Implementierung einer mehrschichtigen Kategoriefunktion unter Verwendung der Abstammung "Ich habe versucht, ein Fenster mit Bootstrap 3 zu erstellen"

Ziel

Entwicklungsumgebung

・ Ruby: 2.5.7 Schienen: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Betriebssystem: macOS Catalina

Annahme

Folgendes wurde implementiert.

・ Schlanke Einführung ・ Einführung von Bootstrap 3 ・ Einführung von Font Awesome

• Implementierung der Anmeldefunktion ・ Implementierung der Posting-Funktion
• Implementierung von Viele-zu-Viele-Kategoriefunktionen ・ Implementierung einer mehrschichtigen Kategoriefunktion (Vorbereitung) ・ Implementierung einer mehrschichtigen Kategoriefunktion (Seed Edition) ・ [Implementierung einer mehrschichtigen Kategoriefunktion (Erstellungsformular)] (https://qiita.com/matsubishi5/items/4afb4a4f307023126c66) ・ [Implementierung einer mehrschichtigen Kategoriefunktion (Bearbeitungsformular)] (https://qiita.com/matsubishi5/items/10e61f314f6c56b8690d)

1. Bearbeiten Sie den Controller

homes_controller.rb

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

[Erläuterung]

(1) Extrahieren Sie die untergeordneten Kategorien der Kategorien, die den von Ajax Communication gesendeten Parametern entsprechen, und weisen Sie sie den Instanzvariablen zu.

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

2. Erstellen / bearbeiten Sie die Datei "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

[Erläuterung]

(1) Wiederholen Sie die Datensätze, die mit der Aktion "get_category_children" extrahiert wurden, um ein Array zu erstellen.

json.array! @children do |children|

(2) Speichern Sie jede ID und jeden Namen in dem von ① erstellten Array.

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

** ◎ Rückgabewert, wenn sich die Maus in der übergeordneten Kategorie (Unternehmen) befindet **

[
  {
    "id": 2, 
    "name": "Finanzen"
  },
  {
    "id": 6, 
    "name": "Wirtschaft"
  },
  {
    "id": 9, 
    "name": "Management"
  },
  {
    "id": 13, 
    "name": "Marketing"
  },
]

** ◎ Rückgabewert, wenn sich die Maus in der untergeordneten Kategorie befindet (Finanzen) **

[
  {
    "id": 3, 
    "name": "Lager"
  },
  {
    "id": 4, 
    "name": "Austausch-"
  },
  {
    "id": 5, 
    "name": "MwSt"
  },
]

3. Routing hinzufügen

routes.rb

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

4. Ansicht bearbeiten

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
                |Suche nach Kategorie
              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'

[Erläuterung]

** * Ich werde das Schreiben von Bootstrap weglassen. ** ** **

(1) Der Wert der Abstammung ist "Null", dh alle übergeordneten Kategorien werden extrahiert und im Pulldown-Menü angezeigt.

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

(2) Bereiten Sie einen Ort für die Anzeige der untergeordneten Kategorie vor.

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

③ Bereiten Sie einen Ort für die Anzeige der Enkelkategorie vor.

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

5. Erstellen / bearbeiten Sie eine JavaScript-Datei

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();
      });
    });
  });
});

[Erläuterung]

① Erstellen Sie HTML für die untergeordnete Kategorie.

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

(2) Ändern Sie den Anzeigeinhalt der untergeordneten Kategorie in Abhängigkeit von der übergeordneten Kategorie, in der sich die Maus befindet.

  $('.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);
      });
    });
  });

** ◎ Erstellen Sie ein Ereignis, das ausgelöst wird, wenn die Maus auf die übergeordnete Kategorie gesetzt wird. ** ** **

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

** ◎ Weisen Sie der Variablen die von category_window.json.jbuilder gesendete ID zu. ** ** **

let id = this.id;

** ◎ Löschen Sie vorerst die untergeordnete Kategorie und darunter. ** ** **

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

** ◎ Legen Sie die zuvor im Parameter (parent_id) erstellte Variable fest und führen Sie die Aktion category_window asynchron aus. ** ** **

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

** ◎ Wenn die Ajax-Kommunikation erfolgreich ist, erstellen Sie HTML für die entsprechende untergeordnete Kategorie und zeigen Sie es an. ** ** **

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

③ Erstellen Sie HTML für die Enkelkategorie.

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

④ Ändern Sie den Anzeigeinhalt der Enkelkategorie in Abhängigkeit von der untergeordneten Kategorie, in der sich die Maus befindet. (Da es fast dasselbe ist wie "③", wird die Erklärung weggelassen)

$(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();
    });
  });
});

Hinweis

Wenn Sie "Turbolinks" nicht deaktivieren, funktioniert das Pulldown-Menü nicht asynchron. Deaktivieren Sie es daher unbedingt.

So deaktivieren Sie Turbolinks