步骤1:官网下载dtree.zip包,官网地址:http://destroydrop.com/javascripts/tree/,文件包括dtree.css,dtree.js和api.html和例子;

步骤2:根据example01.html代码修改自己需要的菜单,示例代码如下:

<span style="font-size:14px;"><span style="white-space: pre;">	</span><script type="text/javascript">
<!-- d = new dTree('d'); d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom\'s birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif'); document.write(d); //-->
</script></span>

步骤3:运行效果图如下:

步骤4:要修改或添加图标,可以修改dtree.js代码,如下这段就是图标设置。

	this.icon = {

		root				: 'img/base.gif',

		folder			: 'img/folder.gif',

		folderOpen	: 'img/folderopen.gif',

		node				: 'img/page.gif',

		empty				: 'img/empty.gif',

		line				: 'img/line.gif',

		join				: 'img/join.gif',

		joinBottom	: 'img/joinbottom.gif',

		plus				: 'img/plus.gif',

		plusBottom	: 'img/plusbottom.gif',

		minus				: 'img/minus.gif',

		minusBottom	: 'img/minusbottom.gif',

		nlPlus			: 'img/nolines_plus.gif',

		nlMinus			: 'img/nolines_minus.gif'

	};

注意:树形结构根节点的父id必须为-1,如果要设置其他值请修改dtree.js。

dtree加载菜单基本使用方法的更多相关文章

  1. [Q]手动加载菜单方法

    一般情况下,安装程序会自动安装依云软件菜单,但可能由于某些原因未能自动安装的话,您可以手动加载菜单,步骤如下: 在AoutCAD命令行输入"CUILOAD",会弹出"加载 ...

  2. C#遍历XML文件动态加载菜单

    通过遍历XML文件动态加载菜单,顺便利用WebBrowser控件实现一个简单的桌面浏览器 效果如下: 代码如下: XMLFile1.xml <?xml version="1.0&quo ...

  3. 实战android菜单项之XML加载菜单与动态菜单项[转]

    原文地址:http://blog.csdn.net/kaiwii/article/details/7767225 自定义android应用程序的菜单项首先要知道切入点.经过学习,知道主要是两个Acti ...

  4. Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

  5. Vue + Element UI 实现权限管理系统(动态加载菜单)

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

  6. 在mvc中动态加载菜单

    最近做了一个项目, 要在客户端动态的显示菜单,也就是这些菜单是保存在数据库中的, 在客户端动态加载菜单,这样做的好处很明显,就是菜单很容易修改,直接在后台进行维护,再也不会直接在前面的 视图页面中进行 ...

  7. Excel催化剂开源第7波-VSTO开发中Ribbon动态加载菜单

    在VS开发环境中,特别是VSTO的开发,微软已经现成地给开发者准备了设计器模式的功能区开发,相对传统的VBA.ExcelDna和其他方式的COM加载项开发来说,不需要手写xml功能区,直接类似拖拉窗体 ...

  8. c#动态加载卸载DLL的方法

    这篇文章介绍了c#动态加载卸载DLL的方法,有需要的朋友可以参考一下 c#中通过反射可以方便的动态加载dll程序集,但是如果你需要对dll进行更新,却发现.net类库没有提供卸载dll程序集的方法.在 ...

  9. WEB启动时就加载servlet的dopost方法

    web启动的时候可以加载servlet的init方法,无法加载dopost方法,如果你需要什么内容在启动的时候执行,可以将内容放到init方法里面,dopost方法,是在客户端使用post请求的时候才 ...

随机推荐

  1. tkinter对话框和窗体

    1.标准对话框(tkinter.messagebox) 常用标准对话框 tkinter.messagebox.askokcancel tkinter.messagebox.askquestiontki ...

  2. Linux(CENTOS7) Jdk完整步骤安装

    方式一: 直接通过yum安装,这种方式比较方便,下面贴上安装jdk1.8*的命令: -openjdk* -y 上面命令执行完成之后,使用下面命令即可查看是否安装成功: java -version 方式 ...

  3. Springboot项目绑定域名,使用Nginx配置Https

    一.https 简介     HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HT ...

  4. 201509-2 日期计算 Java

    思路: 每月有多少天是固定的,放到数组中,2月单独判断一下. import java.util.Scanner; public class Main { public static void main ...

  5. spring学习之spring入门

    一 spring的基础 1:什么是spring spring是由Rod Johnson组织和开发的一个分层 的Java SE/EE 一站式轻量级开源框架,它以Ioc(控制反转)和 AOP(面向切面编程 ...

  6. POJ-1703 Find them, Catch them(并查集&数组记录状态)

    题目: The police office in Tadu City decides to say ends to the chaos, as launch actions to root up th ...

  7. CountDownLatch 我的应用场景

    记得我是做一个第三方接口,当时需要拿公司的五万辆车通过每周四的夜间去获取违章数据: 三方当时只提供一个只能一辆车去获取未处理的违章数据: 接口是http的方式获取: 当时我是用CountDownLat ...

  8. ansible puppet saltstack三款自动化运维工具的对比

    一.基础介绍 ansible基础介绍可参考:http://www.linuxidc.com/Linux/2017-12/149671.htm puppet基础介绍可参考:http://www.linu ...

  9. Fabric不支持对同一个数据的并发事务处理

    Fabric不支持对同一个数据的并发事务处理,也就是说, 如果我们同时运行了invoke(一),invoke(二),那么只会第一条Transaction成功, 而第二条失败.因为在Committer节 ...

  10. 让debian8.8不休眠,debian设置不休眠模式,因为我的本本休眠了时间不准确了,得重新同步

    第一步:sudo vi /etc/systemd/logind.conf /*最好备份下再修改*/ 把下面的参数改为ignoreHandleLidSwitch=ignore 第二步: sudo ser ...