jquery - 使用祖先 gem 为大型树结构构建路由线

Question

我正在使用 ancestry gem 并关注了 railscasts 剧集 here让 gem 正常工作，效果非常好。

我创建了一个相当大的祖先树，虽然 parent 和 child 是通过缩进字段嵌套的，但我更喜欢某种路由线。下图是整个树的一小部分。

我希望结构看起来像这样/或类似的东西

我试图通过添加线条来尝试这个结构，但我似乎只是在冒烟。

每个 parent 和 child 都有一个像这样的单独的 div 字段(在助手中)。就像 railscasts 插曲一样。

def nested_messages(messages)
  messages.map do |message, sub_messages|
    render(message) + content_tag(:div, nested_routes(sub_messages), :class => "nested_messages")
  end.join.html_safe
end

如果可能，如何做到这一点。有什么提示吗？

Answer 1

我不会尝试使用 div 和 css 技巧来创建线条。您正在尝试构建 UI 的元素，例如导航树。只需全力投入真正的 UI 库，如 jsTree。使用 rails 创建数据结构(您已经完成了)，呈现静态 HTML <ul>列表(这应该很容易将您的 <div> 转换为列表元素)。然后让 javascript 呈现该数据结构(行等)的 View ，您将免费获得交互性和其他内容。 :)

这是主要站点: http://www.jstree.com/

查看此演示: http://www.jstree.com/documentation/core#demos

查看页面的源代码，您会看到 <div id="demo2" ...>魔法开始发生的地方。

在 Rails 3 中安装 JQuery 和这个插件应该相当容易(在 3.1 中你已经有了 JQuery)。