最近在公司的项目中,需要使用到树形结构,其中一部分需要单选按钮,当点击时把节点的值传给其他对象。 在网上搜索了一下,找到一个这方面的例子,自己再根据需要,把dtree做了一些改动。可以选择根据需要使用单选按钮或者是复选框。
其修改过程大致如下:
(本程序源代码及实例下载地址:http://download.csdn.net/source/756744)
1.给树对象的config对象添加一个控制checkbox是否显示的属性;
this.config = {
target : null,
folderLinks : true,
useSelection : true,
useCookies : true,
useLines : true,
useIcons : true,
useStatusText : false,
closeSameLevel : false,
inOrder : false,
useRadio : false, //yanal添加,设置是否有添加单选按钮
useCheckbox : false //yanal添加,设置是否使用复选框
}
2.修改节点对象的dTree.prototype.node()方法,添加如下代码;
//添加单选按钮radio ,在调用页面把第一个节点id设置为0,该节点不添加单选按钮
// 此处的getRadioSelected方法具体实现在调用树的页面
if(this.config.useRadio && node.id != 0){
str +='<input type="radio" name="chk" id="r'+ this.obj + nodeId + '" onclick="getRadioSelected('+nodeId+')" value="'+node.id+'"/>';
}
//添加复选框,在调用页面把第一个节点id设置为0,该节点不添加复选框。此处的方法selectCheckbox在本JS内部实现
if(this.config.useCheckbox == true && node.id != 0){
str+= '<input type="checkbox" id="c'+ this.obj + nodeId + '" onclick="javascript:'+this.obj+'.selectCheckbox('+nodeId+')"/>';
}
3.外部实现当单选按钮选中时,得到节点值的函数
function getRadioSelected(nodeId){
var nname = mytree.aNodes[nodeId].name; //此处得到的是所选择节点的name值,根据需要,同样可得到其他的值
document.getElementById('exID').value = "你选择了:" + nname;
}
4. 添加一个内部方法,用递归实现,当勾选一个父节点是,其子节点全部选中
dTree.prototype.selectCheckbox=function(nodeId){
var cs = document.getElementById("c"+this.obj+nodeId).checked;
var node = this.aNodes[nodeId];
var len =this.aNodes.length;
for (n=0; n<len; n++) {
if ((n != nodeId) && (this.aNodes[n].pid == node.id)) {
document.getElementById("c"+this.obj+n).checked=cs;
this.selectCheckbox(n);
}
}
}
分享到:
相关推荐
2. `dtree_rightclick.js`:这是右键dtree的实现,基于`dtree.js`进行扩展,添加了右键菜单功能。 3. `dtree_checkbox.js`:复选框dtree的实现,修改了`dtree.js`的源码,加入了复选框元素和相应的逻辑。 4. HTML和...
4. **扩展性**:设计良好的插件系统,允许用户自定义节点渲染、事件处理等,提高组件的灵活性。 在JavaScript中,dtree通常结合其他库如jQuery或React进行使用。例如,如果使用React,可以将dtree作为一个自定义...
dtree是layui中的一个扩展组件,专门用来处理树形数据的展示和交互。 **dtree的主要特点:** 1. **易用性**:layui dtree的API设计简单明了,开发者可以通过几行代码快速实现树形结构的展现。 2. **灵活性**:它...
**Ajax树技术详解:以stree扩展dtree为例** 在Web开发中,树形结构的展示经常被用于数据管理和组织,比如目录结构、组织架构、菜单系统等。传统的静态树结构在数据量大或者需要实时更新的情况下,用户体验往往不佳...
dtree_checkbox:复选框扩展** dtree_checkbox是dtree的一个增强版本,它引入了复选框功能,使得用户可以选择一个或多个节点。这一特性在需要多选操作的场景下非常实用,例如在文件管理器中选择多个文件进行操作。...
本文将深入探讨“js dtree无限级扩展的树形菜单”这一主题,这是一种基于JavaScript的树形菜单插件,适用于构建多层次、可扩展的导航系统。 首先,我们来了解“js dtree”的基本概念。js dtree 是一个JavaScript库...
3. **dtree**:DTree是一种可扩展的JavaScript组件,用于创建和展示树状结构,常用于文件管理、组织架构展示等场景。它可以根据需求进行定制,包括节点的图标、展开/折叠行为等。在项目中,`dtree.html`可能是包含了...
dTree的核心特性在于其简洁的API和高效性能,使得在前端构建可扩展、可交互的树形数据展示变得简单。 首先,我们来深入了解dTree的源码。dTree的源代码通常由一系列JavaScript文件组成,其中包括主要的dTree.js和...
- 可以通过插件系统或自定义代码扩展dtree的功能,如添加搜索、拖放、拖拽排序等特性。 通过理解和掌握这些知识点,开发者可以有效地在前端项目中实现和优化dtree树结构,提供良好的用户体验。
虽然通常不需要直接修改这个文件,但了解其内部工作原理有助于解决复杂的问题或扩展其功能。dTree.js的源码是用JavaScript编写的,遵循面向对象编程原则,提供了一个灵活的API来操作树形结构。 最后,`img`目录可能...
8. **可扩展性**:优秀的DTree库应提供API供开发者自定义行为,如添加新节点、删除节点、搜索节点等功能,以满足不同项目的需求。 9. **兼容性**:考虑到浏览器差异,DTree实现需确保在主流浏览器上运行良好,包括...
7. **插件扩展**:DTree可能有其他扩展功能或插件,如搜索、多选、拖放排序等,资料会介绍如何使用这些扩展。 8. **兼容性和性能优化**:如何确保DTree在不同浏览器上的兼容性,以及如何优化大量节点时的性能。 9....
Dtree是一款JavaScript插件,专为创建这样的树形目录而设计,它结合了实用性与美观性,使得在网页中实现交互式的树状菜单变得简单易行。 **Dtree的基本原理:** Dtree插件基于HTML、CSS和JavaScript构建,通过...
【dtree+鼠标右键】是一种在IT领域中常见的用于文件和目录管理的工具,它扩展了命令行界面下的树状目录展示,并结合了鼠标右键操作,为用户提供了更直观且高效的文件操作方式。dtree通常指的是"Directory Tree"或...
`dtree`是一个专为此目的设计的轻量级JavaScript组件,它提供了一个交互式的、可扩展的树形菜单解决方案。由于其免费且开源的特性,`dtree`受到了许多开发者的欢迎,允许他们自定义样式和功能以适应不同的项目需求。...
你可以根据需要替换这些图片,或者添加新的图标以扩展功能。 使用`dtree.js` 创建树形结构的基本步骤如下: 1. 在HTML中引入`dtree.css` 和`dtree.js` 文件。 2. 定义一个HTML元素作为树的容器,例如一个`<div>`。...
这通常通过扩展默认配置或编写自定义插件来实现。 总的来说,`dtree` 是一个强大且灵活的工具,它可以很好地处理树形结构的数据展示和用户交互。通过理解并掌握如何配置和读取 `checkbox` 和 `radiobox` 的值,你...
开发者可以根据需要覆盖或扩展这些样式。 6. **图片资源**:`img`目录可能包含了树形目录中使用的图标和其他图形资源,如展开/折叠箭头、节点图标等。 7. **文档**:`demo.htm`和`api.html`可能分别提供了演示和...
总的来说,解决"dtree不选中子节点处理"的问题需要深入理解dtree的内部机制,尤其是节点选中逻辑部分,然后根据需求进行源码的定制或功能的扩展。对于开发者来说,这既是对JavaScript和DOM操作能力的考验,也是对...
总之,dtree是一款值得推荐的JavaScript库,它不仅功能全面、易于集成,而且具有良好的扩展性和高度的自定义能力,是Web开发者构建树状数据展示界面的理想选择。通过本文的介绍,相信读者已经对dtree有了深入的了解...