当前位置: 代码迷 >> Web前端 >> 用dtree构建动态树,并用右键实现平添、修改、删除
  详细解决方案

用dtree构建动态树,并用右键实现平添、修改、删除

热度:177   发布时间:2013-09-11 16:26:28.0
用dtree构建动态树,并用右键实现添加、修改、删除
用dtree构建动态树,并用右键实现添加、修改、删除
作者:hyf1012 和javascript相关

简介:这是用dtree构建动态树,并用右键实现添加、修改、删除的详细页面,介绍了和javascript,Web综合 用dtree构建动态树,并用右键实现添加、修改、删除有关的知识、技巧、经验,和一些javascript源码等。

最近做个视频管理网站,里面涉及到动态树状菜单,用来管理视频的种类,具体的说,就是要求从数据库中读取视频种类信息,然后依次构建动态树,并通过右键可以实现添加、修改、删除(修改数据库)。任务明确了,在网上查来查去,决定用dtree来实现树,因为自己的节点规模不大,dtree足以满足需求。

第一步呢,建立数据库,我这里选用的是SQL SERVER 2005,大家可以从网上找到在dtree下add方法中共有9个参数,由于决定对后几个参数都采用默认,所以决定数据库由下面几列构成:(id,nodeId,parentId,hrefAddress,nodeName)

下面简单的介绍下各个参数:

id:int型,key,自动添加(自增)

nodeId:varchar(Max)当前节点的名称,选该类型是为了便于对节点的一些操作,后面会详述。

parentId:varchar(Max)父节点的名称

hrefAddres:varchar(Max)连接网址,不过因为重新定义了左右键动作,所以没用上

nodeName:varchar(Max)节点名称

建成如下的数据库:

id nodeId parentId hrefAddress nodeName

1 1 -1 test.jsp 根节点

2 11 1 二级目录1

3 110 11 三级目录1

4 111 11 三级目录2

5 112 11 三级目录3

6 12 1 二级目录2

7 113 12 三级目录4

8 13 1 二级目录3

9 1211 121 四级目录1

第二步呢,就是我们的JSP页面了

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<jsp:directive.page import="com.wy.dao.TypeDao"/>
<jsp:directive.page import="com.wy.model.TypeInfo"/>
<jsp:directive.page import="java.util.List"/>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=GBK">
                <link rel="StyleSheet" href="dtree.css" type="text/css" />
                <script type="text/javascript" src="dtree.js"></script>
                <title>dTree in SQL</title>
        </head>
        <body oncontextmenu=showMenu('')>
             <form name = "menuForm" action="TypeServlet" method="post">
      <!--隐藏框,用来保存选择的菜单的id值-->
      <input type = "hidden" name = "id" value = "">
               <table width="194" height="500" border="0" align="center" cellpadding="0" cellspacing="0" >
      <tr>
        <td valign="top">
          <table width="90" border="0" align="center" cellpadding="0" cellspacing="0">

            <tr>
                <td width="98" height="25" align="center"><a href="admin/user_query.jsp">   用户管理</a></td>
            </tr>
            <tr>
                <td width="98" height="25" align="center"><a href="admin/notice_manage.jsp">   公告管理</a></td>
            </tr>
                    </table>

                <div class="dtree" align="left">
                        <p>
                                <a href="javascript: d.openAll();">    打开目录</a> |
                                <a href="javascript: d.closeAll();">   关闭目录</a>
                        </p>
                        <script type="text/javascript">
<!--
                      d = new dTree('d');
                <%
                        TypeDao typeDao = new TypeDao();


                        List list= typeDao.type_query();

                        int size1=list.size();
                          for(int i= 0;i<size1;i++){
                        TypeInfo typeInfo = (TypeInfo)list.get(i);
                             %>
                                    d.add(<%=typeInfo.getNodeId()%>,<%=typeInfo.getParentId()%>,'<a href=javascript:clickMenu(<%=typeInfo.getId()%>); oncontextmenu=showMenu("<%=typeInfo.getNodeId()%>")><%=typeInfo.getNodeName()%></a>','<%=typeInfo.getHrefAddress()%>','','','','',<%=(typeInfo.getId()== 1)%>);
                                <%
                        }
                     
                             %>
                        document.write(d);
//-->
</script>
        
                </div>
          </table>
             </form>

        </body>
        <!-- 右键开始 -->
    <div id="itemMenu" style="display:none">
        <table border="1" width="100%" height="100%" bgcolor="#cccccc" style="border:thin" cellspacing="0">
            <tr>
                <td style="cursor:default;border:outset 1;" align="center" onClick="parent.create()">  新增 </td>
            </tr>
            <tr>
                <td style="cursor:default;border:outset 1;" align="center" onClick="parent.update();">  修改 </td>
            </tr>
            <tr>
                <td style="cursor:default;border:outset 1;" align="center" onClick="parent.del()">  删除 </td>
            </tr>
        </table>
    </div>
<!-- 右键结束 -->

</html>
<script language="JavaScript">
/**
*根据传入的id显示右键菜单
*/
function showMenu(id)
{
    menuForm.id.value = id;
    if("" == id)
    {
        popMenu(itemMenu,100,"000");
    }else if("1" == id) {
        popMenu(itemMenu,100,"110")
    }

    else
    {
        popMenu(itemMenu,100,"111");
    }
        event.returnValue=false;
        event.cancelBubble=true;
        return false;
}
/**
*显示弹出菜单
*menuDiv:右键菜单的内容
*width:行显示的宽度
*rowControlString:行控制字符串,0表示不显示,1表示显示,如“101”,则表示第1、3行显示,第2行不显示
*/
function popMenu(menuDiv,width,rowControlString)
{
    //创建弹出菜单
    var pop=window.createPopup();
    //设置弹出菜单的内容
    pop.document.body.innerHTML=menuDiv.innerHTML;
    var rowObjs=pop.document.body.all[0].rows;
    //获得弹出菜单的行数
    var rowCount=rowObjs.length;
    //循环设置每行的属性
    for(var i=0;i<rowObjs.length;i++)
    {
        //如果设置该行不显示,则行数减一
        var hide=rowControlString.charAt(i)!='1';
        if(hide){
            rowCount--;
        }
        //设置是否显示该行
        rowObjs[i].style.display=(hide)?"none":"";
        //设置鼠标滑入该行时的效果
        rowObjs[i].cells[0].onmouseover=function()
        {
            this.style.background="#aec3de";
            this.style.color="red";
        }
        //设置鼠标滑出该行时的效果
        rowObjs[i].cells[0].onmouseout=function(){
            this.style.background="#5cb4dd";
            this.style.color="#000000";
        }
    }
    //屏蔽菜单的菜单
    pop.document.oncontextmenu=function()
    {
            return false;
    }
    //选择右键菜单的一项后,菜单隐藏
    pop.document.onclick=function()
    {
            pop.hide();
    }
    //显示菜单
    pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body);
    return true;
}
function create()
{
    //alert("create" + menuForm.id.value + "!");
    //window.location='typename.jsp?nodeId='+menuForm.id.value+'&value=2';
    var hdc = window.open(typename.jsp?nodeId='+menuForm.id.value+'&value=2', '', 'width=322,height=206');
    width=screen.width;
    height=screen.height;
    hdc.moveTo((width-322)/2,(height-206)/2);
}
function update()
{
    //alert("update" + menuForm.id.value + "!");
    // window.location=typename.jsp?nodeId='+menuForm.id.value+'&value=3';
    var hdc = window.open(typename.jsp?nodeId='+menuForm.id.value+'&value=3', '', 'width=322,height=206');
    width=screen.width;
    height=screen.height;
    hdc.moveTo((width-322)/2,(height-206)/2);
}
function del()
{
   // alert("delete" + menuForm.id.value + "!");
     window.location=TypeServlet?nodeId='+menuForm.id.value+'&value=4';
}
function select()
{
    alert("select" + menuForm.id.value + "!");
}
function clickMenu(id)
{
   // alert(id);
   // menuForm.id.value = id;

   // alert("menuForm.id"+id);
    window.location='TypeServlet?id='+id+'&value=1';


  
}


</script>

上面的代码是我参考了不少东西得出来的,其中尤其注意生成树部分,网上的一些东西都是互相copy,搞得我一开始很是郁闷,明明有问题的代码连检查都不检查就贴过来。。。哎~~这部分代码是整个树的核心,涉及到树的生成,左右键动作的定义。其他代码我放到CSDN上了,地址:http://download.csdn.net/source/2658119,保证是目前网上最全的,里面还有些小bug,把数据库建成上面显示的样子,就应该没问题。数据库采用连接池连接,需要在META-INF\context.xml中设置数据库信息,代码经IE6.0测试通过
1 楼 xiangjun_28 2011-07-10  
试过了,挺好用,网上好多相似的代码都是骗人的,害得我搞了两三个星期,楼主这个才真正实现动态树加右键菜单。楼主人才,非常感谢!