0

Ich benutze awesome_nested_set gem für den Binärbaum in meiner App.Schienen: Daten in der Ansicht mit anderem Kontext auflisten

Ich muss den Binärbaum auf der Seite anzeigen. Jeder Knoten in der Baumstruktur hat eine Schaltfläche, die zwei nächste untergeordnete Elemente anzeigt.

Mockup with tree

Mein aktueller Code nicht trocken ist, groß und schwer aufrecht zu erhalten. ich alle Nachkommen für den aktuellen Benutzer:

- users = current_user.descendants.unscope(:order).order(:depth, :lft) 

Jede Ebene und „collaspsing Zonen“ eigene Klassen haben muss.

#lvl-0 
    .person-container 
    .person-avatar 
     = image_tag current_user.avatar_file_name, class: "img-circle avatar" 
    .person-name 
     %b 
     = current_user.name 
     = current_user.surname 
    #lvl-1-left.lvl-child 
    .person-container 
     %span.badge(data-toggle="collapse" data-target="#lvl-2-left-from-left, #lvl-2-right-from-left") 
     %span.caret 
     .personal-avatar 
     = image_tag users[0].avatar_file_name, class: "img-circle avatar" 
     .personal-name 
     %b 
      = users[0].name -# first child 
      = users[0].surname 
    #lvl-2-left-from-left.collapse.lvl-child 
     .person-container 
     %span.badge(data-toggle="collapse" data-target="THIS USER'S NEXT TWO CHILDREN") 
      %span.caret 
     .personal-avatar 
      = image_tag users[2].avatar_file_name, class: "img-circle avatar" 
     .personal-name 
      %b 
      = users[2].name 
      = users[2].surname 

    #lvl-2-right-from-left.collapse.lvl-child 
     .person-container 
     %span.badge(data-toggle="collapse" data-target="THIS USER'S NEXT TWO CHILDREN") 
      %span.caret 
     .personal-avatar 
      = image_tag users[3].avatar_file_name, class: "img-circle avatar" 
     .personal-name 
      %b 
      = users[3].name 
      = users[3].surname 

Und so weiter ...

Ich möchte so etwas wie dieses

- current_user.self_and_descendants.unscope(:order).order(:depth, :lft).each do |user| 
    - case user.depth 
    - when 0 
    -# inject id and data-target, render _person.html.haml 
    - when 1 
    -# inject id and data-target, render _person.html.haml 
    -# etc 

Antwort

1

, was Sie brauchen, ist eine rekursive Teil

eine partielle _nested_fields.html.haml erstellen und fügen Sie

- users.each do |user| 
    .person-container 
    - if this user is not root 
     %span.badge(data-toggle="collapse") 
     %span.caret 
    .personal-avatar 
     = image_tag user.avatar_file_name, class: "img-circle avatar" 
    .personal-name 
     %b 
     = user.name 
     = user.surname 

    - if this user has children 
     = render "path_to_this/nested_fields", users: user.children 

Ihrer Ansicht

= render "nested_fields", users: [current_user] 

den Einzug hinzufügen können Sie einige CSS

.person-container { 
    margin-left: 20px; 
} 
hinzufügen
Verwandte Themen