注:topic.csdn.net/u/20071026/10/865b20c7-adde-49dc-bcf2-da7aaa6cd864.html
根据csdn朋友资料修改而来,略修改一下,更实用。
<script type="text/javascript" >
dd = new dTree( 'dd ');
dd.add(0,-1, '省市列表 ', ' ');
dd.add(1,0, ' <input type="checkbox" name="check" value="1" id="0" onClick="checkStatus(1,this)">辽宁 ');
dd.add(2,0, ' <input type="checkbox" name="check" value="2" id="0" onClick="checkStatus(2,this)">湖北 ');
dd.add(3,0, ' <input type="checkbox" name="check" value="3" id="0" onClick="checkStatus(3,this)">湖南 ');
dd.add(4,0, ' <input type="checkbox" name="check" value="4" id="0" onClick="checkStatus(4,this)">江西> ');
dd.add(5,0, ' <input type="checkbox" name="check" value="5" id="0" onClick="checkStatus(5,this)">浙江 ');
dd.add(6,5, ' <input type="checkbox" name="check" value="6" id="5" onClick="checkStatus(6,this)">杭州 ');
dd.add(7,5, ' <input type="checkbox" name="check" value="7" id="5" onClick="checkStatus(7,this)">嘉兴 ');
dd.add(8,4, ' <input type="checkbox" name="check" value="8" id="4" onClick="checkStatus(8,this)">南昌 ');
dd.add(9,4, ' <input type="checkbox" name="check" value="9" id="4" onClick="checkStatus(9,this)">九江 ');
dd.add(10,4, ' <input type="checkbox" name="check" value="10" id="4" onClick="checkStatus(10,this)">樟树 ');
dd.add(11,10, ' <input type="checkbox" name="check" value="11" id="10" onClick="checkStatus(11,this)">樟树 ');
dd.add(12,10, ' <input type="checkbox" name="check" value="12" id="10" onClick="checkStatus(12,this)">樟树 ');
dd.add(13,12, ' <input type="checkbox" name="check" value="13" id="12" onClick="checkStatus(13,this)">樟树 ');
dd.add(14,1, ' <input type="checkbox" name="check" value="14" id="1" onClick="checkStatus(14,this)">樟树 ');
document.write(dd);
function checkStatus(no,chkBox){
var chks = document.getElementsByTagName('input');
for(var i=0;i <chks.length;i++){
if(chks[i].name.toLowerCase() == 'check'){
if(chks[i].id == no){
chks[i].checked = chkBox.checked;
checkStatus(chks[i].value,chks[i]);
}
}
}
}
</script>
改进版:加入子目录选中,父目录自动选中功能
<a href="javascript: dd.openAll();" class="dtree">打开所有菜单</a> | <a href="javascript: dd.closeAll();" class="dtree">关闭所有菜单</a> | <a href="javascript: chkAll();" class="dtree">全部选中</a> | <a href="javascript: noChkAll();" class="dtree">全部取消</a><div style="height:300px; overflow:auto;">
<script type="text/javascript" >
dd = new dTree('dd');
dd.add(0,-1, '博客后台管理 ');
dd.add(1,0, '<input type="checkbox" name="check" value="1" class="0" id="ch1" onClick="checkStatus(1,this)">后台管理');
dd.add(5,0, '<input type="checkbox" name="check" value="5" class="0" id="ch5" onClick="checkStatus(5,this)">文章管理');
dd.add(10,0, '<input type="checkbox" name="check" value="10" class="0" id="ch10" onClick="checkStatus(10,this)">标签管理');
dd.add(15,0, '<input type="checkbox" name="check" value="15" class="0" id="ch15" onClick="checkStatus(15,this)">空间管理');
dd.add(20,0, '<input type="checkbox" name="check" value="20" class="0" id="ch20" onClick="checkStatus(20,this)">消息管理');
dd.add(25,0, '<input type="checkbox" name="check" value="25" class="0" id="ch25" onClick="checkStatus(25,this)">评论管理');
dd.add(50,0, '<input type="checkbox" name="check" value="50" class="0" id="ch50" onClick="checkStatus(50,this)">密码修改');
dd.add(51,1, '<input type="checkbox" name="check" value="51" class="1" id="ch51" onClick="checkStatus(51,this)">用户管理');
dd.add(52,1, '<input type="checkbox" name="check" value="52" class="1" id="ch52" onClick="checkStatus(52,this)">地区管理');
dd.add(53,1, '<input type="checkbox" name="check" value="53" class="1" id="ch53" onClick="checkStatus(53,this)">文章类别');
dd.add(54,1, '<input type="checkbox" name="check" value="54" class="1" id="ch54" onClick="checkStatus(54,this)">空间类别');
dd.add(55,5, '<input type="checkbox" name="check" value="55" class="5" id="ch55" onClick="checkStatus(55,this)">未分类文章');
dd.add(56,10, '<input type="checkbox" name="check" value="56" class="10" id="ch56" onClick="checkStatus(56,this)">标签统计');
dd.add(57,10, '<input type="checkbox" name="check" value="57" class="10" id="ch57" onClick="checkStatus(57,this)">首页标签');
dd.add(58,15, '<input type="checkbox" name="check" value="58" class="15" id="ch58" onClick="checkStatus(58,this)">未分类空间');
dd.add(59,20, '<input type="checkbox" name="check" value="59" class="20" id="ch59" onClick="checkStatus(59,this)">已发送消息');
dd.add(61,25, '<input type="checkbox" name="check" value="61" class="25" id="ch61" onClick="checkStatus(61,this)">所有评论');
dd.add(62,5, '<input type="checkbox" name="check" value="62" class="5" id="ch62" onClick="checkStatus(62,this)">所有文章');
dd.add(63,5, '<input type="checkbox" name="check" value="63" class="5" id="ch63" onClick="checkStatus(63,this)">文章精选');
dd.add(64,5, '<input type="checkbox" name="check" value="64" class="5" id="ch64" onClick="checkStatus(64,this)">首页推荐');
dd.add(65,5, '<input type="checkbox" name="check" value="65" class="5" id="ch65" onClick="checkStatus(65,this)">已分类文章');
dd.add(66,15, '<input type="checkbox" name="check" value="66" class="15" id="ch66" onClick="checkStatus(66,this)">所有空间');
dd.add(67,15, '<input type="checkbox" name="check" value="67" class="15" id="ch67" onClick="checkStatus(67,this)">空间精选');
dd.add(68,15, '<input type="checkbox" name="check" value="68" class="15" id="ch68" onClick="checkStatus(68,this)">首页推荐');
dd.add(69,15, '<input type="checkbox" name="check" value="69" class="15" id="ch69" onClick="checkStatus(69,this)">已分类空间');
dd.add(70,1, '<input type="checkbox" name="check" value="70" class="1" id="ch70" onClick="checkStatus(70,this)">后台菜单');
dd.add(89,65, '<input type="checkbox" name="check" value="89" class="65" id="ch89" onClick="checkStatus(89,this)">企业文化');
dd.add(90,65, '<input type="checkbox" name="check" value="90" class="65" id="ch90" onClick="checkStatus(90,this)">人力资源');
dd.add(95,65, '<input type="checkbox" name="check" value="95" class="65" id="ch95" onClick="checkStatus(95,this)">找工作');
dd.add(96,65, '<input type="checkbox" name="check" value="96" class="65" id="ch96" onClick="checkStatus(96,this)">网络招聘');
dd.add(103,65, '<input type="checkbox" name="check" value="103" class="65" id="ch103" onClick="checkStatus(103,this)">公司制度');
dd.add(114,69, '<input type="checkbox" name="check" value="114" class="69" id="ch114" onClick="checkStatus(114,this)">事业成长');
dd.add(115,69, '<input type="checkbox" name="check" value="115" class="69" id="ch115" onClick="checkStatus(115,this)">杂人杂记');
dd.add(117,69, '<input type="checkbox" name="check" value="117" class="69" id="ch117" onClick="checkStatus(117,this)">名人博客');
dd.add(118,69, '<input type="checkbox" name="check" value="118" class="69" id="ch118" onClick="checkStatus(118,this)">冷暖人生');
document.write(dd);
function checkStatus(no,chkBox){
checkPar(chkBox);//当子目录选中时,父目录也选中
var chks = document.getElementsByTagName('input');//得到所有input
for(var i=0;i <chks.length;i++){
if(chks[i].name.toLowerCase() == 'check'){//得到所名为check的input
if(chks[i].className == no){//ID等于传进父目录ID时
chks[i].checked = chkBox.checked;//保持选中状态和父目录一致
checkStatus(chks[i].value,chks[i]);//递归保持所有的子目录选中
}
}
}
}
function checkPar(chkBox) {
if(chkBox.name.toLowerCase() == 'check' && chkBox.checked && chkBox.className != 0) {//判断本单击为选中,并且不是根目录,则选中父目录
var chkObject = document.getElementById("ch"+chkBox.className);//得到父目录对象
chkObject.checked=true;
checkPar(chkObject);
}
}
function chkAll() {
$("input[name='check']").attr("checked",true);
}
function noChkAll(){
$("input[name='check']").attr("checked",false);
}
</script>
注意,使用时,请务必保证name="check" 是tree里的,如果有其它的名字冲突,会影响效果。
以id重复来达到效果,并不符合id唯一设计要求,但是这里足以满足这个需求,大家有好的意见,请跟贴。
分享到:
相关推荐
反之,如果我们取消选中一个子节点,其父节点也会随之取消选中,除非其他子节点仍然被选中,这时父节点会保持一种半选状态,即部分子节点被选中。 在实现dtree checkBox的过程中,主要涉及以下几个关键知识点: 1....
在数据树中,复选框可以表示节点的状态,例如,选中一个父节点可能意味着选中其所有子节点。 3. **JavaScript实现**:`dtree_checkbox.js` 文件很可能是实现这个功能的JavaScript代码。这可能包括了添加、删除、...
反之,如果所有子节点都未选中,父节点也应该未被选中。这种级联选择的实现需要遍历树结构并更新相关节点的状态。 4. **反向级联**:除了级联选择外,还应提供反向级联的选项,即改变父节点的状态会影响到子节点的...
反之,如果父节点被选中,其所有子节点也可能默认被选中。这样的逻辑可能会过于简单,无法满足复杂的应用场景。改进可能包括添加自定义的全选/全不选功能,以及更灵活的父子节点关联规则。 2. **性能优化**:随着树...
3. **递归处理**:在处理子节点选中状态时,可能需要递归遍历整个子树,确保选中/取消选中操作的正确传播。 4. **API设计**:提供方法用于获取所有选中节点、清空选中项、全选等操作,方便外部程序调用。 ### 四、...
- **交互设计**:考虑全选/全不选、父节点与子节点间的联动效果,如父节点的选中状态应根据其所有子节点的选中状态自动调整。 4. **权限管理**: - **角色权限**:权限树常用于分配角色的权限,角色是一组预定义...
- 状态同步:如果Checkbox与父节点关联,当父节点的Checkbox状态改变时,需要同步更新所有子节点的状态。 4. **完整实例** 提供的压缩包文件“dtree”很可能包含了dTree的源码、示例HTML文件以及相关的CSS和...
这个特定的压缩包文件“dtree_role.rar_dtree checkbox ro”似乎关注的是`dtree`的一个特性,即带有复选框(checkbox)的功能,并且进行了性能优化,特别是关于全选、选择父节点以及子节点自动选中的操作。...
4. **级联选择**:如果应用了级联选择的逻辑,那么当父节点的复选框被选中时,其所有子节点的复选框应自动被选中;反之,如果父节点的复选框被取消,其所有子节点的复选框也应该被取消。这需要通过递归函数来处理。 ...
当一个节点被选中或取消选中时,所有其子节点和父节点的复选框状态都应相应地改变。这是通过递归调用`cc`函数实现的,它会检查当前节点的所有子节点,并根据当前节点的状态更新它们的复选框状态。 例如,如果一个...
1. **层级展示**:`dtree`能够将数据组织成树状结构,每一级节点都可以有子节点,呈现出清晰的层次关系。 2. **动态加载**:对于大型数据集,`dtree`支持按需加载,即只有当用户展开某个节点时才加载其子节点,提高...
3. **数据结构**:DTree通常以JSON或数组形式存储树形数据,每个节点包含id、父节点id、文本、子节点等信息。这种数据结构便于遍历和渲染树形结构。 4. **节点渲染**:DTree的每个节点通常由HTML元素(如`<li>`和`...
3. **半选状态**:部分子节点被选中时,父节点显示为半选状态,表明不是所有子节点都被选中。 4. **全选/全取消**:提供全选和全取消的快捷操作,可以一键选中或取消所有节点。 5. **事件处理**:支持点击事件,当...
3. **级联选择**:父节点的选中状态是否影响其所有子节点。 4. **回溯状态**:当节点被折叠后,如何保存并恢复其展开时的选中状态。 5. **数据同步**:当`dtree`的状态改变时,如何同步到服务器端或者其他的客户端...
3. **父节点(Parent Node)**: 拥有子节点的节点,可以展开或折叠以显示或隐藏其子节点。 4. **子节点(Child Node)**: 属于某个父节点的节点,可以在父节点被展开后显示。 5. **叶子节点(Leaf Node)**: 没有...
在带复选框的树中,每个节点都表示一个可以被选中的项目,节点之间通过父节点和子节点的关系形成层次。 2. **复选框**:复选框是用户界面中的一个重要元素,用户可以用来选择或取消选择某个选项。在树结构中,复选...
7. **可访问性和适配性**: 为了满足不同用户的需求,`checkBoxTree`应该考虑键盘导航、屏幕阅读器支持以及响应式设计,使其在各种设备和辅助技术下都能正常使用。 8. **测试和调试**: 实现`checkBoxTree`后,需要...
通过添加复选框,用户可以方便地勾选或取消勾选节点,而相应的逻辑(如父节点根据子节点状态自动调整选中状态)则需要在源码中进行实现或配置。 dTree与JavaScript Tree标签相关,表明它是用JavaScript编写的,适用...
反之,如果所有子节点都取消选中,父节点也应取消选中。这个修复可能涉及到遍历树结构,更新每个节点的选中状态。 解决这个问题的关键在于正确的递归算法。在JavaScript中,可以使用递归函数遍历树的每一层,检查每...
例如,如果父节点被选中,其所有子节点可能都会被自动选中,反之亦然。这种联动效果简化了用户在处理大量数据时的工作。 3. **权限管理**:由于描述中提到了“权限”,这意味着jstree_checkbox可能集成了一些与权限...