jstree使用之二 jstree1.0使用

在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