jstree使用之一 jstree0.99使用

s8186255

浏览: 87785 次
性别:
来自: 新疆乌鲁木齐

最近访客更多访客>>

u012363178

hotsunshine

lyl867708794

任清宇

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

json jQuery Ajax Rails JavaScript

递归模型的前端展示将不可避免的使用到tree的结构，几番对照之后，发现tree_view似乎已经不再更新。jstree这个俄国人设计的jquery插件却生命力十足，活力四射。所以就选择这个插件进行研究。

1.搭建一个jstree的测试环境

后台使用rails，在public下创建一个目录jstree，然后将下载的jstree包中的相关内容拷贝到这个目录中：

/jstree下包含：jstree.js,jquery.js

/jstree/images:这里包含显示用的图片

/jstree/themes:这里包含各类主题，如checkbox。

这里用的版本是0.99版本（jstree版本与5月25日刚升级到1.0rc版本，变化较大，不过思路可以参考这篇文档，以后，将1.0的使用说明继续在博客中记录）

jquery的版本使用的是1.3.2，使用1.4.1好像有问题，子树不能正常显示。

2.明确目标

使用jstree插件，采用json格式，使用ajax从rails后台获取动态的子树。

前端代码：

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jsTree » Demo » Async HTML</title>
    <meta name="title" content="jsTree - jQuery tree plugin - Async HTML Demo" />
        

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.tree.js"></script>
    <link rel="stylesheet" type="text/css" href="/jstest/themes/default/style.css" />
</head>
<body class="nosidebar" >
    <div id="container">
      <script type="text/javascript" >
        var stat =    [
          { data : "Node 1",attributes : { "id" : "node_1" } },
          { attributes : { "id" : "node_2" }, data : "Node 2", state : "open"},
          { attributes : { "id" : "node_3" }, data : "Node 3", state : "closed"}
        ];
        $(function () {
          $.ajaxSetup({cache:false});//ajax 调用不使用缓存
          $("#async_json_1").tree({

            data : {
              type : "json",
              async : true,
              opts : {
                method : "GET",
                url : "/ceshi/json_test.json"
              }
            },
            lang:{
              loading:"加载中……" //在用户等待数据渲染的时候给出的提示内容，默认为loading
            },
            ui:{
              theme_name:'classic' //设置样式
//             theme_name : "checkbox"
            },
            callback : {
              // Make sure static is not used once the tree has loaded for the first time
              onload : function (t) {
                t.settings.data.opts.static = false;//让初始化数据只使用第一次
              },
              //n-- 节点，t是tree
              beforedata : function (n, t) {
                if(n == false)
                  t.settings.data.opts.static = stat;
                else
                  return {parent_id : $(n).attr("id") || false} // AJAX 调用参数传递
              },
              oncreate :function(n,t){

              }
            },
            //插件使用右键菜单支持自定义右键菜单
            plugins:{
              contextmenu:{}
//            checkbox : {three_state : false }

            },
            rules:{multiple:"false"}

          });
        });
      </script>
      <div class="demo" id="async_json_1"></div>
    </div>

</body>
</html>

解释如下：

1.javascript定义部分

        var stat =    [
          { data : "Node 1",attributes : { "id" : "node_1" } },
          { attributes : { "id" : "node_2" }, data : "Node 2", state : "open"},
          { attributes : { "id" : "node_3" }, data : "Node 3", state : "closed"}
        ];

定义了初始化的树；

同时在beforedata中进行了定义：

beforedata : function (n, t) {
if(n == false)
t.settings.data.opts.static = stat;
...

}

这里使用t.settings.data.opts.static = stat，将树进行初始化。

注：代码借鉴jstree中demo和互联网上的资料。

2.数据准备中，配置ajax

            data : {
              type : "json",
              async : true,
              opts : {
                method : "GET",
                url : "/ceshi/json_test.json"
              }
            }

使用get方式从后台获取json数据

3.准备get方式客户端发送到服务器端的数据：仍然在beforedata中进行配置

              beforedata : function (n, t) {
                if(n == false)
                  t.settings.data.opts.static = stat;
                else
                  return {parent_id : $(n).attr("id") || false} // AJAX 调用参数传递
              }

这里使用return {parent_id : $(n).attr("id") || false}为get方法准备数据

后台rails代码

创建ceshi控制器，同时建立一个json_test.json action,代码如下：

class CeshiController < ApplicationController
def json_test
#    if params[:parent_id] == "node_3"
      data = "[{data:\"node_1\",attributes:{id:5},state:\"closed\"},
              {data:\"node_1\",attributes:{id:6},state:\"closed\"}
              ]"
      respond_to do |format|
        format.json {render :text=>data}
      end
#   end
end
end

解释：

1.外层if语句，为了检测客户端发出的参数是否准确；

2.创建一个data变量，它是一个字符串，是json格式，满足jstree的格式需求。

data

attributes:{id:5} //这里的id:5就是将要从用户点击树节点，要送出去的值。我们在后台可以将这个值与后台的数据库中的某个值进行对应，从而获取一个子树对应的数组，并将这个数组，变为json格式的数据，送到客户端，客户端的jstree控件进行识别，并画出子树。

3.按照这种方式也可以使用xml格式。

存在的问题：

目前只是将树可以展现出来，也就是完成了tree的read，另外create、update、delete尚未完成。看了jstree的1.0版本（变化非常大），这一块的工作似乎非常容易完成。

待续。。。近日将使用jstree的1.0版本，将心得继续放送。

3
顶

2
踩

分享到：

jstree使用之二 jstree1.0使用 | 郁闷的我只好采用monit监测mongrel cluste ...

2010-05-26 11:23
浏览 6496
评论(1)
分类:Web前端
查看更多

1 楼 ihibernate 2010-06-21

如果要是传多个参数，这里beforedata该怎么写？

callback : {
beforedata : function(node,tree_obj){
alert($(node).attr("id") + " " + $(node).attr("type"));
return {type : $(node).attr("type"),id : $(node).attr("id") || 0 }; //设置get方式传哪些参数 AJAX 调用参数传递
}
}

请问这里的return 里能这样些么？
在IE6下我的参树只能传那个ID值，type却不能传？
请问是什么原因

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论