Question

我无法在Ruby on Rails中表示分层数据，使用jsTree可视化“树文件夹结构”中的数据。要使用示例数据测试插件，我遵循了本教程：http://beginrails.blogspot.ca/2012/03/jstree-introduction.html

我正在编写的应用程序是一个非常基本的“技能库存”，具有页面（技能类型）和用户（具有技能的人）模型。页面是分层的，这意味着一个页面可以是多个页面的“父”，可以是多个其他页面的父页面，依此类推。当“页面”没有更多孩子时，该页面将包含“用户”。使用示例数据，应用程序应生成如下结果：

http://i.imgur.com/O3na3Ws.png

每个页面都有一个parent_id字段，所有页面都是独立的（意味着它们都包含在Page.all中）。如果parent_id字段为nil，则该页面仅包含用户。每个页面还有一个links数组，其中存储子页面的ID。这两个字段是数据层次结构的基础。我的问题是：我如何能够遍历所有页面并为jsTree设置正确的HTML以正确显示数据？

页面模型：

# == Schema Information
#
# Table name: pages
#
#  id         :integer          not null, primary key
#  parent_id  :integer
#  name       :string(255)
#  links      :text
#  created_at :datetime         not null
#  updated_at :datetime         not null
#

class Page < ActiveRecord::Base
  include ActsAsTree
  acts_as_tree order: "name"
  attr_accessible :links, :name, :parent_id
  serialize :links
  WillPaginate.per_page = 10
end

我的Pages控制器的相关部分：

def index
  @pages = Page.all

  # any additional change could go here

  respond_to do |format|
    format.html # index.html.erb
    format.json { render json: @pages }
  end
end

应用程序的“索引”视图（这是jsTree可视化的用途：

<div id="treeview">
    <ul>
        <!-- jsTree logic and looping through data goes here -->
    </ul>
</div>

我是初学者Rails程序员，所以任何建设性的批评都会受到赞赏。

Answer 1

嗯，你要求建设性的批评，所以：

您的树定义非常不寻常。 normaly parent_id指向父级，因此没有parent_id的页面是根元素，没有子级的页面（意思是没有其他页面将此页面作为父级）是叶子。

这也是acts_as_tree的工作方式。

接下来，您必须将树构建为JSON对象。这意味着，您需要递归地构造节点。每个节点都由名称和子节点组成。

子项是子页面或关联用户。

这种树构造最好在页面模型中完成：

class Page < ActiveRecord::Base
  include ActsAsTree
  attr_accessible :name, :parent_id

  acts_as_tree order: 'name'
  has_many :users

  def node
    {data: name, children: leaves}
  end

  def leaves
    if children.any?
      children.map{|child| child.node}
    else
      users.map{|user| {data: user.name}}
    end
  end
end


class User < ActiveRecord::Base
  attr_accessible :name, :page_id
  belongs_to :page
end

为了构建测试树，我创建了一些页面和用户：

p1=Page.create name:'Laundry'
p2==Page.create name:'Java Programming'
p3==p2.children.create name:'Game Development'
p4==p2.children.create name:'Console Applications'

p1.users.create name: 'Bob Smith'
p1.users.create name: 'Chuck Norris'
p3.users.create name:'Nuck Chorris'
p4.users.create name:'Sob Bmith'

现在要构建您的JSON树，您需要所有根页面及其树：

Page.roots.map{|r| r.node}
=> [{:data=>"Java Programming", :children=>[{:data=>"Console Applications", :children=>[{:data=>"Sob Bmith"}]}, {:data=>"Game Development", :children=>[{:data=>"Nuck Chorris"}]}]}, {:data=>"Laundry", :children=>[{:data=>"Bob Smith"}, {:data=>"Chuck Norris"}]}]

所以你的控制器看起来像：

class PagesController < ApplicationController
  def index
    respond_to do |format|
      format.html
      format.json { render json: Page.roots.map{|r| r.node}}
    end
  end
end

我留给你，让jsTree收集JSON树。

用jstree表示分层数据

1 个答案: