`
viva_yang
  • 浏览: 35587 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

acts_as_tree 加xtree在ROR下生成动态树形结构收藏

数据结构RubyActiveRecordRailsSVN 
阅读更多
由于最近学习用到这个东西，所以记录下来，供以后参考

主要功能是利用acts_as_tree和XTree来实现动态树状目录结构

1，关于XTREE
下载：你可以在网上搜索一下，或者直接去官方网站下载其最新版本。


怎样应用到你的项目里面去（基于ROR，其它的web项目大同小异吧）
      最简单的就是你把xtree.js拷贝到public/javascripts/下面，把xtree.css拷贝到public/stylesheets/下面。这两个文件足够了，还有一个关于检查的js文件自己研究吧。在你的需要的视图页面里面加入一下两句
<script type="text/javascript" src="/javascripts/xtree.js">
<link type="text/css" rel="stylesheet" href="/stylesheets/xtree.css">
      然后是这两个文件依赖于xtree/images里面的图片。我的处理方法如下，把xtree/images里面的所有图片拷贝到项目文件夹下的public/images里面去，然后修改xtree.js将images指向了根目录public/
var webFXTreeConfig = {
rootIcon        : '/images/foldericon.png', //images前面本来没有斜杆/
openRootIcon    : '/images/openfoldericon.png',//images前面本来没有斜杆/
folderIcon      : '/images/foldericon.png',//images前面本来没有斜杆/
openFolderIcon : '/images/openfoldericon.png',//images前面本来没有斜杆/
fileIcon        : '/images/file.png',//images前面本来没有斜杆/
iIcon           : '/images/I.png',//images前面本来没有斜杆/
lIcon           : '/images/L.png',//images前面本来没有斜杆/
lMinusIcon      : '/images/Lminus.png',//images前面本来没有斜杆/
lPlusIcon       : '/images/Lplus.png',//images前面本来没有斜杆/
tIcon           : '/images/T.png',//images前面本来没有斜杆/
tMinusIcon      : '/images/Tminus.png',//images前面本来没有斜杆/
tPlusIcon       : '/images/Tplus.png',//images前面本来没有斜杆/
blankIcon       : '/images/blank.png',//images前面本来没有斜杆/
defaultText     : 'Tree Item',
defaultAction   : 'javascript:void(0);',
defaultBehavior : 'classic',
usePersistence : true
};

以上几步完成后你就可以正常使用xtree了。你可以把下面的代码粘贴到一个视图文件中去，然后测试看能否正常工作。

-------------demo.rhtml--------------------------------
var tree = new WebFXTree('Root');
tree.add(new WebFXTreeItem('Tree Item 1'));
tree.add(new WebFXTreeItem('Tree Item 2'));
tree.add(new WebFXTreeItem('Tree Item 3'));
document.write(tree);

-----------------------------------------------------------
这个是帮助文档里面的例子
图片如下
tree1

关于acts_as_tree
把一个简单的acts_as_tree的例子贴在下面

用到的资源：

http://svn.rubyonrails.org/rails/plugins/

把下面的acts_as_tree文件夹整体下下来，待用

1,建立项目aat
2,安装插件
     把文件夹acts_as_tree整体拷贝到att/vendor/plugins/目录下（我是直接在控制台下用ruby script/plugin install acts_as_tree实现的）
3，创建 category 表，使用 acts_as_tree
script/generate model category

在migration中class CreateCategories < ActiveRecord::Migration
def self.up
    create_table :categories do |t|
      t.column :name,:string
      t.column :parent_id,:integer
      #t.timestamps

    end
end

def self.down
    drop_table :categories
end
end
4,rake db:migrate 生成 category 表。

5,在model中声明 acts_as_tree：
class Category < ActiveRecord::Base

acts_as_tree

end

6,在数据库上插入示例数据。其中几项的 parent_id 指向表中的其它记录(注：ruby下自动为数据表生成的id就是数据项的id，parent_id将会与id关联)。

7，生成试图文件 test.rhtml
控制器的生成不用介绍了吧）
hello
<% top = Category.find_by_parent_id(nil) %>
<%top.children.each do |child| %>
<%= child.parent.name + " is my parent. I am " + child.name + "<br>"%>
<% end %>
over

8，调试运行

如果你看到something valuable，那么恭喜你，你离成功仅一步之遥了。

动态目录树视图生成
在前面的基础上我们把test.rhtml的代码修改如下：
-------------------test.rhtml-----------------------------
<html>
<head>
<script type="text/javascript" src="/javascripts/xtree.js"></script>
<link type="text/css" rel='stylesheet' href="/stylesheets/xtree.css" />
<script type="text/javascript" language="javascript">
</script>
</head>
<body>
<script>
if (document.getElementById) {
<%
def revTree(node,parent)
   tree="var tree#{node.id} = new WebFXTreeItem(\"#{node.name}\");\n"
   node.children.each do|child|
      tree << revTree(child,"tree#{node.id}")
   end
   tree << parent + ".add(tree#{node.id});\n"
return tree;
end
%>
var treeroot = new WebFXTree("root");
treeroot.setBehavior('classic');
<%= revTree(Category.find_by_parent_id(nil),"treeroot")%>
document.write(treeroot);    
}
</script>
</body>
</html>

------------------------------------------------------------------
注意在数据库中插入几条数据。
运行上面的文件，你会看到一个动态的目录结构

数据库数据

分享到：
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics