为DTree添加上复选框可以让树的功能更加丰富,比如在做树形结构的时候可以点击选择多个树节点进行操作等等....
添加复选框的步骤:
1)dtree.js
在function dTree (objName) {
this.config = {
target : null,
folderLinks : true,
useSelection : true,
useCookies : true,
useLines : true,
useIcons : true,
useStatusText : false,
closeSameLevel : false,
inOrder : false,
check : true
// 检查是否有复选框
}
添加上check属性.
2)dtree.js
添加代码:
dTree.prototype.node = function(node, nodeId) {
var str = '<div class="dTreeNode">' + this.indent(node, nodeId);
if (this.config.useIcons) {
if (!node.icon)
node.icon = (this.root.id == node.pid)
? this.icon.root
: ((node._hc) ? this.icon.folder : this.icon.node);
if (!node.iconOpen)
node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node;
if (this.root.id == node.pid) {
node.icon = this.icon.root;
node.iconOpen = this.icon.root;
}
str += '<img id="i' + this.obj + nodeId + '" src="'
+ ((node._io) ? node.iconOpen : node.icon) + '" alt="" />';
//添加上复选框
if (this.config.check == true) {
str += '<input type="checkbox" id="c' + this.obj + node.id
+ '" onclick="javascript:' + this.obj + '.cc(' + node.id
+ ',' + node.pid + ')"/>';
}
}
3)dtree.js
最后要为点中复选框的事件添加cc方法
//点击复选框onclick事件
dTree.prototype.cc=function(nodeId, nodePid){
//首先获取这个多选框的id
var cs = document.getElementById("c" + this.obj + nodeId).checked;
var n,node = this.aNodes[nodeId];
var len = this.aNodes.length;
for (n=0; n<len; n++) { //如果循环每一个节点
if (this.aNodes[n].pid == nodeId) { //如果选中的是非叶子节点,则要将所有的子节点选择和父节点一样
document.getElementById("c" + this.obj + this.aNodes[n].id).checked = cs;
this.cc(this.aNodes[n].id, nodeId);
}
}
if(cs==true){ //当前是选中状态
var pid=nodePid;
var bSearch;
do{
bSearch=false;
for(n=0;n<len;n++){ //循环每一个节点
if(this.aNodes[n].id==pid){ //如果循环的节点的id等于PID
document.getElementById("c"+this.obj+pid).checked=true; //那么这个循环的节点应该被选中
pid=this.aNodes[n].pid;
bSearch= true;
break;
}
}
}while(bSearch==true);
}
if(cs==false){ //如果被取消选择
var pid = nodePid;
do{
for(j=0;j<len;j++){ //循环每一个多选框 如果这个节点的子节点有其他是选中的,则不取消
if(this.aNodes[j].pid==pid && document.getElementById("c" + this.obj + this.aNodes[j].id).checked==true){
return;
}
}
if(j==len){ //循环结束
for(k=0;k<len;k++){
if(this.aNodes[k].id==pid){ //如果找到父节点
document.getElementById("c"+this.obj+this.aNodes[k].id).checked=false;
pid=this.aNodes[k].pid;
break;
}
}
}
}while(pid!=-1);
}
}
//复选框onclick事件
jsp
d = new dTree('d');
d.add('id','pid',' name ' ,'');
document.write(d);
分享到:
相关推荐
dtree_checkbox是dtree的一个增强版本,它引入了复选框功能,使得用户可以选择一个或多个节点。这一特性在需要多选操作的场景下非常实用,例如在文件管理器中选择多个文件进行操作。dtree_checkbox的主要特点包括: ...
由于原版dtree作者没有加上复选框功能,我用来做用户模块权限功能的时候很不好用,网上也找到一些基于dtree添加了checkbox的修改版,但是用起来很不顺手,最后不得不根据自己的需要一再修改成了现在这个版本。...
"dtree 带复选框"是一个特定的实现,允许用户在树节点上进行选择,这在诸如配置管理、文件系统浏览、权限设置等场景中非常实用。现在我们详细探讨一下这个主题。 首先,"无限级树形菜单"是指树结构可以包含任意数量...
【标题】:“带复选框的dtree树”是指一种数据可视化工具,它结合了决策树(dtree)与复选框的交互功能。在数据分析和机器学习领域,决策树是一种常用的模型,用于通过一系列规则对数据进行分类或回归。而这里的“带...
在这个特定的场景下,我们讨论的是一个不带有单选框或复选框的`dtree`实现。 首先,我们要理解树形菜单的基本概念。树形菜单由节点组成,每个节点可以有子节点,形成一个多级展开和折叠的结构。用户可以通过点击...
"带复选框的dtree"是一个经过定制的决策树(dtree)实现,它扩展了标准的决策树功能,增加了复选框的选择机制。这个功能对于数据分类、流程选择或者用户界面中的多层次选择场景非常有用。在描述中提到,这个dtree...
### dtree用法详解:集成右键菜单及复选框功能 #### 一、dtree简介 dtree 是一个基于 JavaScript 的轻量级树形菜单组件,它支持自定义节点内容,包括添加链接、图标等元素。此外,dtree 还提供了一些基本的功能,如...
总结一下,实现dtree复选框默认状态的关键步骤包括: 1. 后端获取角色与模块的关联信息。 2. 将这些信息传递给前端(通常是JSON格式)。 3. 在前端用JavaScript解析数据,创建dtree结构。 4. 遍历数据,对比节点ID...
在这个话题中,我们将深入探讨三种特定的树形结构实现:原始dtree、右键dtree以及复选框dtree,这些都是在JavaScript环境下用于创建交互式树形菜单的工具。 首先,原始dtree是最基础的形式,它通常基于HTML、CSS和...
dtree+jquery+oracle+tomcat 从oracle数据库中取出dtree的节点信息,在jsp页面使用jquery动态生成带checkBox的dtree 测试时请访问main.jsp WebRoot/db目录为数据库建表脚本;
`dtree权限控制复选框插件`是一个专为实现这一目标而设计的工具。它将树形结构与权限管理相结合,通过复选框的方式让用户可以直观地进行权限分配。下面,我们将深入探讨这个插件的功能、应用场景以及其在实际开发中...
dtree改造-复选框(父菜单、子菜单全选)
这个场景下,"dtree含复选框延迟加载.rar" 提供的资源可能是一个基于JavaWeb的解决方案,用于创建具有复选框的树形控件,并且支持延迟加载。在这个系统中,用户可以查看和选择树中的节点,同时只有在需要时才会加载...
本篇文章将深入探讨如何在`dtree`中实现延迟加载和复选框的单选功能。 首先,让我们理解一下`dtree`的延迟加载(lazy loading)机制。延迟加载是一种优化策略,用于处理大量数据时提高性能。在树结构中,不是一次性...
"复选框的样式改变插件"正是一种能够提升用户体验的工具,它允许开发者轻松地定制复选框的外观,以匹配网站或应用的整体设计风格。下面我们将深入探讨这个主题。 复选框,通常表示一种多选选项,是用户界面中的基本...
复选框dtree是一种在网页交互设计中常用的组件,它结合了树形结构和复选框功能,使得用户能够在层次化的选项中进行多项选择。在本案例中,我们看到两个核心文件:`dtree.css`和`dtree.js`,它们分别负责dtree的样式...