dtree的扩展使用

       前段时间用了js的插件dtree，确实是比较好上手，但是遗憾的是没有多选框，网上也看到了关于多选框的扩展，但要么没有办法动态的删除和扩展节点，要么节点上下级的级联有问题，或者只支持两级菜单级联……本文主要是基于dtree的基本功能，实现了以下功能：

       1、增加了多选框。

       2、增加了多选框的级联操作，当点击当前多选框时，其下级(无限级)所有多选框状态与当前点击的多选框保持一致；如果选中当前多选框，其所有上级多选框均被选中；取消当前多选框的选中状态，如果其同级所有菜单都未选中则取消其上级菜单的选中状态，并一直级联到顶层菜单。

       3、支持返回所有选中菜单的功能。

 

修改方法（也可以修改dtree.js文件，但是由于我本地牵扯到后台加载二级管理员已有菜单在前台默认选中，并支持动态增删功能，所以没有写在dtree.js里面）：

1、dtree加载部分：

<script type="text/javascript">
	var d = new dTree('d');
	d.add(0,-1,'<input type="checkbox" name="dTreeChBox" style="display:none;" value="-1" id="0"/>'+'功能列表');
	$.ajax({
		url:"user_loadMenu.do",
		type:"post",
		cache:false,
		async:false,
		dataType:"json",
		error:function(xhr,status,err){
			alert("系统错误，稍后重试！！");
		},
		success:function(data){
			for(var i = 0; i < data.length; i++){
				d.add(data[i].nodeId,data[i].pNodeId,'<input type="checkbox" onclick="clickCheckBox(this,true)" name="dTreeChBox" style="VERTICAL-ALIGN:middle;WIDTH:18px;HEIGHT:18px;" value="'+data[i].pNodeId+'" id="'+data[i].nodeId+'"/>'+data[i].nodeName,data[i].linkUrl,data[i].title,data[i].target);
			}
		}
	});
	document.write(d);
	d.openAll();
</script>

 2、多选框事件部分：

function clickCheckBox(obj,flag){
	//flag用于保持所有其子节点与当前节点状态相同（由于牵扯到递归，所以用flag只对点击时的当前节点有效）
	if(flag){
		subSameWithParent(obj);
	}
	var flag = false;
	//alert($("[name=dTreeChBox]:checked").length);
	//选中所有其父节点
	var id = $(obj).attr("id");
	var pId= $(obj).val();
	if($(obj).attr("checked")){//当前节点选中，如果其父节点没有选中，则选中父节点
		if(!$("#"+pId).attr("checked") && pId != 0){
			$("#"+pId).attr("checked",true);
			clickCheckBox($("#"+pId)[0],flag);
		}
	}else{//取消当前节点选中状态，如果所有同级节点都未选中，更改父节点为未选中状态
		if($("[name=dTreeChBox][value="+pId+"]:checked").length == 0){
			if($("#"+pId).attr("checked") && pId != 0){
				$("#"+pId).attr("checked",false);
				clickCheckBox($("#"+pId)[0],flag);
			}
		}
		
	}
}

 

//点击当前节点，所有其下级（无限级）菜单状态与其保持一致的代码
function subSameWithParent(ob){
	var id = $(ob).attr("id");
	$("[name=dTreeChBox][value="+id+"]").attr("checked",$(ob).attr("checked"));
	if($("[name=dTreeChBox][value="+id+"]").length != 0){
		for(var i = 0; i < $("[name=dTreeChBox][value="+id+"]").length ; i++){
			var subObj = $("[name=dTreeChBox][value="+id+"]")[i];
			subSameWithParent(subObj);
		}
	}
}

 3、获取选中菜单节点ID的代码：

 

var str = "";
for(var i = 0; i < $("[name=dTreeChBox]:checked").length; i++){
	str += $("[name=dTreeChBox]:checked").eq(i).attr("id")+",";
}
str = str.substring(0,str.length-1);

           返回的str为ID的以逗号分隔的字符串，可以通过ajax或是将其赋值给dom元素在通过form表单提交，由后台做统一处理。