添加删除完善性功能——javascript循环添加与循环删除

关注

原创最新推荐文章于 2026-08-03 11:21:23 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

Win11高DPI屏幕下鼠标指针模糊、太小看不清？一招教你完美适配4K/2K显示器本文详细介绍了Win11在高DPI屏幕下鼠标指针模糊、太小看不清的解决方案，包括系统级优化、专业设计场景配置和硬件级解决方案。通过调整指针尺寸、颜色方案和注册表设置，帮助用户完美适配4K/2K显示器，提升视觉体验和工作效率。阅读详情

业务：添加删除权限的完善性功能，一是循环添加(子选父必选)，一是循环删除(父删子必删)。

循环添加没有问题：

//递归，循环添加父
function addParent(chkValue) {
	var pNode = document.getElementById(chkValue);
	if(pNode!=null){
		pNode.checked = true;
		$.get("permissionAction!grantPermission?roleId=" + roleId + "&menuId=" + pNode.id + "¶m=true", function(data, status){
		});
		addParent(pNode.value);
	}
}

循环删除：

初始版：

function delSon(menuId) {
	var dd = document.getElementsByName("checkbox");
	for(i=0; i<dd.length; i++) {
		if(dd[i].value == menuId) {
			dd[i].checked = false;
			//$.get("permissionAction!grantPermission?roleId=" + roleId + "&menuId=" + dd[i].id + "¶m=false", function(data, status){
			});
			delSon(dd[i].id);
		}
	}
}

不同于一根树跑到底的循环添加(一个子节点只有一个父节点)，循环删除的时候，一个父节点可能有多个子节点，子节点下有可有多个子子节点。第一版的运行结果就是，只能删除父节点的第一个子节点下的全部节点(测试数据为3层树)。原因：一重循环，循环内部调用递归方法，已经跳出了循环；只有叶子结点没有子节点，不会调用递归，循环才会执行完毕。

(调试时可先如上把jquery注掉，以便测试；javascript测试，可在html页面里方便调试)

修正实现版：

var ddd = document.getElementsByName("checkbox");
//循环删除子节点
function delSon(menuId) {
	for(i=0; i<ddd.length; i++){
		var chk1 = document.getElementById(ddd[i].id);
		if(menuId == ddd[i].value){
			chk1.checked = false;
		}else if(findParent(ddd[i].value, menuId)){
			chk1.checked = false;
		}else{
			alert("这个是你点击的那个或者是不能删除的！");
		}
	}
}
function findParent(chkValue, num) {
	var flag = false;
	var pNode = document.getElementById(chkValue);	//父节点
	if(pNode!=null){
		if(pNode.value == num){
			flag = true;
			return flag;
		}else{
			findParent(pNode.value, flag);
		}
	}
	return flag;
}

业务：上面的问题，我其实钻入了业务盲点，删除需谨慎，数据是大计，循环删除更是忌中忌。

子选父必选，循环添加，没有问题；而父删子必删，循环删除，就有点危险了。故业务变更为“存在子，则不能删除父”，谨防错删、多删。

最终版本：

//jquery添加删除权限(修改权限)
function permission(chk) {
	var roleId = <%=roleId%>;
	var menuId = chk.id;
	if(chk.checked == true) {
		//子选父必选，添加子同时添加父
		addParent(chk.value);
		$.get("permissionAction!grantPermission?roleId=" + roleId + "&menuId=" + menuId + "¶m=true", function(data, status){
		});
	} else {
		//存在子菜单，不能删除父菜单
		if(!delSon(menuId)) {
			chk.checked = true;
		} else {
			$.get("permissionAction!grantPermission?roleId=" + roleId + "&menuId=" + menuId + "¶m=false", function(data, status){
			});
		}
	}
}
//判断是否可以删除菜单，存在子菜单则不能删除
function delSon(menuId) {
	var dd = document.getElementsByName("checkbox");
	for(i=0; i<dd.length; i++) {
		if(menuId == dd[i].value) {
			alert("请先删除子菜单！");
			return false;
		}
	}
	return true;
}

//递归，循环添加父
function addParent(chkValue) {
	var pNode = document.getElementById(chkValue);
	if(pNode!=null){
		pNode.checked = true;
		$.get("permissionAction!grantPermission?roleId=" + roleId + "&menuId=" + pNode.id + "¶m=true", function(data, status){
		});
		addParent(pNode.value);
	}
}