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

Arden

浏览: 287322 次
性别:
来自: 深圳

最近访客更多访客>>

u012363178

songyipangbuo

liqi_李祺

shawndodo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ruby On Rails

Rails JavaScript CSS ActiveRecord HTML

今天花了一小段时间写了个基于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

目录下！

分享到：

(收藏)CSS学习 | 如何防止电脑福射？

2006-12-26 20:00
浏览 8120
评论(5)
论坛回复 / 浏览 (2 / 10819)
查看更多

5 楼 nixiaode 2007-06-04

can't convert nil into String

Extracted source (around line #11):

8:     <body>
9:         <script type="text/javascript">
10:             var rootTree = new WebFXTress('Root');
11:             <%= get_tree(@categories, nil)%>
12:             rootTree.write();
13:         </script>
14:     </body>

4 楼 nixiaode 2007-06-04

先试试看再说

3 楼 xusaomaiss 2007-06-04

xtree这东东，我上网找，怎么没找到，你这个DEMO能不能发一份给，或是把Xtree的网址告诉我一下。
email:seaofforest@126.com

2 楼 eastsae 2007-04-27

正在找这方面的资料,谢谢楼主分享.

1 楼 vfany 2007-04-26

动态的添加删除不知道楼主做了没?

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论