`

js 目录树 dTree

阅读更多
   由于需完成一个报表管理功能,对常用报表资料进行管理,要求做成目录树结构,这样结构清晰,比较美观。经查询资料发现dTree不错,于是把此文章转载过来,与大家分享:

dTree是js编写的免费的目录树,主要特点如下:
1、可以设置无限级的菜单
2、可用于框架和非框架中
3、可以在一页中显示多个目录树
4、支持所有主要的浏览器:Internet Explorer 5+ ,Netscape 6+ ,Opera 7+ ,Mozilla

已上传dTree,解压后,除了api.html是介绍如何使用的,其他都必须拷贝,才能使用

----------------------------------------------------------------------

使用说明(下载文件包中有对应英文说明文档):

函数

add()
向树里添加一个节点, 只能在树被创建之前调用,必须 id, pid, name 

参数   
名字         类型         描述  
id            Number    唯一的ID号   
pid           Number    判定父节点的数字,根节点的值为 -1   
name          String    节点的文本标签   
url           String    节点的Url   
title         String    节点的Title   
target        String    节点的target   
icon          String    用做节点的图标,节点没有指定图标时使用默认值   
iconOpen      String    用做节点打开的图标,节点没有指定图标时使用默认值   
open          Boolean   判断节点是否打开   

例子
mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');

openAll()   
打开所有节点,可在树被创建以前或以后调用.
 
例子   
mytree.openAll();

closeAll()   
关闭所有节点,可在树被创建以前或以后调用.   
例子   
mytree.closeAll();
   
openTo(id,select)   
打开树的某个确定的结点,也能选择该结点,只能在树被创建以后调用.
   
参数   
名字       类型        描述   
id        Number     节点唯一的ID号   
select    Boolean    判断节点是否被选择
  
例子   
mytree.openTo(4, true);   

配置   
变量                类型         默认值       描述   
target             String       true      所有节点的target   
folderLinks        Boolean      true      文件夹可链接   
useSelection       Boolean      true      节点可被选择(高亮)   
useCookies         Boolean      true      树可以使用cookies记住状态   
useLines           Boolean      true      创建带线的树   
useIcons           Boolean      true      创建带有图标的树   
useStatusText      Boolean      false     用节点名替代显示在状态栏的节点url   
closeSameLevel     Boolean      false     只有一个有父级的节点可以被展开,当这个函数可用时openAll() 和 closeAll() 函数将不可用   
inOrder            Boolean      false     如果父级节点总是添加在子级节点之前,使用这个参数可以加速菜单显示.
  
例子   
mytree.config.target = "mytarget";  

具体效果可运行下载的文件包中example01.html


分享到:
评论

相关推荐

    JS 静态树 dtree

    JS静态树dtree是一种基于JavaScript实现的数据结构,通常用于构建可交互的树形数据展示。在网页应用中,这种数据结构常被用来组织和展示层次化信息,如目录结构、组织架构或者层级菜单。在这个解压缩的文件中,我们...

    Dtree目录树下载

    【DTree目录树下载】是针对前端开发人员的一款强大且美观的树形JavaScript代码库,主要用在构建具有层级结构的目录展示。DTree以其高效的功能和优雅的样式设计,深受开发者喜爱,常用于网站导航、文件管理器、组织...

    JavaScript Dtree 最经典的JS目录树

    JavaScript DTree是一种基于JavaScript实现的目录树控件,它在Web应用中被广泛用于展示层次结构数据,如文件系统、组织结构或者网站导航。DTree以其简洁高效、可定制化的特点,深受开发者喜爱。在这个话题中,我们将...

    dTree.js下载+API文档.rar

    dTree.js是一款轻量级的JavaScript库,专门用于在网页中创建交互式的树形结构,如目录树或数据层级展示。这个压缩包包含了dTree.js的实现文件以及相关的API文档和示例,可以帮助开发者快速理解和使用这个库。 首先...

    js+ssh实现树 DTree

    【标题】"js+ssh实现树 DTree"的项目是一个结合了JavaScript前端技术和Spring Security (SSH) 框架后端技术的实例,主要用于展示如何在Web应用中创建和管理树形结构的数据。在这个项目中,DTree是一个用于前端显示树...

    dtree实现的树支持多选

    DTree(通常指的是JavaScript实现的树形控件)允许用户通过勾选节点来实现多选功能,提升了用户在大量数据中的选择效率。以下将详细介绍dtree实现多选树的核心知识点: 1. **DHTML与JavaScript基础**:DTree基于...

    dtree.js js树

    `dtree.js` 是一个专门用于在JavaScript环境中创建和管理树形数据结构的库。它提供了丰富的功能,使开发者能够方便地在Web页面上展示层次化的数据,常用于构建导航菜单、组织结构图或者文件系统目录等场景。`dtree....

    目录树 js css

    目录树的实现可以使用多种JavaScript库,如DTREE、jQuery Treeview等。其中,DTREE是一个功能强大且易于使用的JavaScript库,可以生成动态的树形结构目录。 DTREE的使用可以分为两个部分:一是页面中的书写,二是...

    dtree 部门与人员目录树

    在IT行业中,"dtree 部门与人员目录树"是一种常见的数据组织和展示工具,主要用于企业或组织内部的人员和部门结构管理。这个工具能够以树状结构清晰地展示出各个层级的部门以及隶属于这些部门的人员,使得管理和查询...

    dtree所需要的dtree.css和dtree.js文件(包括图标)

    在IT行业中,网页开发是一项重要的工作,而"dtree"是一个常见的用于构建树形结构的JavaScript库,尤其在处理组织结构、目录导航等场景时非常有用。本资源提供了dtree库所需的两个关键文件:`dtree.css`和`dtree.js`...

    多选菜单树Dtree

    总之,多选菜单树Dtree是提升用户交互体验的重要工具,通过合理的设计和实现,可以使用户在处理层次化数据时更加高效。在实际开发中,开发者需要综合运用前端和后端技术,以及良好的UI/UX设计原则,来创建功能完备、...

    Dtree目录树

    "Dtree目录树"是针对这一概念的一个实现,通常是一个程序或库,用于创建和操作可视化的目录树结构。这个框架提供了查看和操作文件系统层次结构的能力,对于开发人员来说,它是一个方便的工具,特别是在处理大量文件...

    dtree目录树代码

    "dtree目录树代码"是用于创建JavaScript实现的无限级目录菜单的代码库,适用于多种浏览器环境,包括Internet Explorer、Maxthon(一款基于IE内核的浏览器)和Firefox。这个代码库提供了在网页上构建可交互的多级目录...

    js树dtree

    在这个场景中,`js树dtree` 可能是指一个特定的JavaScript库或组件,用于创建和操作这些树形视图。 在前端开发中,JavaScript库通常提供API来创建、添加、删除和修改节点,以及支持各种交互功能,如节点的展开与...

    select树dtree和div实现

    自己写的select树的小例子,,树目录是用dtree实现的,,select标签是用div模拟的,,大家在document.getElementById("divSel").style.height = count + "px";加上"px",可以支持火狐,因为火狐语法很严格,,,想和大家分享练...

    jsp-dtree-目录树解决树形结构问题

    ### jsp-dtree-目录树解决树形结构问题 #### 概述 JSP-dtree是一种基于JavaServer Pages (JSP)技术实现的目录树组件,用于解决网站或应用程序中的树形结构展示问题。该组件不仅可以帮助开发者快速构建出美观且功能...

    dtree.js + dtree.css

    首先,dtree.js是一个JavaScript库,它提供了一种灵活的方式来创建和操作树形数据结构。通过dtree.js,开发者可以轻松地生成具有展开/折叠功能的层次结构,这对于展示多级分类、文件系统或者组织结构图等场景非常...

    一棵树dtree用过吗

    在IT领域,"一棵树dtree用过吗" 这个标题可能是在询问关于`dtree`这个数据结构可视化库的使用经验。`dtree`通常指的是用于展示和操作树形数据结构的一个JavaScript库,它可以帮助开发者在网页上以图形化的方式呈现...

    javascript树形菜单Dtree插件

    Dtree是一款JavaScript插件,专为创建这样的树形目录而设计,它结合了实用性与美观性,使得在网页中实现交互式的树状菜单变得简单易行。 **Dtree的基本原理:** Dtree插件基于HTML、CSS和JavaScript构建,通过...

    很不错的树dtree.rar

    【标题】"很不错的树dtree.rar" 指向的是一种开源的树形数据结构库,名为"dtree"。在IT领域,树是一种常用的数据结构,它以分层节点的形式表示数据,广泛应用于文件系统、网页导航、数据可视化、决策树算法等多个...

Global site tag (gtag.js) - Google Analytics