ztree显示、折叠所有节点

旧城等待， 2022-05-25 05:12 465阅读 0赞

<html>
    <head>
    	<title>zTree显示折叠节点</title>
    
    	<link rel="stylesheet" href="ztree/css/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-3.5.min.js"></script>
    	<script type="text/javascript" src="ztree/js/jquery.ztree.exhide-3.5.min.js"></script>
    	<style type="text/css">
    		.container{
    			padding-left: 20%;
    			padding-top: 10%;
    		}
    	</style>
    <script type="text/javascript">
    	$(function(){
    		init();
    	})
    	function init(){
    		var zNodes=[	//ztree 测试数据，也可以从数据库拉取
    			{
    				name:"清华大学",
    				open:true,
    				children:[
    					{
    						name:"数学一班",
    						open:true, 
    						children:[
    							{
    								name:"张朝阳"
    							},
    							{
    								name:"马云"
    							},
    							{
    								name:"刘亦菲"
    							},
    							{
    								name:"郭德纲"
    							}
    						]
    					},{
    						name:"数学二班",
    						open:true, 
    						children:[
    							{
    								name:"谢霆锋"
    							},
    							{
    								name:"杨紫琼"
    							},
    							{
    								name:"C罗"
    							},
    							{
    								name:"科比"
    							}
    						]
    					},{
    						name:"数学三班",
    						open:true, 
    						children:[
    							{
    								name:"詹姆斯"
    							},
    							{
    								name:"马化腾"
    							},
    							{
    								name:"汪峰"
    							},
    							{
    								name:"刘欢"
    							}
    						]
    					},{
    						name:"数学四班",
    						open:true, 
    						children:[
    							{
    								name:"李小龙"
    							},
    							{
    								name:"甄子丹"
    							},
    							{
    								name:"成龙"
    							},
    							{
    								name:"李连杰"
    							}
    						]
    					}
    				]
    			}
    		];
    
    		var setting = {		//ztree配置选项
    				data: {
    					key: {
    						name:"name",
    						title: "name"
    					}
    				}
    		};
    
    		zTreeObj = $.fn.zTree.init($("#tree-obj"), setting, zNodes);
    	};
    	function showOrHidden(){
    		var value=$("#checkbox").attr("value");
            var zTree = $.fn.zTree.getZTreeObj("tree-obj");
            if(value=='0'){
                zTree.expandAll(true);
                $("#checkbox").attr("value","1");
            }else{
                zTree.expandAll(false);
                $("#checkbox").attr("value","0");
    		}
    	}
    </script>
    </head>
    <body οnlοad="">
    	<div class="container">
    		<div class="search-bar">
    			<input id="checkbox"  type="checkbox" οnclick="showOrHidden()" value="0">显示<br>
    		</div>
    		<div class="content">
    			<ul id="tree-obj" class="ztree"></ul>
    		</div>
    	</div>
    
    </body>
    </html>

里面相关的js文件请到[https://download.csdn.net/download/www1056481167/10400569][https_download.csdn.net_download_www1056481167_10400569]下载(里面直接引用js即可，不用替换html代码)

[https_download.csdn.net_download_www1056481167_10400569]: https://download.csdn.net/download/www1056481167/10400569