Dtree+Jquery动态生成树节点.

zhangrong108

浏览: 206619 次
性别:
来自: 深圳

最近访客更多访客>>

此为名字

zhenghaozh

y476414465

weixiao_email

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery CSS Ajax XML JSP

1.先来介绍一下. dtree 的用法.(我引用了以前我收集的一篇文章.还比较详细,出处不记得啦).文章下面会附带dtree用法的例子.

         Dtree目录树的总结

                  一：函数

                           1：页面中

                              tree.add(id,pid,name,url,title,target,icon,iconOpen,open);

                                  参数说明：

                                              id         ：节点自身的id

                                              pid       ：节点的父节点的id

                                              name    ：节点显示在页面上的名称

                                              url        ：节点的链接地址

                                              title      ：鼠标放在节点上所出现的提示信息

                                              target   ：节点链接所打开的目标frame(如框架目标mainFrame,_blank,_self 类)

                                              icon      ：节点关闭时的显示图片的路径

                                              iconOpen：节点打开时的显示图片的路径

                                              open    ：布尔型，节点是否打开（默认为false）

                                             注：open项：顶级节点一般采用true，即pid是－1的节点

                            2：dtree.js文件中

                                             约87－113行是一些默认图片的路径，注意要指对。

二：页面中的书写

          1：默认值的书写规则（从左至右，依次省略）

                          即 tree.add(id,pid,name,url);后面5个参数可以省略

          2：有间隔时的默认值（如存在第6个参数，但第5个参数想用默认值）

                         即 tree.add(id,pid,name,url,"",target);必须这样写

         3：样式表

           （1）：可以将dtree.css中的样式附加到你的应用中的主css中，如a.css

           （2）：也可以同时引用dtree.css与a.css两个文件，但前提条件是两个css文件中不能有重复的样式

       4：页面代码书写的位置是：一般写在表格的td之中

说明：这是静态的代码，动态的可用循环加入。其他 tree.add(id,pid,name,url,"","","","",true);

     不罗嗦啦..上面的只是让你大概了解一下.dtree怎么用.

    dtree+JQuery动态生成树.思路其实很简单... 首先把树的节点信息存储到数据库,然后在servlet或jsp中获取数据库表中的数据,把这些信息写成在xml文件中.然后界面jsp页面通过JQuery实现对改servlet的请求.并且回调方法中接受xml数据对象.并且遍历xml文件,取得xml文件中的节点的属性或文本数据.再循环的对dtree添加节点.。

5. 将dtree.js 和dtree.css，jquery.js, img文件夹.放在WebRoot下面.(工程的根目录)

6. 编写我们的tree.jsp页面.

Java代码

<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>树形结构___ajax请求方式</title>
<script type="text/javascript" src="dtree.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="dtree.css" type="text/css"></link>
<script type="text/javascript">
   tree = new dTree('tree');//创建一个对象.
   $.ajax({
    <A href="'NodesPrint'">url:'NodesPrint'</A>,
    type:'post', //数据发送方式
    dataType:'xml', //接受数据格式
    error:function(json){
             alert( "not lived!");
       },
    async: false ,//同步方式
    success: function(xml){
         $(xml).find("node").each(function(){
        var nodeId=$(this).attr("nodeId");
         var parentId=$(this).attr("parentId");
        var hrefAddress=$(this).attr("hrefAddress");
        var nodeName=$(this).text();
        tree.add(nodeId,parentId,nodeName,hrefAddress,"","","","",false);
                        });
           }
     });
        document.write(tree);
</script>
</head>
<body>
</body>
</html>   连接地址：http://www.iteye.com/topic/350056

JSON_JQURY生成树.rar (255.1 KB)
下载次数: 276

0
顶

0
踩

分享到：

javascript 事件大全 | MyEclipse 6.* 汉化步骤

2010-03-17 15:22
浏览 2411
评论(0)
分类:编程语言
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论