2007-05-03

ExtJS tree in rails

今天发现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做树型目录的那个费劲啊，哎
评论
simon_lin 2007-09-13
高！我也正想找这样的例子，可是我还是不会使用。
首先，如何配置安装 ExtJS？也就是我要参考这个例子的话，我如何在项目中做什么安装或配置？
其次，关于以上的例子，是否可以多加些这些代码在项目中的结构，也就是各个程序代码应该放在对应的什么文件夹下；

小弟初学，问得比较基础，请赐教！谢谢！
yishh 2007-08-21
有个问题，这种to_json的方式性能上会有多大的损失吗？
sp42 2007-08-21
jerry 写道
ExtJS支持UTF8吗?

没问题的
jerry 2007-08-21
ExtJS支持UTF8吗?
无明 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的运用缓存的方式还是很灵活和方便的
sp42 2007-05-22
http://www.ajaxjs.com/yuicn/article.asp?id=20070241可参考夜色兄写的一篇旧作，蛮实用的
downpour 2007-05-22
我有个权限相关方面的问题

因为一般这样的树型结构中

role和这个树结构如何比较好的结合起来

我想问一下，这个tree_id 是不是为了做权限的，大致思路能不能讲一下
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-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你能通过这个例子额外的理解嵌套集合模型和邻接表模型的作用和优缺点，我觉得收获会更大一点:)
yier 2007-05-12
又看了看，似乎和model里面的这个有关系： 
acts_as_nested_set :scope => :tree_id

改为： 
acts_as_tree :Order => ‘tree_id‘

就没有
undefined method `children'
的错误了，不过tree还是不出来，依然只有Ext Js 在那边不停的滚动着，再看看吧
yier 2007-05-11
ruby 坛子里的人好少 没有人来么

还是category.children的问题，总是报下面的错

NoMethodError in Admin/categoryController#categoryTree
undefined method `children' for #<Category:0x4a4bfd8>


还是没明白怎么作，哎
yier 2007-05-11
感谢 无明老大，学习中，
不过有两个问题还需无明老大帮忙看看：
1：ruby代码 里第17行 category.children 似乎在schema.rb里没有定义，没明白？？
2：能否给几条数据看看，我加入库的数据总不对，希望无明老大帮人帮到底，再次感谢！！！
sina2009 2007-05-04
现在正需要这个
谢了
无明
搜索本博客
存档
最新评论