|
锁定老帖子 主题：ExtJS tree in rails
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2007-05-03
今天发现ExtJS支持Prototype了(不喜欢在rails中混用prototype和yui)，赶紧去下载一个,并试验了一下tree组件，感觉还不错，考虑以后就用ExtJS了。
闲话不说了，贴代码 schema.rb
ActiveRecord::Schema.define() do
create_table "categories", :force => true do |t|
t.column "id", :int
t.column "parent_id", :int
t.column "tree_id", :int
t.column "lft", :int
t.column "rgt", :int
t.column "name", :string
t.column "description", :string
t.column "created_at",:int
end
add_index :categories, :name, :unique => true
end
接着是model:
class Category < ActiveRecord::Base
acts_as_nested_set :scope => :tree_id
def leaf?
if self.rgt - self.lft == 1
return true
else
return false
end
end
end
这里用的是Nested_set存储树，所以只需计算节点的左右值是否连续来判断叶子节点。Nested_set查询比较好用，就是插入效率差，用于目录的存储比较合适，一般目录不会频繁更新。 然后是rhtml：
<html>
<head>
<title>r</title>
<%= stylesheet_link_tag "../javascripts/ext/resources/css/ext-all.css" %>
<%= javascript_include_tag "ext/adapter/prototype/prototype.js" %>
<%= javascript_include_tag "ext/adapter/prototype/scriptaculous.js" %>
<%= javascript_include_tag "ext/adapter/prototype/effects.js" %>
<%= javascript_include_tag "ext/adapter/prototype/ext-prototype-adapter.js" %>
<%= javascript_include_tag "ext/ext-all-debug.js" %>
</head>
<body>
<%= javascript_include_tag "category_tree.js" %>
<div id="tree-div" style="border:5px solid #99bbe8; overflow:hidden; width:130px;"></div>
</body>
</html>
让页面加载时同时加载树组件，也就是那个category_tree.js：
Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;
var tree = new Tree.TreePanel('tree-div', {
animate:true,
loader: new Tree.TreeLoader({dataUrl:'http://localhost:3000/admin/category/category_tree'}), //修改这里
enableDD:true,
containerScroll: true
});
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false,
id:'source'
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
});
这个是抄ExtJS的Demo，只是改了数据源。ExtJS需要接收JSON格式的数据，我们可以在actioncontroller中提供：
class Admin::CategoryController < ApplicationController
def category_tree
categories = Category.find_by_sql("select * from categories where parent_id is null")
data = get_tree(categories,nil)
render :text=>data.to_json, :layout=>false
end
def get_tree(categories, parent)
data = Array.new
categories.each { |category|
if !category.leaf?
if data.empty?
data = [{"text" => category.name,"id" => category.id,"cls" => "folder" ,"leaf" => false,
"children" => get_tree(category.children,category) }]
else
data.concat ([{"text" => category.name,"id" => category.id,"cls" => "folder" ,"leaf" => false,
"children" => get_tree(category.children,category)}])
end
else
data.concat([{"text" => category.name,"id" => category.id,"cls" => "file","leaf" => true}])
end
}
return data
end
end
这段代码使用递归构造了一棵树，并转换成ExtJS需要的json数据返回页面。 好啦，这时用浏览器访问就能看到效果了.只是写了一点点代码，加上ExtJS，我们就有一个树型目录了，想起以前用java+xloadtree做树型目录的那个费劲啊，哎 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2007-05-04
现在正需要这个
谢了 |
| 返回顶楼 | |
|
发表时间：2007-05-11
感谢 无明老大，学习中，
不过有两个问题还需无明老大帮忙看看： 1：ruby代码 里第17行 category.children 似乎在schema.rb里没有定义，没明白？？ 2：能否给几条数据看看，我加入库的数据总不对，希望无明老大帮人帮到底，再次感谢！！！ 
|
| 返回顶楼 | |
|
发表时间：2007-05-11
ruby 坛子里的人好少
 没有人来么
还是category.children的问题，总是报下面的错 NoMethodError in Admin/categoryController#categoryTree undefined method `children' for #<Category:0x4a4bfd8> 还是没明白怎么作，哎 |
| 返回顶楼 | |
|
发表时间：2007-05-12
又看了看，似乎和model里面的这个有关系：
acts_as_nested_set :scope => :tree_id 改为： acts_as_tree :Order => ‘tree_id‘ 就没有 undefined method `children' 的错误了，不过tree还是不出来，依然只有Ext Js 在那边不停的滚动着，再看看吧
|
| 返回顶楼 | |
|
发表时间：2007-05-12
这是我的疏漏，我用了一个nested_set增强插件，没在帖子里交代清楚，不好意思：thttp://opensource.symetrie.com/trac/better_nested_set/
那个children方法就是一个增强方法。 其实你看schema也应该能猜到这个children的作用，就是取节点的直接子节点，正常的nested_set是不需要parent_id的，现在这个模型是嵌套集合模型和邻接表模型的混合，这样取直接子节点就非常简单了，只需要一个类似 select * from tables where pid = self.id这样的查询就可以了 在rails中集成extjs现在是很简单的事情了，如果yier你能通过这个例子额外的理解嵌套集合模型和邻接表模型的作用和优缺点，我觉得收获会更大一点:) |
| 返回顶楼 | |
|
发表时间：2007-05-12
非常感谢无明老大，这就看nested_set去，:)
tree已经显示出来了，原来是 js 里的 dataUrl:'http://localhost:3000/admin/category/category_tree' 的问题，奇怪的是我只是改为 dataUrl:'http://127.0.0.1:3000/admin/category/category_tree' 就好了，改为 dataUrl:'/admin/category/category_tree' 也行，不过为啥localhost不行就想不明白了，还得继续 p.s. Ext-js的效果真是一流，虽然才看了两三天，已然决定下一个项目就用它了，希望无明老大能多写写这方面的教程，再次感谢感谢
|
| 返回顶楼 | |
|
发表时间：2007-05-22
我有个权限相关方面的问题
因为一般这样的树型结构中 role和这个树结构如何比较好的结合起来 我想问一下，这个tree_id 是不是为了做权限的，大致思路能不能讲一下 |
| 返回顶楼 | |
|
发表时间：2007-05-22
http://www.ajaxjs.com/yuicn/article.asp?id=20070241可参考夜色兄写的一篇旧作，蛮实用的
|
| 返回顶楼 | |
|
发表时间：2007-05-22
downpour 写道 我有个权限相关方面的问题
因为一般这样的树型结构中 role和这个树结构如何比较好的结合起来 我想问一下，这个tree_id 是不是为了做权限的，大致思路能不能讲一下 tree_id这个字段不是用来区分权限的，是better_nested_set的一个可选参数，用于标示单独一颗树。比如，水果类的目录树的tree_id是1，饮料类的目录树的tree_id是2。better_nested_set还是很好用的，增强了标准的act_as_nested_set，多了一些实用的方法，推荐在需要用到nested_set的场合使用。 安全问题我是这么考虑的，我并不希望把树做的很复杂，只把它当作一个单纯的表示组件。因此我会根据用户的权限，在actioncontroller中计算好需要显示的节点值再交给extjs去渲染。在category_tree.js中，我可以加一段代码：
tree.on('click', function(node){
handle_click(node.id,node.text)
});
在引用这个js的rhtml中实现handle_click(node.id,node.text)，通过ajax去执行相应的role，大概会是这样的形式:
<script>
function handle_click(node_id,node_text){
new Ajax.Updater('your-div', 'your-acrtion/'+node_id, {asynchronous:true, evalScripts:true}); return false;
}
</script>
这样tree这边只是保存了一些关键参数，基本上所有的逻辑都是保留在action中 对于tree的构造么，我是不想做成ajax方式，一方面这类东西的数据量不会很大，另一方面，变化很少，还不如一次取出来，然后缓存起来。rails的运用缓存的方式还是很灵活和方便的 |
| 返回顶楼 | |
