dTree的使用

最新推荐文章于 2025-08-08 22:01:10 发布

shenzhen_zsw

最新推荐文章于 2025-08-08 22:01:10 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

文章标签： stylesheet import java

本文链接：https://blog.youkuaiyun.com/shenzhen_zsw/article/details/3937842

本文介绍如何使用dtree.js实现一个树形菜单，并提供了一个具体的示例代码，展示了如何创建节点和构建层级结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现属性菜单：

1.导入dtree.js 和dtee.css

<link rel="StyleSheet" href="dtree.css" type="text/css" />
 <script type="text/javascript" src="dtree.js"></script>

2.写入相应的js文件

<script type="text/javascript">
      var dtree = new dTree('dtree');
      dtree.add(0,-1,"T16班");
      dtree.add(1,0,"教师",'index.jsp');
      dtree.add(2,1,"班主任",'index.jsp');
      dtree.add(3,1,"教员");
      dtree.add(4,0,'班干部','index.jsp');
      dtree.add(5,4,'班长','index.jsp');
      dtree.add(6,4,'学委','index.jsp');
      dtree.add(7,0,'学员','index.jsp');
      dtree.add(8,7,'学员1','index.jsp');
      dtree.add(9,7,'学员2','index.jsp');
      dtree.add(10,7,'学员3','index.jsp');
      dtree.add(11,7,'学员4','index.jsp');
      dtree.add(12,7,'学员5','index.jsp');
      document.write(dtree);
 </script>

完整index.jsp页面如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>树形菜单</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page"> 
 <link rel="StyleSheet" href="dtree.css" type="text/css" />
 <script type="text/javascript" src="dtree.js"></script>
  </head>  
  <body>
    <div>
     <script type="text/javascript">
      var dtree = new dTree('dtree');
      dtree.add(0,-1,"T16班");
      dtree.add(1,0,"教师",'index.jsp');
      dtree.add(2,1,"班主任",'index.jsp');
      dtree.add(3,1,"教员");
      dtree.add(4,0,'班干部','index.jsp');
      dtree.add(5,4,'班长','index.jsp');
      dtree.add(6,4,'学委','index.jsp');
      dtree.add(7,0,'学员','index.jsp');
      dtree.add(8,7,'学员1','index.jsp');
      dtree.add(9,7,'学员2','index.jsp');
      dtree.add(10,7,'学员3','index.jsp');
      dtree.add(11,7,'学员4','index.jsp');
      dtree.add(12,7,'学员5','index.jsp');
      document.write(dtree);
     </script>
    </div>    
  </body>
</html>