How to generate full ul/li tree with walk_tree?

[spacerobotTR]

Sorry if this is the wrong place for this but how would you take this example:

<% Page.walk_tree do |page, level| %>
<%= link_to "#{'-'*level}#{page.name}", page_path(page) %>

<% end %>

And turn this into a

• list with items? I am trying to use this with jstree to output the tree view.

[felixbuenemann]

I don't think walk_treeis useful for that case.

You could create a recursive view helper to generate the html.

Another approach would be to do it in ERB and recursively render a partial.

Something like this should work in a rails helper (untested):

def render_tree(nodes)
  return ''.html_safe if nodes.empty?
  content_tag(:ul) do
    nodes.map do |node|
      content_tag(:li) do
       link_to(page.name, page_path(node)) + render_tree(node.children)
      end
    end.join.html_safe
  end
end

Then in you view you could do:

<%= render_tree(Page.roots) %>

[spacerobotTR]

Thank you I will play around with this.

[spacerobotTR]

Ok wow. I still had the project. Here is the section where I output the tree. It was a file manager type application. I hope that helps. <% root=Document.where(parent_id:nil).first %> <span style="font-size:16px;"> <div id="jstree1"> <ul> <li> <%= root.name %> <ul> <% root.children.each do |node| %> <li> <%= node.name %> <ul> <% node.children.each do |sub_node| %> <% unless sub_node.name.blank? %> <li> <%= sub_node.name %> <% else %> <li data-jstree='{"type":"html"}'><%= link_to (sub_node.title + " - " + sub_node.file.original_filename), sub_node.file.url %> <% end %> <ul> <% sub_node.children.each do |sub_node2| %> <% unless sub_node2.file_data.blank? %> <li data-jstree='{"type":"html"}'><%= link_to (sub_node2.title + " - " + sub_node2.file.original_filename), sub_node2.file.url %></li> <% end %> <% end %> </ul> </li> <% end %> </ul> </li> <% end %> </ul> </li> </ul> </div> </span>

…

On Mon, Nov 4, 2019 at 7:34 PM ***@***.***> wrote: I can't remember. Let me go back and find the project and see what I ended up doing! I'll get back to you. On Mon, Nov 4, 2019 at 1:13 AM fathur-bookdoc ***@***.***> wrote: > @spacerobotTR <https://github.com/spacerobotTR> hi did you solve this? > Can share your code? Thanks > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#69?email_source=notifications&email_token=AA4725GBIEBLGQFZP6TOC5LQR64QFA5CNFSM4D537QIKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEC6KHKA#issuecomment-549233576>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AA4725DXTS5IGRXHVOPHUGLQR64QFANCNFSM4D537QIA> > . >

[fathur-bookdoc]

@spacerobotTR thanks your snippet really helpful :)

[felixbuenemann]

It looks like @spacerobotTR's solution depends on a fixed depth.

A more versatile approach would be to recursively render a partial for each nesting, passing the children as data to the partial.

Example:

<%# app/views/documents/_tree.html.erb %>
<ul>
  <%= render partial: :node, collection: Document.roots.preload(:children) %>
</ul>

<%# app/views/documents/_node.html.erb %>
<li>
  <%= node.name %>
  <%- unless node.leaf? -%>
  <ul>
    <%= render partial: :node, collection: node.children.preload(:children) %>
  </ul>
  <%- end -%>
</li>

@fathur-bookdoc Please let me know how this works for you, we could add an example to the README to help others in the future.

Update: Slightly tweaked the example to use #preload(:children) to avoid needless count queries and reduce n+1 queries.

[spacerobotTR]

That is great and a better way to load these. I'm glad you revisited this. I was going to come back to functionality shortly for a new project I am working on.