解决Ztree以checkbox复选框样式实现单选功能

最新推荐文章于 2025-06-10 09:02:45 发布

快乐on9仔

最新推荐文章于 2025-06-10 09:02:45 发布

阅读量4.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： JAVA Ztree

本文链接：https://blog.youkuaiyun.com/qq_42427924/article/details/81118936

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Ztree中通过监听复选框选中事件，实现原本为复选模式的Ztree节点只能单选的功能。通过定制方法处理选中事件，确保每次只有一个节点被选中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(document).ready(function() {
		//初始化树.
		$.fn.zTree.init($("#treeDemo"), setting);
		treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		$("#detail").hide();
	});

var setting = {
		check : {
			enable : true,
			autoCheckTrigger: true,
			chkboxType:{ "Y": "", "N": "" }
		},
		data : {
			simpleData : {
				enable : true
			}
		},
		async : {
			enable : true,
			url : "sys/menu/getMuneTree",
		},
		callback : {
			onCheck : testClick,
		}
	};

监听选中的复选框触发事件..接下来写方法了

//点击获取节点信息.  
	function testClick(e, treeId, treeNode) {
		//树对象
		treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		var nodes2 = treeObj.getCheckedNodes(true), v = "",ids = "";//获取所有选中的节点
		for(var i = 0 ; i < nodes2.length ; i++){
			//如果当前所有节点的id!=当前节点id
			if(nodes2[i].id != treeNode.id){
				nodes2[i].checked = false; //取消选中效果
				treeObj.updateNode(nodes2[i]);//更新所有选中的节点..
			}
		}
		var url = 'sys/menu/getDetail'; //测试Url
		$.post(url, {id : nodes2[0].id}, function(data) {
		 	form.val('example', {
			    "cMenuName": data.cMenuName
			    ,"cState": data.cState?true:false 
			    ,"cMenuUrl":data.cMenuUrl
			    ,"cMenuId":data.cMenuId
			    ,"cOrder":data.cOrder
			})
		}, "json");
	}