显示一个tree(showatreeusingruby)

参考：https://two-wrongs.com/draw-a-tree-structure-with-only-css.html

这里使用了递归

一个ruby 的helper,  Sort 的结构是：

name: string,  introduction:string, parent_id: integer 

module ApplicationHelper
  def show_tree members
    result = '<ul>'
    members.each do |member|
      invited_members = member.invited_members
      extra_text = ''
      if invited_members.count > 0 
        extra_text = "(#{invited_members.count})"
      end 
      result += "<li>#{member.email}, #{member.name} #{extra_text}"
      if invited_members.present?
        result += show_tree invited_members
      end 
      result += '</li>'
    end 
    result += '</ul>'
    raw result
  end 

end

增加CSS样式：

<style>
.my_tree ul, .my_tree li{ 
  position: relative;
}

.my_tree ul {
  list-style: none;
  padding-left: 32px;
}

.my_tree li::before, .my_tree li::after {
    content: ""; 
    position: absolute;
    left: -12px;
}

.my_tree li::before {
  border-top: 1px solid #000;
  top: 9px;
  width: 8px;
  height: 0;
}
.my_tree li::after {
    border-left: 1px solid #000;
    height: 100%;
    width: 0px;
    top: 2px;
}

.my_tree ul > li:last-child::after {
    height: 8px;
}
</style>

ERB文件：

<div class='my_tree'>
  <%= show_tree @team_leads  %>
</div>