使用rails生成ajax动态装载树型组件

 当你需要采用动态树型视图的时候，你会自然的使用xloadtree(主页:http://webfx.eae.net/dhtml/xloadtree/xloadtree.html)，那么在rails中如何
使用xloadtree呢,我这里有一些经过测试的步骤，提供给大家参考:

1.下载xtree2
下载地址:http://webfx.eae.net/dhtml/xtree2b/
下载文件:js/xtree2.js,js/xloadtree2.js,css/xtree2.css,以及images/*.*
然后，把xtree2.js,xloadtree2.js放置在你的项目的public/javascripts目录中，把xtree2.css放在public/stylesheets目录中,把所有的图片文件放置在你的项目的public/images目录中


2.修改本地的xtree2
a.把本地的xtree2.js,xloadtree2.js,xtree2.css文件中的"images/"字串，全部替换成"/images/"字串

b.把xtree2.js中的配置usePersistence: true改成usePersistence: false

3.编写rxml
为了让rails产生xml文档，你需要编写rxml视图，我这里有个简单的例子可供你参考,当然你可以写的更动态一点,但那是以后的事，先跑起来再说
[tree.rmxl]

#记得写这一行
xml.instruct!
xml.tree do
  xml.tree(:text=>"我爱中国") do
    xml.tree(:text=>"2")
    xml.tree(:text=>"3")
  end
  xml.tree(:text=>"中国爱我")
  xml.tree(:text=>"5")
  xml.tree(:text=>"6")
end

 

4.修改输出xml的Controller里的action
我这里Controller叫做IndustryAdminController,action方法叫tree,自然，我的rxml也叫tree.rxml

def tree
    @headers['Content-Type'] = 'text/xml; character=utf-8'
    #@top_industries=Industry.find(:all,:conditions=>"parent_id is null",:order=>"hot_value")
    xml=render_to_string(:layout=>false)
    #puts xml;
    send_data(xml,:type=>"text/xml")
 end

 

  注意:这里只能使用render_to_string和send_data，而不能只是简单的render(:layout=>false),因为xloadtree需要的是个xml文件，而不是
一个渲染后的效果。

5.测试一下

写到这里的时候，也许你需要测试一下rails生成的xml是否正确，打开FF/IE，输入网址http://localhost: 3000/industry_admin/tree.xml(你自己的需要酌情修改)，如果browser出现下载xml文件的对话框，恭喜你， rails已经正确的输出了xml文件。

6.最后一步,生成dynamic load tree
a.在你需要输出树型菜单的rhtml文件头中加上以下2行(次序不能颠倒)

<%= javascript_include_tag "xtree2"%>
<%= javascript_include_tag "xloadtree2"%>

 

b.在你需要输出tree的地方加上如下代码(我这里是在td中输出)

<td>
                <script type="text/javascript">
                    var tree = new WebFXLoadTree("Cool Tree", "/industry_admin/tree");//你自己的url请酌情修改
                    tree.write();
                </script>
</td>

 

接下来，我想你可以把你的项目经理叫过来，给他秀一下使用ajax技术生成的动态树型组件了，也许他会夸张地说"amazing，so cool!"

7.接下来...
接下来就需要你修改controller,rxml，把数据改成动态的啦