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

2024-01-05 14:32

本文主要是介绍用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 οncοntextmenu=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()%>); οncοntextmenu=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].οnmοuseοver=function()
{
this.style.background="#aec3de";
this.style.color="red";
}
//设置鼠标滑出该行时的效果
rowObjs[i].cells[0].οnmοuseοut=function(){
this.style.background="#5cb4dd";
this.style.color="#000000";
}
}
//屏蔽菜单的菜单
pop.document.οncοntextmenu=function()
{
return false;
}
//选择右键菜单的一项后,菜单隐藏
pop.document.οnclick=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构建动态树,并用右键实现添加、修改、删除的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/573189

相关文章

Java+AI驱动实现PDF文件数据提取与解析

《Java+AI驱动实现PDF文件数据提取与解析》本文将和大家分享一套基于AI的体检报告智能评估方案,详细介绍从PDF上传、内容提取到AI分析、数据存储的全流程自动化实现方法,感兴趣的可以了解下... 目录一、核心流程:从上传到评估的完整链路二、第一步:解析 PDF,提取体检报告内容1. 引入依赖2. 封装

Java实现复杂查询优化的7个技巧小结

《Java实现复杂查询优化的7个技巧小结》在Java项目中,复杂查询是开发者面临的“硬骨头”,本文将通过7个实战技巧,结合代码示例和性能对比,手把手教你如何让复杂查询变得优雅,大家可以根据需求进行选择... 目录一、复杂查询的痛点:为何你的代码“又臭又长”1.1冗余变量与中间状态1.2重复查询与性能陷阱1.

python 线程池顺序执行的方法实现

《python线程池顺序执行的方法实现》在Python中,线程池默认是并发执行任务的,但若需要实现任务的顺序执行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋... 目录方案一:强制单线程(伪顺序执行)方案二:按提交顺序获取结果方案三:任务间依赖控制方案四:队列顺序消

Redis实现分布式锁全过程

《Redis实现分布式锁全过程》文章介绍Redis实现分布式锁的方法,包括使用SETNX和EXPIRE命令确保互斥性与防死锁,Redisson客户端提供的便捷接口,以及Redlock算法通过多节点共识... 目录Redis实现分布式锁1. 分布式锁的基本原理2. 使用 Redis 实现分布式锁2.1 获取锁

Linux实现查看某一端口是否开放

《Linux实现查看某一端口是否开放》文章介绍了三种检查端口6379是否开放的方法:通过lsof查看进程占用,用netstat区分TCP/UDP监听状态,以及用telnet测试远程连接可达性... 目录1、使用lsof 命令来查看端口是否开放2、使用netstat 命令来查看端口是否开放3、使用telnet

使用SpringBoot+InfluxDB实现高效数据存储与查询

《使用SpringBoot+InfluxDB实现高效数据存储与查询》InfluxDB是一个开源的时间序列数据库,特别适合处理带有时间戳的监控数据、指标数据等,下面详细介绍如何在SpringBoot项目... 目录1、项目介绍2、 InfluxDB 介绍3、Spring Boot 配置 InfluxDB4、I

基于Java和FFmpeg实现视频压缩和剪辑功能

《基于Java和FFmpeg实现视频压缩和剪辑功能》在视频处理开发中,压缩和剪辑是常见的需求,本文将介绍如何使用Java结合FFmpeg实现视频压缩和剪辑功能,同时去除数据库操作,仅专注于视频处理,需... 目录引言1. 环境准备1.1 项目依赖1.2 安装 FFmpeg2. 视频压缩功能实现2.1 主要功

使用Python实现无损放大图片功能

《使用Python实现无损放大图片功能》本文介绍了如何使用Python的Pillow库进行无损图片放大,区分了JPEG和PNG格式在放大过程中的特点,并给出了示例代码,JPEG格式可能受压缩影响,需先... 目录一、什么是无损放大?二、实现方法步骤1:读取图片步骤2:无损放大图片步骤3:保存图片三、示php

使用Python实现一个简易计算器的新手指南

《使用Python实现一个简易计算器的新手指南》计算器是编程入门的经典项目,它涵盖了变量、输入输出、条件判断等核心编程概念,通过这个小项目,可以快速掌握Python的基础语法,并为后续更复杂的项目打下... 目录准备工作基础概念解析分步实现计算器第一步:获取用户输入第二步:实现基本运算第三步:显示计算结果进

Python多线程实现大文件快速下载的代码实现

《Python多线程实现大文件快速下载的代码实现》在互联网时代,文件下载是日常操作之一,尤其是大文件,然而,网络条件不稳定或带宽有限时,下载速度会变得很慢,本文将介绍如何使用Python实现多线程下载... 目录引言一、多线程下载原理二、python实现多线程下载代码说明:三、实战案例四、注意事项五、总结引