ztree | 易学教程

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="ztree/zTreeStyle/zTreeStyle.css" type="text/css">
	<!-- 	<script type="text/javascript" src="ztree/js/jquery-1.4.4.min.js"></script>
			<script type="text/javascript" src="ztree/js/jquery.ztree.core.js"></script>
		<!-- 	<script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
			<script type="text/javascript" src="js/jquery.ztree.exedit.js"></script> -->
			<!-- <script type="text/javascript" src="ztree/js/jquery.ztree.all.js"></script> -->
		 
		    <link href="ztree/css/zTreeStyle/zTreeStyle.css" type="text/css" rel="stylesheet">
		     <script src="js/jquery.js" type="application/javascript"></script>
		     <script src="ztree/js/jquery.ztree.all.min.js"></script>
		 
	</head>
	<body>
		<br>
		<input type="button" name="btn" id="btn" value="btn" onclick="ff();" ><br>
		<div>
			 <ul id="tree" class="ztree" style="width:230px; overflow:auto;">
			 	
			 </ul>
		</div>

		
		 <script type="text/javascript">
		    	$(function(){						
		        var setting={
		            check: {
		                enable: true,
		                chkStyle: "checkbox"//显示 checkbox 选择框，默认checkbox可选择值radio
		            },
		            //添加回调函数
		           callback:{
		                onCheck:zTreeOnCheck
		            }
		        };
				var zTreeNodes=[
				    {"id":"1","name":"北京","open":true,children:[
				        {"id":"2","name":"东城区"},
				        {"id":"3","name":"朝阳区"}
				    ]},//open:true表示默认展开
				    {"id":"33","name":"重庆","open":false,children:[
				        {"id":"44","name":"巴南区",children:[
				            {"id":"256","name":"南泉"},
				            {"id":"98","name":"界石"}
				        ]},
				        {"id":"976","name":"渝中区"}
				    ]},
				     {"id":"3456","name":"江西","open":false,children:[
				        {"id":"9643","name":"南昌",children:[
				            {"id":"6754","name":"湾里"},
				            {"id":"98432","name":"瑶湖"}
				        ]},
				        {"id":"257995","name":"赣州"}
				    ]}
				];
				var city = $.fn.zTree.init($("#tree"), setting, zTreeNodes);    
			//第一个参数为zTree的DOM容器，第二个为zTree设置详情可见官网api,第三个为zTree的节点数据 
				function zTreeOnCheck(event, treeId, treeNode) {
				  
				}	
					// ****************************此处回显*************************************************************
			　　//获取到树    
			　　var zTree_Menu = $.fn.zTree.getZTreeObj("tree"); 
			   //获取将要回显的值，即树节点名称
			　　var ids = '2,3';
				var nodes = zTree_Menu.transformToArray(zTree_Menu.getNodes());  
				if (nodes.length>0) {
					for(var i=0;i<nodes.length;i++){
						if(ids.indexOf(nodes[i].id) >= 0){
							nodes[i].checked = true;
							zTree_Menu.updateNode(nodes[i]);
						}
					}
				}
					
				});
				// ****************************此处回显*************************************************************
				
				function ff(){
					var treeObj = $.fn.zTree.getZTreeObj("tree"),
					nodes = treeObj.getCheckedNodes(true);
							console.log(nodes);							
					 for (var i = 0; i < nodes.length; i++) {
						 // v += nodes[i].name + ",";
						 console.log("id--" + nodes[i].id ); //获取选中节点的值
					 }
				}
				
				
		    </script>

	</body>
</html>
来源：CSDN
作者：bug-007
链接：https://blog.csdn.net/weixin_43326384/article/details/103916302
标签
ztree