用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测试通过
分享到：
相关推荐
在实现dtree动态树和JavaScript右键菜单的过程中，主要涉及以下几个步骤： 1. **下载dtree控件**：可以从指定的网址获取dtree的源码文件，包括js、css和示例文件。 2. **部署文件**：将下载的文件按照一定的目录...
dtree动态树 Javascript右键菜单
在这个场景中，提到的"dtree支持动态添加、删除节点"意味着该决策树实现允许在构建过程中或构建完成后，对决策树的结构进行修改，即增加或移除节点。这种特性对于处理不断变化的数据集或者需要实时更新模型的情况...
本文将深入探讨如何使用DTREE构建树菜单，包括动态树和静态树的构建方法。 首先，让我们理解决策树的基本概念。决策树是由节点和边构成的图形结构，其中每个内部节点代表一个特征或属性测试，每个分支代表一个测试...
在这个场景中，"Dtree动态树菜单"是一个专门用于实现这种功能的工具或库。下面我们将深入探讨Dtree动态树菜单的相关知识点。 1. **Dtree介绍**： Dtree通常是一个JavaScript库或者框架的一部分，用于构建可扩展的...
而添加了鼠标右键功能后，用户可以直接在显示的目录树上进行快捷操作，如打开、复制、移动、删除文件或目录，大大提高了工作效率。 dtree的使用方法一般包括以下步骤： 1. **安装**：首先需要在你的操作系统中安装...
5. **节点操作**：dtree支持添加、删除和编辑节点，这对于动态管理树结构非常有用。这些操作可以通过事件监听和API接口实现，如点击节点时弹出编辑窗口，或在后台处理节点更改。 6. **节点拖放**：拖放功能允许用户...
【dtree实现的树支持多选】是一种在网页交互中常用的数据展示和操作方式，尤其在数据层级结构复杂时，如文件系统、组织结构或菜单导航等场景。DTree（通常指的是JavaScript实现的树形控件）允许用户通过勾选节点来...
在这个话题中，我们将深入探讨三种特定的树形结构实现：原始dtree、右键dtree以及复选框dtree，这些都是在JavaScript环境下用于创建交互式树形菜单的工具。 首先，原始dtree是最基础的形式，它通常基于HTML、CSS和...
【dtree带漂亮的右键菜单】是一个关于网页端文件管理或者数据展示的开发主题，它涉及到JavaScript库dtree的应用以及自定义右键菜单的实现。dtree是一款常用于构建交互式树状结构的JavaScript库，它能够帮助开发者...
本人这段时间正巧要做一个省市县的树状结构图，公司之前用的dtree实现起来效率太低，半天打不开页面，于是考虑用jquery动态加载，通过网上查资料，学习别人的列子，现将本人所整理的树状结构实例上传。测试数据库为...
这个实例着重展示了如何利用jQuery dTree动态地构建一个无限层级的树形菜单，并实现基本的数据操作功能，包括添加、删除、修改和查询。下面我们将深入探讨这个主题。 首先，jQuery dTree是一个轻量级的插件，它基于...
【dtree+jquery动态生成树】是一个用于创建交互式树形结构的JavaScript库，结合了jQuery框架的强大功能，使得在网页上动态展示层次结构数据变得简单。本实例着重于实现菜单树的生成，这对于构建多级导航系统尤其有用...
本文将详细介绍如何使用 dtree 来实现带有右键菜单和复选框功能的树形结构。 #### 二、dtree基本用法 为了更好地理解 dtree 的工作原理，我们首先通过官方示例来了解其基础配置和用法： 1. **引入 CSS 和 ...
2. **生成菜单**：当用户右键点击节点时，动态创建一个包含多个选项的HTML菜单，每个选项对应一个操作，如“编辑”、“删除”、“添加子节点”等。 3. **定位菜单**：确保菜单出现在鼠标点击的位置，可以使用`event....
"dtree"通常指的是一个JavaScript实现的树形控件，它用于展示层次结构的数据，常用于网站导航、文件系统管理等场景。本项目着重介绍了如何在dtree中集成右键弹出事件，以便在用户点击右键时显示自定义的上下文菜单。...
本主题聚焦于使用dtree与jQuery库动态实现无限层级的树形菜单，并涵盖增删改查的基本功能。dtree是一款基于jQuery的插件，它提供了丰富的API和灵活的配置选项，使得在网页上创建交互式树形菜单变得简单易行。 首先...
DTree动态展示树形菜单.rar ...本工程使用dTree组件实现树形菜单的展示 有静态树形菜单和动态(从数据库获取数据)树形菜单展示两种 数据库连接采用简单的类实现 数据位MySQL(5.0.21),数据库创建脚本为dtree.sql