dtree树案例

<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>菜单</title>
<link href="${pageContext.request.contextPath}/css/left.css" rel="stylesheet" type="text/css"/>
<link rel="StyleSheet" href="${pageContext.request.contextPath}/css/dtree.css" type="text/css" />
</head>
<body>
<table width="100" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="12"></td>
  </tr>
</table>
<table width="100%" border="0">
  <tr>
    <td>
<div class="dtree">

    <a href="javascript: d.openAll();">展开所有</a> | <a href="javascript: d.closeAll();">关闭所有</a>

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/dtree.js"></script>
    <script type="text/javascript">

        d = new dTree('d');
        d.add('01',-1,'系统菜单树');
        d.add('0102','01','分类管理','','','mainFrame');
        d.add('010201','0102','展示所有','${pageContext.request.contextPath}/adminCategory?method=findAll','','mainFrame');
        d.add('010202','0102','添加分类','${pageContext.request.contextPath}/adminCategory?method=addUI','','mainFrame');
        d.add('0104','01','商品管理');
        d.add('010401','0104','商品管理','${pageContext.request.contextPath}/adminProduct?method=findAll','','mainFrame');
        d.add('0105','01','订单管理');
        d.add('010501','0105','所有订单','${pageContext.request.contextPath}/adminOrder?method=findAllByState','','mainFrame');
        d.add('010502','0105','未支付订单','${pageContext.request.contextPath}/adminOrder?method=findAllByState&state=0','','mainFrame');
        d.add('010503','0105','已支付订单','${pageContext.request.contextPath}/adminOrder?method=findAllByState&state=1','','mainFrame');
        d.add('010504','0105','已发货订单','${pageContext.request.contextPath}/adminOrder?method=findAllByState&state=2','','mainFrame');
        d.add('010505','0105','已完成订单','${pageContext.request.contextPath}/adminOrder?method=findAllByState&state=3','','mainFrame');
        document.write(d);

    </script>
</div>  </td>
  </tr>
</table>
</body>
</html>
dtree是一个由JavaScript编写成的简单的形菜单组件,目前免费并且开源。dtree   目前有很多的形菜单组件(比如ext),dtree是一种简单易懂的js组件,不需要复杂的操作即可生产,同时支持动态从数据库引入数据。   dTree可以不用添加任何页面而直接用代码实现多个栏目,并可以实现无限分级,下面是官方介绍的优点:   - Unlimited number of levels(无限分级)   - Can be used with or without frames(可用于框架或非框架页面)   - Remembers the state of the tree between pages(在不同页面之间可记住当前状态)   - Possible to have as many trees as you like on a page(可以得到你想要数量的型)   - All major browsers suported(支持的浏览器)   Internet Explorer 5+ Netscape 6+ Opera 7+ Mozilla   - Generates XHTML 1.0 strict validated output(严格支持XHTML 1.0)   - Alternative images for each node(每个节点用图片代替) [编辑本段]创建dtree   1)从官网上下载dtree的源文件压缩包“dtree.zip”,包内包含以下几个文件:   img文件夹: 包含形菜单显示需要的图标   api.html : 作者写的dtree帮助文档   dtree.css: 形菜单的样式   dtree.js : js核心文件,代码都在其中   example01.html:形菜单实例   2)将压缩包内的文件拷贝到项目webroot下(example01.html可以不拷贝)   3)新建一个web文件(*.html、*.jsp...都可以),首先引入css和js文件:   <link rel="StyleSheet" href="dtree.css" type="text/css" />   <script type="text/javascript" src="dtree.js"></script>   然后在<body>里创建一个div层,指定class为“dtree”,此时该层就引用了dtree的样式   <div class="dtree">   <script type="text/javascript">   tree = new dTree('tree');   ......   </script>   </div>   注:具体代码可以参照example01.html   4)最后保存执行即可看到一个形菜单。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值