Rails使用EXT Tree实现级联树

最新推荐文章于 2024-08-20 21:14:58 发布

harbey

最新推荐文章于 2024-08-20 21:14:58 发布

阅读量93

点赞数

分类专栏： ruby & rails 文章标签： EXT Rails JavaScript json CSS ViewUI

本文链接：https://blog.csdn.net/harbey/article/details/83398465

版权

ruby & rails 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先下载ext的js包,可以到http://extjs.com/下载，现在有两个版本1.0和2.0，如果下载后的包名为ext1.0或者2.0则去掉版本号，统一改成ext，方便以后写路径名称；这个ext里的资源是一个总包，如果你对这个资源包里的内容很熟悉的话，可以对资源内容进行有选择性的使用；

将改好名的ext包拷贝到项目目录/publi下，形成路径public/ext，由于ext只是一个js包，并不是rails的插件；

其他操作如下：

数据库：

DROP TABLE IF EXISTS `nested_set_items`;

CREATE TABLE `nested_set_items` (

`id` int(11) NOT NULL auto_increment,

`parent_id` int(11) default NULL,

`lft` int(11) NOT NULL default '0',

`rgt` int(11) NOT NULL default '0',

`name` varchar(100) NOT NULL default '',

PRIMARY KEY (`id`)

);

LOCK TABLES `nested_set_items` WRITE;

INSERT INTO `nested_set_items` VALUES (1,NULL,1,14,'Root');

INSERT INTO `nested_set_items` VALUES (2,1,2,7,'Child 1');

INSERT INTO `nested_set_items` VALUES (3,2,3,4,'Child 1.1');

INSERT INTO `nested_set_items` VALUES (4,2,5,6,'Child 1.2');

INSERT INTO `nested_set_items` VALUES (5,1,8,13,'Child 2');

INSERT INTO `nested_set_items` VALUES (6,5,9,10,'Child 2.1');

INSERT INTO `nested_set_items` VALUES (7,5,11,12,'Child 2.2');

UNLOCK TABLES;

控制器：

class CategoriesController < ApplicationController

def index(id = params[:node])
puts id
respond_to do |format|
format.html # render static index.html.erb
format.json { render :json => Category.find_children(id)}
end
end
end
model：

如果根据网上的demo来实现的话会出现node id不正确，id会出现类似ynode-xxx(xxx为数字)，导致程序错误；本想去修改js的，但是js内容很庞大就放弃了，从而在mode里组织node的数据，而后觉得这种形式更好一些，可以根据业务逻辑进行控制；

class Category < ActiveRecord::Base
establish_connection :localhost
acts_as_nested_set

#首先先得到树的根节点，再根据传过来的id找到根的子节点
def self.find_children(start_id = nil)
data = Array.new
if start_id.blank?
root_nodes
else
@nodes = find :all,:conditions=>"parent_id=#{start_id}"
@nodes.each { |node|

if leaf? node.id
data += [{"text" => node.name, "id" => node.id, "cls" => "folder", "leaf" => false}]
else
data += [{"text" => node.name, "id" => node.id, "cls" => "folder", "leaf" => true}]
end

}
end
return data
end

#如果parent_id为空，则为树的根节点
def self.root_nodes
find(:all, :conditions => 'parent_id IS NULL')
end

def self.leaf?(nodeid)
children = Category.find :all,:conditions=>["parent_id =?",nodeid]
if children.size > 0
return true;
else
return false;
end
end

end

视图：

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<title>Rails Ext Tree 测试</title>
<%= stylesheet_link_tag "../ext/resources/css/ext-all.css" %>
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag "../ext/adapter/prototype/ext-prototype-adapter.js" %>
<%= javascript_include_tag "../ext/ext-all.js" %>

<%= javascript_include_tag "../ext/adapter/ext/ext-base.js" %>

<%= javascript_include_tag "../ext/ext-all-debug.js" %>
</head>
<body>
<div id="category-tree" style="padding:20px"></div>
<% javascript_tag do -%>
Ext.onReady(function(){
var root = new Ext.tree.AsyncTreeNode({
text: 'EXT测试树结构ROOT',
draggable:false,
id:'1'
});

var tree = new Ext.tree.TreePanel({
animate:false,
loader: new Ext.tree.TreeLoader({
dataUrl:'/categories',
requestMethod:'GET',
baseParams:{format:'json',lib:'yui'}
}),
renderTo:'category-tree',
root: root,
rootVisible:true ,
autoScroll:true,
enableDD:false,
containerScroll: true
});

tree.on('click', function(node){
alert(node.text);
});

tree.setRootNode(root);
tree.render();
root.expand();
});

<% end -%>
</body>
</html>

harbey

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Rails使用EXT Tree实现级联树

首先下载ext的js包,可以到http://extjs.com/下载，现在有两个版本1.0和2.0，如果下载后的包名为ext1.0或者2.0则去掉版本号，统一改成ext，方便以后写路径名称；这个ext里的资源是一个总包，如果你对这个资源包里的内容很熟悉的话，可以对资源内容进行有选择性的使用；将改好名的ext包拷贝到项目目录/publi下，形成路径public/ext，由于ext只是一个js...
复制链接

扫一扫

专栏目录