注: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 选中父节点,子节点全选。子节点取消选中,父节点取消,并且此节点保持原有状态
该资料包括dtree和dtree_checkbox(dtree复选框),众所周知,dtree是个不错的JS控件,好资料当然要和大家分享^_^
本工程使用dTree组件实现树形菜单的展示 有静态树形菜单和动态(从数据库获取数据)树形菜单展示两种 ...菜单既有普通的树结构展示,也有方便做权限等功能的带选择框的展示(含带默认选中checkbox的处理)
三个常用树控件dtree最新dtree带checkbox还有mztreeview1.0跟2.0里面还有本人写的部分demo如果是常用开发请使用mztree1.0或dtree 如果有特殊需求请使用带checkbox的dtree或mztree2.0
dtree +checkBox全选 。。。。dtree +checkBox全选 。。。。dtree +checkBox全选 。。。。dtree +checkBox全选 。。。。dtree +checkBox全选 。。。。dtree +checkBox全选 。。。。
getSelectedNodes()['value']:获取选中节点id,即选中checkbox的value,数组 getSelectedNodes()['name']:获取选中节点name,数组 getSelectedNodes()['count']:获取选中节点个数,数字 5、加addCbx方法,专...
有dtree做的 带checkbox的权限树
dtree支持动态添加,删除节点dtree支持动态添加,删除节点dtree支持动态添加,删除节点dtree支持动态添加,删除节点
本人根据dtree添加了checkbox的功能,能默认选中,方便好用
tqdtree-增加删除修改节点功能 dtree删除 dtree修改 dtree删除节点 dtree删除功能 dtree修改节点 dtree修改功能。 原有的建立树形菜单非常好用, 不过缺少修改节点 和删除节点的功能,本人增加这两个功能,共同学习...
在dtree原有基础上添加了checkbox功能
dtree带checkbox,java项目
DTree CheckBox JS树 无限级树 灵活
layui dtree树形结构,点击文本框显示下拉树结构。
修改了传统带checkbox的dtree中选中复选框时的操作,大大提升了全选,选父节点时子节点全部选中 等的速度
dtree 保存在csdn以便以后使用 dtree 树结构 前端
dtree 框架 还有checkbox 选择框 dtree 框架 还有checkbox 选择框
NULL 博文链接:https://hucanyang.iteye.com/blog/899405
dtree树dtree树dtree树dtree树
Dtree Jquery动态生成树节点 http://www.iteye.com/topic/350056