`
liu_haibo
  • 浏览: 4788 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

dtree 扩展

阅读更多
最近在公司的项目中,需要使用到树形结构,其中一部分需要单选按钮,当点击时把节点的值传给其他对象。  在网上搜索了一下,找到一个这方面的例子,自己再根据需要,把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);
   }
  }
}
分享到:
评论

相关推荐

    原始dtree+右键dtree+复选框dtree

    2. `dtree_rightclick.js`:这是右键dtree的实现,基于`dtree.js`进行扩展,添加了右键菜单功能。 3. `dtree_checkbox.js`:复选框dtree的实现,修改了`dtree.js`的源码,加入了复选框元素和相应的逻辑。 4. HTML和...

    dtree

    4. **扩展性**:设计良好的插件系统,允许用户自定义节点渲染、事件处理等,提高组件的灵活性。 在JavaScript中,dtree通常结合其他库如jQuery或React进行使用。例如,如果使用React,可以将dtree作为一个自定义...

    layui dtree树形结构

    dtree是layui中的一个扩展组件,专门用来处理树形数据的展示和交互。 **dtree的主要特点:** 1. **易用性**:layui dtree的API设计简单明了,开发者可以通过几行代码快速实现树形结构的展现。 2. **灵活性**:它...

    stree ajax树 dtree的扩展

    **Ajax树技术详解:以stree扩展dtree为例** 在Web开发中,树形结构的展示经常被用于数据管理和组织,比如目录结构、组织架构、菜单系统等。传统的静态树结构在数据量大或者需要实时更新的情况下,用户体验往往不佳...

    dtree和dtree_checkbox(dtree复选框)

    dtree_checkbox:复选框扩展** dtree_checkbox是dtree的一个增强版本,它引入了复选框功能,使得用户可以选择一个或多个节点。这一特性在需要多选操作的场景下非常实用,例如在文件管理器中选择多个文件进行操作。...

    js dtree无限级扩展的树形菜单.rar

    本文将深入探讨“js dtree无限级扩展的树形菜单”这一主题,这是一种基于JavaScript的树形菜单插件,适用于构建多层次、可扩展的导航系统。 首先,我们来了解“js dtree”的基本概念。js dtree 是一个JavaScript库...

    ajax,servlet动态加载dtree

    3. **dtree**:DTree是一种可扩展的JavaScript组件,用于创建和展示树状结构,常用于文件管理、组织架构展示等场景。它可以根据需求进行定制,包括节点的图标、展开/折叠行为等。在项目中,`dtree.html`可能是包含了...

    dTree源码及参数说明

    dTree的核心特性在于其简洁的API和高效性能,使得在前端构建可扩展、可交互的树形数据展示变得简单。 首先,我们来深入了解dTree的源码。dTree的源代码通常由一系列JavaScript文件组成,其中包括主要的dTree.js和...

    dtree 树结构 前端

    - 可以通过插件系统或自定义代码扩展dtree的功能,如添加搜索、拖放、拖拽排序等特性。 通过理解和掌握这些知识点,开发者可以有效地在前端项目中实现和优化dtree树结构,提供良好的用户体验。

    dTree.js下载+API文档.rar

    虽然通常不需要直接修改这个文件,但了解其内部工作原理有助于解决复杂的问题或扩展其功能。dTree.js的源码是用JavaScript编写的,遵循面向对象编程原则,提供了一个灵活的API来操作树形结构。 最后,`img`目录可能...

    dtree实现的树支持多选

    8. **可扩展性**:优秀的DTree库应提供API供开发者自定义行为,如添加新节点、删除节点、搜索节点等功能,以满足不同项目的需求。 9. **兼容性**:考虑到浏览器差异,DTree实现需确保在主流浏览器上运行良好,包括...

    Dtree+Jquery 资料

    7. **插件扩展**:DTree可能有其他扩展功能或插件,如搜索、多选、拖放排序等,资料会介绍如何使用这些扩展。 8. **兼容性和性能优化**:如何确保DTree在不同浏览器上的兼容性,以及如何优化大量节点时的性能。 9....

    javascript树形菜单Dtree插件

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

    dtree+鼠标右键

    【dtree+鼠标右键】是一种在IT领域中常见的用于文件和目录管理的工具,它扩展了命令行界面下的树状目录展示,并结合了鼠标右键操作,为用户提供了更直观且高效的文件操作方式。dtree通常指的是"Directory Tree"或...

    树形控件 dtree

    `dtree`是一个专为此目的设计的轻量级JavaScript组件,它提供了一个交互式的、可扩展的树形菜单解决方案。由于其免费且开源的特性,`dtree`受到了许多开发者的欢迎,允许他们自定义样式和功能以适应不同的项目需求。...

    dtree.js js树

    你可以根据需要替换这些图片,或者添加新的图标以扩展功能。 使用`dtree.js` 创建树形结构的基本步骤如下: 1. 在HTML中引入`dtree.css` 和`dtree.js` 文件。 2. 定义一个HTML元素作为树的容器,例如一个`&lt;div&gt;`。...

    dtree读取单选和复选的值

    这通常通过扩展默认配置或编写自定义插件来实现。 总的来说,`dtree` 是一个强大且灵活的工具,它可以很好地处理树形结构的数据展示和用户交互。通过理解并掌握如何配置和读取 `checkbox` 和 `radiobox` 的值,你...

    dtree建立树形目录

    开发者可以根据需要覆盖或扩展这些样式。 6. **图片资源**:`img`目录可能包含了树形目录中使用的图标和其他图形资源,如展开/折叠箭头、节点图标等。 7. **文档**:`demo.htm`和`api.html`可能分别提供了演示和...

    dtree不选中子节点处理

    总的来说,解决"dtree不选中子节点处理"的问题需要深入理解dtree的内部机制,尤其是节点选中逻辑部分,然后根据需求进行源码的定制或功能的扩展。对于开发者来说,这既是对JavaScript和DOM操作能力的考验,也是对...

    dtree 使用详细介绍

    总之,dtree是一款值得推荐的JavaScript库,它不仅功能全面、易于集成,而且具有良好的扩展性和高度的自定义能力,是Web开发者构建树状数据展示界面的理想选择。通过本文的介绍,相信读者已经对dtree有了深入的了解...

Global site tag (gtag.js) - Google Analytics