・ Ruby: 2.5.7 Schienen: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Betriebssystem: macOS Catalina
Folgendes wurde implementiert.
・ Schlanke Einführung ・ Einführung von Bootstrap 3 ・ Einführung von Font Awesome
homes_controller.rb
#Nachtrag
def category_window
@children = Category.find(params[:parent_id]).children
end
@children = Category.find(params[:parent_id]).children
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
json.array! @children do |children|
①
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"
},
]
routes.rb
#Nachtrag
get 'get_category/new', to: 'homes#category_window', defaults: { format: 'json' }
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'
** * Ich werde das Schreiben von Bootstrap weglassen. ** ** **
- Category.where(ancestry: nil).each do |parent|
= link_to parent.name, root_path, id: "#{parent.id}", class: 'parent-category'
li role='presentation' class='children-list'
li role='presentation' class='grandchildren-list'
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();
});
});
});
});
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);
});
});
});
** ◎ 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);
});
});
function buildGrandChildHTML(children) {
var html = `
<a class="grandchildren-category" id="${children.id}" href="/">
${children.name}
</a>
`;
return html;
}
$(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();
});
});
});
Wenn Sie "Turbolinks" nicht deaktivieren, funktioniert das Pulldown-Menü nicht asynchron. Deaktivieren Sie es daher unbedingt.