[JAVA] [Schienen] Anzeige von mehrstufigen Strukturdaten über das Auswahlfeld

Hintergrund

Ich bin Schüler einer bestimmten Programmierschule. Viele von Ihnen wissen das vielleicht. Bei der Erstellung der "Furima Clone Site" haben wir die Ausstellungskategorie mit Ajax implementiert, daher möchte ich sie organisieren und meine eigenen Gedanken organisieren.

Darüber hinaus verwendet die Kategorieeinstellung einen Edelstein namens "Abstammung". Für diesen Artikel wird davon ausgegangen, dass die Kategorie festgelegt wurde.

• Wenn Sie keine Erklärung benötigen, können Sie diese implementieren, indem Sie nur dem Code folgen.

Vollständiges Bild

Code

haml:Aussicht(items.new.html.haml)

.form-title
  =f.label "Kategorie"
  .form-title__required
    %Etikett erforderlich
.form-input-select
  = f.select :category, @category_parent_array, {}, {class: 'listing-select-wrapper__box--select', id: 'parent_category'}
.listing-product-detail__category

――Dieses Mal sind nur die unteren drei Zeilen wichtig. Andere sind frei.

• = f.select :category, @category_parent_array, {}, {class: 'listing-select-wrapper__box--select', id: 'parent_category'} ** {} ** ist super wichtig, also bitte nicht löschen. → Ich werde es leicht berühren. Es gibt zwei Teile von {}. ** Die erste ist die Beschreibung von "Option" ** und die zweite (die diesmal beschriebene) ist die "HTML-Option" **. Wenn Sie "Optionen" nicht festlegen, werden die "HTML-Optionen" nur angezeigt, wenn Sie {} eingeben, auch wenn diese leer sind.

Controller (Artikel_controller.rb）

  def new
    @category_parent_array = ["---"]
    Category.where(ancestry: nil).each do |parent|
      @category_parent_array << parent.name
    end
  end

  def get_category_children
    @category_children = Category.find_by(name: "#{params[:parent_name]}", ancestry: nil).children
  end

  def get_category_grandchildren
    @category_grandchildren = Category.find("#{params[:child_id]}").children
  end

Wenn Sie sich die Demo ansehen, sehen Sie, dass die Kategorien in drei Schritten angezeigt werden. ・ Die erste Anzeige ist neu ・ Die zweite Anzeige lautet get_category_children ・ Die dritte Anzeige ist get_category_grandchildren Es ist geworden.

Ist der komplizierte Teil der neue Code? Sie weisen @category_parent_array ein Array ** zu, das nur ** "---" enthält. In jeder Anweisung in der nächsten Zeile wird jede Kategorie ** dem ** Array von @category_parent_array zugewiesen, das zuvor festgelegt wurde. Überprüfen Sie für (Abstammung: Null) die gespeicherten Daten, nachdem Sie die Kategorie mit "Abstammung" festgelegt haben. Sie können die Bedeutung sehen.

** Die Beschreibung im zweiten und dritten Absatz wird von Ajax ** verarbeitet, sodass die Aktionen getrennt werden. params [: parent_name] und params [: child_id] sind die Werte, die von JavaScript in Ajax ausgehen. Denken Sie daran, wir werden es später einrichten.

routes.rb

 resources :items do
    collection do
      get 'get_category_children', defaults: { format: 'json' }
      get 'get_category_grandchildren', defaults: { format: 'json' }
    end
  end

Ich habe die ** zwei Aktionen für Ajax ** eingestellt, die zuvor auf dem Controller ausgegeben wurden. Es ist in Elementen verschachtelt. Um die Sammlung kurz zu erläutern, haben die Mitglieder ** eine ID im Routing und die Sammlung ** nicht. Diesmal handelt es sich um eine Sammlung **, da Sie die ** "Person (ID)" nicht angeben müssen.

Der Controller ** gibt den Prozess grundsätzlich an die Ansicht zurück **, Wenn Sie die Standardeinstellungen festlegen: {format: 'json'}, ** gibt die Verarbeitung standardmäßig an die json-Datei zurück **. (Es ist nicht mehr erforderlich, reply_to auf dem Controller zu verwenden, um es in die json-Datei zu verteilen.)

ruby:get_category_children.json.jbuilder

json.array! @category_children do |child|
  json.id child.id
  json.name child.name
end

ruby:get_category_grandchildren.json.jbuilder

json.array! @category_grandchildren do |grandchild|
  json.id grandchild.id
  json.name grandchild.name
end

Verstehen Sie den Dateispeicherort nicht falsch! !! Speichern Sie am selben Ort wie die Ansicht.

Wenn Sie die Aktionsverarbeitung des zweiten und dritten Absatzes mit dem Controller durchführen, springen Sie zu dieser JSON-Datei. (Sie haben es früher in route.rb festgelegt.) Hier konvertieren Sie die im Controller eingestellten Variablen in die Daten für Ajax.

Übrigens wird ** json.array! ** gesetzt, wenn Daten im Array-Format vom Controller empfangen werden.

Der Ablauf der Ajax-Verarbeitung ist ** Ansicht (Kategorieauswahl) -> JavaScript (Feuer) -> Controller (Verarbeitung) -> json.jbuilder (Datenkonvertierung) -> JavaScript (Verarbeitung) -> Ansicht ** Wiederholen (ich erkenne).

Nun, endlich ist JavaScript da.

JS(items.js)

$(function)(){

  //Wählen Sie Feldoptionen für Kinder- und Enkelkategorien aus
  function appendOption(category){
    //value="${category.name}"Für die Kategorie hängt davon ab, wie der Wert im starken Parameter verwendet wird.Ich denke, es kann id sein.
    var html = `<option value="${category.name}" datacategory="${category.id}">${category.name}</option>`;
    return html;
  }

  //Erstellen Sie eine Ansicht einer untergeordneten Kategorie
  function appendChildrenBox(insertHTML){
    var childSelectHtml = '';
    childSelectHtml = `<div class='listing-select-wrapper__added' id= 'children_wrapper'>
                        <div class='listing-select-wrapper__box'>
                          <select class="listing-select-wrapper__box--select" id="child_category" name="category_id">
                            <option value="---" data-category="---">---</option>
                            ${insertHTML}
                          <select>
                        </div>
                      </div>`;
    $('.listing-product-detail__category').append(childSelectHtml);
  }

　//Erstellen Sie eine Ansicht der Enkelkategorie
  function appendGrandchildrenBox(insertHTML){
    var grandchildSelectHtml = '';
    grandchildSelectHtml = `<div class='listing-select-wrapper__added' id= 'grandchildren_wrapper'>
                              <div class='listing-select-wrapper__box'>
                                <select class="listing-select-wrapper__box--select" id="grandchild_category" name="category_id">
                                  <option value="---" data-category="---">---</option>
                                  ${insertHTML}
                                </select>
                              </div>
                            </div>`;
    $('.listing-product-detail__category').append(grandchildSelectHtml);
  }

  //Verarbeitung bei Auswahl der übergeordneten Kategorie (Anzeige der untergeordneten Kategorien)
  $("#parent_category").on('change', function(){
    //Ruft den Wert der ausgewählten übergeordneten Kategorie ab
    var parentCategory = document.getElementById('parent_category').value;
    //Die ausgewählte übergeordnete Kategorie ist"---"False wenn links (Standard), true wenn geändert
    if (parentCategory != "---"){
      $.ajax({
        url: 'get_category_children',
        type: 'GET',
        //Dies ist der Wert, der an die Steuerung gesendet werden soll.
        data: { parent_name: parentCategory },
        dataType: 'json'
      })
      .done(function(children){
        //Löschen Sie zunächst die bereits angezeigten Kategorien für Kinder und Enkelkinder
        $('#children_wrapper').remove();
        $('#grandchildren_wrapper').remove();
        //Fügen Sie eine Auswahlmöglichkeit für eine Kategorie in eine Variable namens insertHTML ein. (Variablen im ersten Absatz)
        var insertHTML = '';
        children.forEach(function(child){
          insertHTML += appendOption(child);
        });
        //Aufrufen der Ansicht der im zweiten Absatz festgelegten untergeordneten Kategorie
        appendChildrenBox(insertHTML);
      })
      .fail(function(){
        alert('Die Kategorie konnte nicht abgerufen werden');
      })
    }else{
      $('#children_wrapper').remove();
      $('#grandchildren_wrapper').remove();
    }
  });
  
  //Verarbeitung bei Auswahl einer untergeordneten Kategorie (Anzeige der Enkelkategorie)
  $('.listing-product-detail__category').on('change', '#child_category', function(){
    var childId = $('#child_category option:selected').data('category');
    if (childId != "---"){
      $.ajax({
        url: 'get_category_grandchildren',
        type: 'GET',
        data: { child_id: childId },
        dataType: 'json'
      })
      .done(function(grandchildren){
        if(grandchildren.length != 0) {
          $('#grandchildren_wrapper').remove();
          $('#size_wrapper').remove();
          $('#brand_wrapper').remove();
          var insertHTML = '';
          grandchildren.forEach(function(grandchild){
            insertHTML += appendOption(grandchild);
          });
          appendGrandchildrenBox(insertHTML);
        }
      })
      .fail(function(){
        alert('Die Kategorie konnte nicht abgerufen werden');
      })
    }else{
      $('#grandchildren_wrapper').remove();
      $('#size_wrapper').remove();
      $('#brand_wrapper').remove();
    }
  });
});

Ja. Ich verstehe was ich meine. Ich bin Esper. Ich möchte Ihnen die passenden Worte senden ** Geben Sie Ihr Bestes **.

Dies ist zu lang, also ** kommentieren Sie den Code aus, um den Vorgang zu erklären **. Wenn es nicht leicht zu verstehen ist, möchte ich, dass Sie es überprüfen.

Vielen Dank, dass Sie den langen und schlampigen Artikel bis zum Ende gelesen haben. LGTM ist für XX Camp-Studenten obligatorisch.

Die Site, die als Referenz verwendet wurde

https://qiita.com/ATORA1992/items/bd824f5097caeee09678 @ ATORA1992 (Es war ein sehr leicht verständlicher Artikel. Danke !!)