`

动态实现树形菜单(使用dtree控件)

阅读更多

动态生成树型菜单

数据库脚本:

use master
go
if exists (select * from sysdatabases where name = 'tree')
 drop database tree
go
create database tree
on
(
  Name = 'tree_data',                  --主数据文件的逻辑名称 
    FileName = 'D:/tree_data.mdf'--数据文件的物理名称 
    Size = 5Mb,                         -- 主数据文件的初始大小 
    FileGrowth = 20%                    --主数据文件增长率 
)
log on
(
 Name = 'tree_log'
    FileName = 'd:/tree_log.ldf'
    Size = 3Mb, 
    FileGrowth = 10%
)
go
if exists (select * from sysobjects where name = 'dtree')
 drop table dtree
go
use tree
go
/*--- 创建节点表 ---*/
create table dtree
(
 id varchar(20) ,     --节点编号
 pid varchar(20) ,     --父节点
 [name] varchar(20),     --节点名称
 url varchar(20),     --连接地址
 title varchar(20),     --节点描述
 target varchar(20),     --Target
 icon varchar(20),     --图标
 iconOpen varchar(20),    --展开状态下的图标路径 
 [open] varchar(20)     --是否展开
)
/*--- 初始化测试数据 ---*/
insert into  dtree values('0','-1','T16班','index.jsp','blank','','','','')
insert into  dtree values('1','0','教师','index.jsp','blank','','','','')
insert into  dtree values('2','0','班干部','index.jsp','blank','','','','')
insert into  dtree values('3','0','组长','index.jsp','blank','','','','')
insert into  dtree values('4','0','学员','index.jsp','blank','','','','')
insert into  dtree values('5','1','班主任','index.jsp','blank','','','','')
insert into  dtree values('6','1','教员','index.jsp','blank','','','','')
insert into  dtree values('7','2','班长','index.jsp','blank','','','','')
insert into  dtree values('8','2','学委','index.jsp','blank','','','','')
insert into  dtree values('9','4','学员1','index.jsp','blank','','','','')
insert into  dtree values('10','4','学员2','index.jsp','blank','','','','')
insert into  dtree values('11','4','学员3','index.jsp','blank','','','','')
insert into  dtree values('12','4','学员4','index.jsp','blank','','','','')
insert into  dtree values('13','4','学员5','index.jsp','blank','','','','')
insert into  dtree values('14','4','学员6','index.jsp','blank','','','','')
insert into  dtree values('15','4','学员7','index.jsp','blank','','','','')
insert into  dtree values('16','4','学员8','index.jsp','blank','','','','')
insert into  dtree values('17','4','学员9','index.jsp','blank','','','','')
insert into  dtree values('18','4','学员10','index.jsp','blank','','','','')
insert into  dtree values('19','4','学员11','index.jsp','blank','','','','')
insert into  dtree values('20','4','学员12','index.jsp','blank','','','','')
insert into  dtree values('21','4','学员13','index.jsp','blank','','','','')
insert into  dtree values('22','4','学员14','index.jsp','blank','','','','')
insert into  dtree values('23','4','学员15','index.jsp','blank','','','','')
select id,pid,[name],url,title,target,icon,iconOpen,[openfrom dtree

客户端代码 index.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@page import="com.zsw.biz.TreeNodeBiz;"%>
<!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>
     <%
      TreeNodeBiz tnb = new TreeNodeBiz();  
     %
>
     <script type="text/javascript">
      d = <%= tnb.getList("dtree") %>
      document.write(d);
     </script>
    </div>    
  </body>
</html>

转换成节点数据转换成js文件 关键代码:

  if(list==null || list.size() == 0){
   System.out.println("没有节点");
   return "";
  }
  
  StringBuffer contents = new StringBuffer();
  contents.append("dtree = new dTree('"+dtree+"');");
  
  for(TreeNode tn : list){   
   contents.append("/n");
   contents.append(dtree+".add('");
   contents.append(tn.getId());
   contents.append("','");
   contents.append(tn.getPid());
   contents.append("','");
   contents.append(tn.getName());
   contents.append("','");
   contents.append(tn.getUrl());
   contents.append("','");
   contents.append(tn.getTitle());
   contents.append("','");
   contents.append(tn.getTarget());
   contents.append("','");
   contents.append(tn.getIcon());
   contents.append("','");
   contents.append(tn.getIconOpen());
   contents.append("','");
   contents.append(tn.getOpen());
   contents.append("');"); 
   contents.append("/n");   
  }

客户端的代码:

需要导入:dtree.js 和dtree.css

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@page import="com.zsw.biz.TreeNodeBiz;"%>
<!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>
  <p><a href="javascript: d.openAll();">全部展开</a> |
   <a href="javascript: d.closeAll();">全部关闭</a>
  </p>   
    <div>
     <%
      TreeNodeBiz tnb = new TreeNodeBiz();  
     %>
     <script type="text/javascript">
      d = <%= tnb.getList("dtree") %>
      document.write(d);
     </script>
    </div>    
  </body>
</html>
分享到:
评论

相关推荐

    DTree较好的树形菜单js控件

    非常好用的dtree控件,用于生成树形菜单,方便控制和提交,包括一个简单的说明

    DTree(最好用的JS写成的树形菜单控件.内含API)

    DTree(最好用的JS写成的树形菜单控件.内含API)

    JavaScript树形菜单控件

    树形菜单控件,支持无限分级,可以在同一个页面中放置多个dTree,可以为每个节点指定不同的图标。适合学习和企业开发

    树形控件 dtree

    dtree是一个由JavaScript编写成的简单的树形菜单组件,目前免费并且开源。

    dtree树形菜单范例.rar

    dtree树形菜单范例,可以支持很多级子节点的树叉菜单插件,Dtree貌似也是挺有名的吧,自带演示实例,新手也可轻松上手,可把本款菜单应用于网站后台、用户中心等。

    dtree树型控件(纯js)

     目前有很多的树形菜单组件(比如ext),dtree是一种简单易懂的js组件,不需要复杂的操作即可生产,同时支持动态从数据库引入数据。  dTree可以不用添加任何页面而直接用代码实现多个栏目,并可以实现无限分级,下面...

    javascript-tree控件集合 大部分JS树形菜单控件 精心收集

    包含:dtree、无限级树状菜单、struts+hibernate树形菜单、treeview、xmltree、dhtmltree等等 几十个树状菜单 这回不用费劲找了吧。。。。。

    多种树形菜单

    dTree是一个易于使用的JavaScript树形菜单控件。支持无限分级,可以在同一个页面中放置多个dTree,可以为每个节点指定不同的图标。

    js dtree无限级扩展的树形菜单.rar

    js dtree无限级扩展的树形菜单,核心 基于dree菜单插件,自带有api说明,整体菜单风格经典,带有 -号风格的经典树形菜单控件,十分漂亮的家长,通用性强,文件完整,具体效果请参见测试截图。

    VC 结合ADO实现数据库版的DTree树叉菜单.rar

    VC 结合ADO实现数据库版的DTree树叉菜单,这是一个与数据库相结合的树形菜单效果,在使用ADO技术时,需要导入一个ADO动态链接库msado15.dll,该动态库位于系统盘下的“Program Files\Common Files\System\ado\”目录...

    asp.net 无限递归树型菜单... 采用dTree封装的自定义控件

    2005的同志们如下使用 bin目录 找到dll,添加dll 引用后 工具栏会出现RecursiveTree该控件 拖进aspx 页面即可... 后台需要写2句代码 this.RecursiveTree1.Dataset = GetList(""); this.RecursiveTree1....

    菜单管理dtree,dbox

    菜单控件开发,多种菜单样式,树形结构菜单显示

    javascript--dtree

    很好用的javascript树结构工具 dTree是一个易于使用的JavaScript树形菜单控件。支持无限分级,可以在同一个页面中放置多个dTree,可以为每个节点指定不同的图标。

    JS dTree的使用

    这里是一个经过改装后的JS树形控件,可以直接拿来用的,不用再去分析里面的关系,只要你做查询权限遍历的工作了,至于现实这里有的。好的资源,大家一起分享了。如果你想进一步修改,这里还有DTree的API可以参考哦,...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    打包50种实例的大型树形菜单控件JSTree(基于jQuery)下载 30.打包两款实用jquery+div横向滑动的下滑菜单代码(兼容性好)下载 31.非常帅jquery仿雅虎网超大菜单导航代码 32.分享jquery带阴影效果折叠菜单dropdown...

    java源码包---java 源码 大量 实例

    1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context…… ftp文件传输 2个目标文件,FTP的目标是:(1)提高...

    java源码包2

    1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context…… ftp文件传输 2个目标文件,FTP的目标是:(1)提高...

    java源码包3

    1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context…… ftp文件传输 2个目标文件,FTP的目标是:(1)提高...

    java源码包4

    1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context…… ftp文件传输 2个目标文件,FTP的目标是:(1)提高...

    JAVA上百实例源码以及开源项目源代码

    1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context…… ftp文件传输 2个目标文件,FTP的目标是:(1)提高...

Global site tag (gtag.js) - Google Analytics