用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测试通过
作者：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测试通过