jstree使用之二 jstree1.0使用_Ruby_编程开发_程序员俱乐部

在rails中使用jstree1.0版本，进行tree的操作，与前面的老版本有所不同：代码的编写与jquery的代码风格更加一致。调用起来也比较方便。

从建立区域的树状结构。

一、建立递归模型

表字段：

?id

?parent_region_id
?name

?creator_id

同时定义Region模型

class Region < ActiveRecord::Base
? belongs_to :parent_region,:class_name => 'Region',:foreign_key=>'parent_region_id'
? has_many :child_regions,:class_name => 'Region',:foreign_key=>'parent_region_id'

end

二、建立显示树的控制器：regions_controller.rb

创建index action显示树

def index

end

目的是调用index.html.erb

三、view代码

index.html.erb代码如下：

<link rel="stylesheet" type="text/css" href="http://static.jstree.com/layout.css" />

<script type="text/javascript" src="http://static.jstree.com/v.1.0rc/jquery.js"></script>
<link rel="canonical" href="http://www.jstree.com/documentation/core" />
<link type="text/css" rel="stylesheet" href="http://static.jstree.com/v.1.0rc/_docs/syntax/!style.css"/>
<script type="text/javascript" src="http://static.jstree.com/v.1.0rc/_docs/syntax/!script.js"></script>
<link rel="stylesheet" type="text/css" href="http://static.jstree.com/v.1.0rc/_docs/!style.css" />
<script type="text/javascript" src="http://static.jstree.com/v.1.0rc/jquery.cookie.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0rc/jquery.hotkeys.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0rc/jquery.jstree.js"></script>

<div id="demo1" class="demo">??? </div>
<script type="text/javascript">
? $(function () {
??? $.jstree._themes = "/jstree1.0/themes/"???????????????? //这里按照你自己jstree的位置进行配置，
??? $("#demo1").jstree({
????? "plugins" : [ "themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys", "contextmenu" ],??????????????????????????????????????????? //配置jstree的各种插件，呵呵，这里配全了。
????? "json_data" : {???????????????????????????????????????? //配置json_data这个插件。
??????? "ajax" : {???????????????????????????????????????????? //配置采用ajax方式获取数据
????????? "url":"/admin/regions/get_tree.json",????????????? //与远端服务器发生关系，需要明确调用远端的控制器和action，分别为regions和get_tree
????????? "data"? : function? (n) {????????????????????????? //点击节点之后，向服务器送出去的数据。这里仅仅搜出去的是树节点的id值，实际上对应的是region的id。

??????????? return { id : n.attr ? n.attr("id").replace("node_","") : false};
????????? }??????????????????
??????? }
????? }
??? })
??? .bind("create.jstree", function (e, data) {?????????? //对树绑定“创建”这个方法。
????? $.post(???????????????????????????????????????????? //采用ajax的post方法传递数据
????? "/admin/regions/create",????????????????????????? //调用后台的create action
????? {??????????????????????????????????????????????????? //定义向服务器端传送的数据。本例中传递的只有region的id和区域的名字。希望将此保存在后台的数据库中。

??????? "id" : data.rslt.parent.attr("id").replace("node_",""),?

??????? "name" : data.rslt.name

????? }
??? )
??? })
??? .bind("rename.jstree",function(e,data){????????????? //绑定重命名方法。
????? $.post(
????? "/admin/regions/update",
????? {
??????? //"operation" : "rename_node",
??????? "id" : data.rslt.obj.attr("id").replace("node_",""),
??????? "name" : data.rslt.new_name
????? },
????? function (r) {
??????? if(!r.status) {
????????? $.jstree.rollback(data.rlbk);
??????? }
????? }
??? );
??? })
??? .bind("remove.jstree", function (e, data) {??????? //绑定删除方法。
????? $.post(
????? "/admin/regions/destroy",
????? {
??????? "id" : data.rslt.obj.attr("id").replace("node_","")
????? },
????? function (r) {
??????? if(!r.status) {
????????? $.jstree.rollback(data.rlbk);
??????? }
????? }
??? );
??? })
??? ;
? });

</script>
解释：

1.前面的一些列的包括代码，按照及自己的环境进行设置；

2.在jstree1.0中，使用了完全将jstree作为一个方法对待。

3.在jstree方法中使用了各种配置手段，这可以参照jstree网站中document

4.在jstree1.0中，将json_data等都当作一个插件，我们需要做的事情就是配置插件各个参数

5.在这个案例中我们配置了json_data插件，同时配置实用ajax方式获取json数据；

6.其他解释参见代码中的解释。

?

四、后台的实现：

1.获取树

定义get_tree action

? def get_tree
??? if? params[:id] == 'false'
????? if_root = true
????? @regions = Region.find(:all,:conditions=>"parent_region_id is NULL")
????? json_data = get_region_tree_json(@regions,if_root)
??? else
????? if_root = false
????? @regions = Region.find(params[:id]).child_regions
????? json_data = get_region_tree_json(@regions,if_root)
??? end
??? #
??? respond_to do |format|
????? format.json {render :text=>json_data}
??? end
? end

这里使用了get_region_tree_json,定义为private方法

private

? def get_region_tree_json(regions,if_root)
??? json_data = String.new
??? json_data += "["
??? if if_root
????? regions.each do |region|
??????? json_data += "{\"data\":\"#{region.name}\",\"attr\":{\"id\":\"#{region.id}\"},\"state\":\"closed\"}"
??????? json_data += "," unless region == regions.last
????? end
??? else
????? regions.each do |region|
??????? json_data += "{\"data\":\"#{region.name}\",\"attr\":{\"id\":\"#{region.id}\"},\"state\":\"closed\"}"
??????? json_data += "," unless region == regions.last
????? end
??? end
??? json_data += "]"
??? return json_data
? end

这个方法对于jquery调用ajax方法。

?

2.新增、重命名、删除节点

? def create
??? @region = Region.create(:parent_region_id=>params[:id],:name=>params[:name],:creator_id=>current_user.id)

? end


? def update
??? Region.find(params[:id]).update_attributes(:name=>params[:name])
? end

? def destroy
??? region = Region.find(params[:id])
??? if region.child_regions.blank?
????? region.destroy
??? else
#呵呵这里可以写下你的提醒。
??? end
???
? end

?