dtree插件

最新推荐文章于 2021-12-06 15:53:04 发布

JiLin_Wangfusheng

最新推荐文章于 2021-12-06 15:53:04 发布

阅读量572

点赞数

分类专栏： Jsp常用插件

本文链接：https://blog.csdn.net/JiLin_Wangfusheng/article/details/8528397

版权

Jsp常用插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我认为初学者会感觉例子中的代码很乱，所以，我觉得这样定义比较容易让人理解

d = new dTree('d');
  d.useSelection = true;
  d.add(0,-1,'网上报名系统');
  d.add(1,0,'学生管理','example01.html');
  d.add(11,1,'学生个人信息管理','example01.html');
  d.add(12,1,'学生个人成绩管理','example01.html');
  d.add(13,1,'学生选课管理','example01.html');

  d.add(2,0,'课程管理','example01.html');
  d.add(21,2,'课程专业分类','example01.html');
  d.add(22,2,'课程报名时间','example01.html');
  document.write(d);

同一级别的用一个代码id开头，第二父类节点选用上一个id，

例如：

你想加入的父类节点为2，接下来子类的id，我们可以设以2开头的2位数，比如21，22，23。这样的，这样的话可以方便大家，更快速的找到自己的跟节点。

下面是翻译过来的api。上面红色的为技巧。

dtree是一个由JavaScript编写成的简单的树形菜单组件，目前免费并且开源。　　目前有很多的树形菜单组件(比如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文件：

　　然后在<body>里创建一个div层，指定class为“dtree”，此时该层就引用了dtree的样式

　　tree = new dTree('tree');

　　......

　　</script>

　　</div>

　　注：具体代码可以参照example01.html

　　4)最后保存执行即可看到一个树形菜单。

常用方法和配置

add(parameters)

　　添加一个树节点，实际参数有9个add(id,pid,name,url,title,target,icon,iconOpen,open);

位置	参数别名	类型	功能
1	id	int	节点自身的id(唯一)
2	pid	int	节点的父节点id
3	name	string	节点显示在页面上的名称
4	url	string	节点的链接地址
5	title	string	鼠标放在节点上显示的提示信息
6	target	string	节点链接所打开的目标frame
7	icon	string	节点关闭状态时显示的图标
8	iconOpen	string	节点打开状态时显示的图标
9	open	bool	节点第一次加载是否打开

　　注：dtree.js文件中约87－113行是一些默认图片的路径，可以自己配置图片和路径。

openAll()

　　打开全部节点，可在树对象创建前或创建后调用

closeAll()

　　关闭全部节点，可在树对象创建前或创建后调用

openTo(id,select)

　　打开指定id的节点，可以传两个参数：

　　id 指定需要打开的节点的唯一id

　　select 是否让该节点处于选中状态

config配置

变量	类型	默认值	描述
target	string		所有节点的target
folderLinks	bool	true	文件夹可被链接
useSelection	bool	true	节点可被选择高亮
useCookies	bool	true	树可以使用cookie记住状态
useLines	bool	true	创建带结构连接线的树
useIcons	bool	true	创建带有图表的树
useStatusText	bool	false	用节点名替代显示在状态栏的节点url
closeSameLevel	bool	false	同级节点只允许一个节点处于打开状态
inOrder	bool	false	加速父节点树的显示

　　【例】tree.config.closeSameLevel=true;表示打开某级节点时，该级其他处于打开状态的同级节点会被关闭。

　　具体配置功能请参照官网实例。

参数规范

　　dtree大多数方法都有一个以上的参数，大多数参数都含有默认值，因此不需要每次都把全部参数传进入

　　例：dtree.add(id,pid,name,url)；后面5个参数被省略，会采用默认配置

　　如果是有间隔的默认值，中间需要加引号：

　　例：dtree.add(id,pid,name,'','','','','',true)；第4-8个参数省略，第9个参数自定义

　　特殊：add()方法如果需要设置第5个参数(弹出提示信息)，则第4个参数不能为默认，否则是没有效果的。

　　例：dtree.add(id,pid,name,url,title); 如果url设置为“''”，不能弹出提示信息

　　在页面<head></head>之间如果包含<base target="main">代码，将会出现“未定义”错误。解决的办法是利用对象的target属性，可使用了框架中。

JiLin_Wangfusheng

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
dtree插件

我认为初学者会感觉例子中的代码很乱，所以，我觉得这样定义比较容易让人理解 d = new dTree('d'); d.useSelection = true; d.add(0,-1,'网上报名系统'); d.add(1,0,'学生管理','example01.html'); d.add(11,1,'学生个人信息管理','example01.html'); d.
复制链接

扫一扫