用Rails实现无限级动态树型结构！

最新推荐文章于 2018-08-21 17:36:12 发布

ardenemily

最新推荐文章于 2018-08-21 17:36:12 发布

阅读量265

点赞数

分类专栏： Ruby On Rails 文章标签： Rails JavaScript CSS ActiveRecord HTML ViewUI

Ruby On Rails 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天花了一小段时间写了个基于Rails和xtree的树形例子，还有很多地方需要完善，并且代码比较乱！

Migrate类

class CreateCategories < ActiveRecord::Migration
def self.up
create_table "categories", :force => true do |t|
t.column "name", :string
t.column "created_at", :datetime
t.column "parent_id", :integer, :default => 0, :null => false
end
%w(item1 item2 item3 item4 item5).each do |name|
parent = Item.new(:name=>name)
parent.save
Item.create(:name=>name+".1", :parent_id=>parent.id)
Item.create(:name=>name+".2", :parent_id=>parent.id)
Item.create(:name=>name+".3", :parent_id=>parent.id)
end
end
def self.down
drop_table :categories
end
end

表结构

CREATE TABLE categories (
id int(11) NOT NULL PRIMARY KEY,
name varchar(50),
parent_id int(11)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin COMMENT='类别表';

控制类

class CategoryController < ApplicationController
def index
@categories = Category.roots
end
end

Helper类

module CategoryHelper
def get_tree(trees, parent)
tree_html = "";
trees.each do |tree|
if tree.is_root?
tree_html += "var tree_#{tree.id} = new WebFXTreeItem('#{tree.name}');\r\n"
tree_html += "rootTree.add(tree_#{tree.id});\r\n"
end
if !tree.is_leaf?
if !tree.is_root?
tree_html += "var tree_#{tree.id} = new WebFXTreeItem('#{tree.name}');\r\n"
tree_html += "tree_#{parent.id}.add(tree_#{tree.id});\r\n"
end
tree_html += get_tree(tree.children, tree)
else
tree_html += "var tree_#{tree.id} = new WebFXTreeItem('#{tree.name}');\r\n"
if !parent.nil?
tree_html += "tree_#{parent.id}.add(tree_#{tree.id});\r\n"
end
end
end
return tree_html
end
end

模型类category.rb

class Category < ActiveRecord::Base
acts_as_tree
validates_presence_of :name
def self.roots
self.find(:all, :conditions=>["parent_id = ?", 0])
end
def is_leaf?
return !self.has_children?
end
def is_root?
return self.parent_id == 0
end
end

视图文件

<html>
<head>
<title>tree</title>
<script type="text/javascript" src="/javascripts/xtree.js"></script>
<script type="text/javascript" src="/javascripts/xloadtree.js"></script>
<link type="text/css" rel="stylesheet" href="/stylesheets/xtree.css" />
</head>
<body>
<script type="text/javascript">
var rootTree = new WebFXTree('Root');
<%= get_tree(@categories, nil)%>
document.write(rootTree);
</script>
</body>
</html>

效果图如下：

注意：需要将xtree组件的xtree.js xtree2.js xloadtree.js拷贝到javascripts目录，把xtree组件里images

目录下的文件拷贝到rails下的public/images目录下，把xtree组件里的xtree.css拷贝到rails下的stylesheets

目录下！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Rails实现无限级动态树型结构！

今天花了一小段时间写了个基于Rails和xtree的树形例子，还有很多地方需要完善，并且代码比较乱！Migrate类 class CreateCategories &lt; ActiveRecord::Migration def self.up create_table "categories", :force =&gt; true do |t| ...
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。