基于js开发的treeviewer有很多,我觉得从性能和上手程度上来讲,dtree都是可以优先考虑的。
原来没有怎么用过dtree,只是了解过,最近由于需要自己做了一回配置,才发现要将dtree改造得完全满足自己是需求,还是要做相应的调整的,记录一下,很简单。
1.dtree的下载,网上一大堆,我也提供了一个完整的附件。
2.dtree的使用,有demo,有api,不画蛇添足了。
3.特殊需求:(1)期望点击文件夹的时候,自动打开本文件夹的子目录,(2)同时关闭同层其他打开的文件夹。(3)期望dtree选中行有不同的背景色清楚的标志。
对于需求1:通过如下两步实现:一,设置文件夹节点的target值为""或者"_self";二,设置文件夹节点的url为:
javascript:d.o(index)
[其中d代表dtree的名称,index是该文件夹的id。
对于需求2:设置dtree的属性:
d.config.closeSameLevel = true;
对于需求3:设置dtree的属性:
d.config.useSelection = true;
然后去dtree的css里去改对应的背景色样式即可。
很简单很一般的需求,可惜啊,网上翻了好久没人记录怎么实现,还得靠自己记录,所以简单的东西,不一定没用。
的确,很简单,而且可能没看明白…… 没办法,贴一个最简单的js代码:
d = new dTree('d');d.add(0,-1,'ROOT');
d.add(1,0,'folder1','javascript:d.o(1)','','_self');//如果target设置为_self不行,就设置为''
d.add(2,1,'Node 1.1','#');
d.add(3,1,'Node 1.2','#');
d.add(4,0,'folder2','javascript:d.o(4)','','_self');
d.add(5,4,'Node 2.1','#');
d.add(6,4,'Node 2.2','#');
d.add(7,4,'Node 2.3','#');
d.config.closeSameLevel = true;//打开本文件夹关闭同级的其他文件夹
d.config.useSelection = true;//选中的节点背景色设置
document.write(d);
有一个本例子完整的demo文件demo.html,放在dtree.zip下,为本文例子。
分享到:
相关推荐
### dtree 使用详解:开发者的高效工具 #### 引言 在现代Web开发中,树状结构的展示和管理是常见的需求之一,特别是在构建复杂的菜单系统、文件浏览器或组织架构时。dtree作为一款功能强大的JavaScript库,为...
在深入探讨dtree的使用之前,我们先来了解一下dtree的基本概念。dtree,或称为决策树,在计算机科学领域通常指的是用于数据挖掘、机器学习的一种方法,通过一系列判断条件对数据进行分类。然而,在本篇笔记中,我们...
**dtree使用说明及示例演示** 在信息技术领域,决策树(Decision Tree,简称dtree)是一种广泛应用的数据挖掘和机器学习算法。它通过构建一种树形结构来模拟一系列的决策过程,每个内部节点代表一个特征,每个分支...
### dtree使用详解:构建动态树状结构 #### 引言 在Web开发中,动态树状结构(如文件浏览器、目录导航等)是常见且重要的界面元素之一。`dtree`作为一款轻量级的JavaScript插件,以其简单易用、高度自定义的特点,...
在JSP(JavaServer Pages)中使用`dtree`,可以增强用户界面的交互性。下面将详细介绍如何在JSP中集成和使用`dtree`。 1. **dtree库的引入** 在使用`dtree`之前,首先需要在项目中引入相关的资源文件。这包括`...
**dtree的使用** 在网页开发中,呈现数据的组织结构通常是一个挑战,尤其是在处理层级关系时。`dtree` 是一个用于展示树状结构的JavaScript库,它可以帮助开发者在页面上以图形化的方式展现多级关系数据。本文将...
**dtree的使用方法和类库** 在信息技术领域,数据可视化是至关重要的,尤其是在数据分析和机器学习中。其中,决策树(Decision Tree)作为一种直观且易于理解的模型,被广泛应用于分类和回归任务。在Python编程语言...
DTree的官方下载地址和帮助文档可以从其官方网站获取,文档中详细介绍了DTree的安装方式、使用说明、方法参数、配置项等信息,以及版本更新历史。 在实际应用中,开发者需要按照DTree的API文档来编写相应的...
对于C#开发者来说,虽然DTree主要在前端使用,但理解其工作原理有助于前后端的协作,确保数据正确传递和交互逻辑的顺畅。 总之,DTree控件是构建具有层级结构展示功能的网页的强大工具。通过学习提供的实例,我们...
3. **模块化**:采用模块化开发,如使用CommonJS或ES6模块,使得dtree可以单独引入和使用。 4. **扩展性**:设计良好的插件系统,允许用户自定义节点渲染、事件处理等,提高组件的灵活性。 在JavaScript中,dtree...
本资源提供了dtree库所需的两个关键文件:`dtree.css`和`dtree.js`,以及相关的图标和API文档,帮助开发者更便捷地在项目中集成和使用dtree。 `dtree.css`是CSS样式表文件,它包含了dtree控件的样式定义。这些样式...
dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar
本篇主要介绍`dtree`包及其在Java和JavaScript环境下的使用方法。 `dtree`包是一个专门为JavaScript设计的库,它允许开发者创建和操作无限级别的树形结构。在JavaScript中,由于其动态类型和灵活性,实现这样的功能...
### DTree的改进与使用经验 #### 概述 DTree是一种用于网页的树状结构插件,主要用于展示和管理具有层次关系的数据。其核心功能包括动态加载数据、支持多种节点状态显示(如展开、关闭)、自定义图标、以及丰富的...
本文将深入探讨如何使用DTREE构建树菜单,包括动态树和静态树的构建方法。 首先,让我们理解决策树的基本概念。决策树是由节点和边构成的图形结构,其中每个内部节点代表一个特征或属性测试,每个分支代表一个测试...
在这个话题中,我们将深入探讨三种特定的树形结构实现:原始dtree、右键dtree以及复选框dtree,这些都是在JavaScript环境下用于创建交互式树形菜单的工具。 首先,原始dtree是最基础的形式,它通常基于HTML、CSS和...
在提供的文件列表中,`dtree-demo`可能是一个包含示例代码的文件或目录,用于演示如何使用layui dtree。而`dtree`可能是dtree的源码或资源文件。通过查看这些文件,你可以更深入地理解dtree的工作原理和实际应用。 ...
6. **img**: 这个文件夹可能包含了Dtree使用的图标或者示例中的图片资源,比如展开/折叠箭头、节点图标等。这些图像资源与Dtree的视觉表现密切相关。 在使用Dtree时,首先需要在HTML页面中引入`dtree.js`和`dtree....
2. **异步加载树节点**:当用户展开一个节点时,使用Ajax发送请求到服务器,获取该节点的子节点数据,然后使用dtree提供的API将新数据插入到现有树中。 3. **优化策略**:通常,初始加载只展示顶级节点,其余节点按...
可以使用`setInterval`函数每隔一定时间(如5秒)执行一次更新数据并重新加载DTREE的操作。这通常涉及到以下几个步骤: 1. **获取新数据**:通过Ajax(异步JavaScript和XML)请求从服务器获取新的JSON数据。 2. **...