<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>树结构</title>
		<link href="../../assets/css/pearone.css" rel="stylesheet" />
		<link href="../../component/layui/css/layui.css" rel="stylesheet" />
		<link href="../../assets/css/dtree/dtree.css" rel="stylesheet"/>
		<link href="../../assets/css/dtree/font/dtreefont.css" rel="stylesheet"/>
		<link href="../../component/font-awesome/css/font-awesome.css" rel="stylesheet" />
	    <style>
			body{
				margin:10px;
				background-color: lightgray;
			}
		</style>
	</head>
	<body>
         
		 <div class="layui-row layui-col-space10">
			 <div class="layui-col-md6">
				 <div class="layui-card">
				 			 <div class="layui-card-header">
				 				嵌套数据格式
				 			 </div>
				 			 <div class="layui-card-body">
				 				  <ul id="demoTree" class="dtree" data-id="0"></ul>
				 			      <a style="margin-top:25px;margin-left:15px;" href="http://www.wisdomelon.com/DTreeHelper/" class="layui-btn layui-btn-normal">API 文档</a>
							 </div>
				 </div>
			 </div>
			 
			 
			 <div class="layui-col-md6">
			 			<div class="layui-card">
			 						 <div class="layui-card-header">
			 						  list集合
									 </div>
			 						 <div class="layui-card-body">
			 							 <ul id="demoTree2" class="dtree" data-id="0"></ul>
			 						 </div>
			 			</div>	 
			 </div>
			 
			 
			 
		
			 
		 </div>
		 
		
	
		<script src="../../component/layui/layui.js"></script>
		<script src="../../modules/lay-config.js"></script>
		<script>
			layui.use(['dtree','jquery'],function(){
				    var $ = layui.jquery,
				        dtree = layui.dtree;
				
				    // 初始化树
				    dtree.render({
				       elem: "#demoTree",
					   method:'get',
				       url: "../../api/dtree.json"
				    });
				    
					dtree.render({
					  elem: "#demoTree2",
					  method:'get',
					  url: "../../api/dataTree2.json",
					  dataFormat: "list",  //配置data的风格为list
					  checkbar:true //开启复选框
					});
					
				
					
				    // 绑定节点点击
				    dtree.on("node('demoTree')" ,function(obj){
				      layer.msg(JSON.stringify(obj.param));
				    });
				
			});
		</script>
	</body>
</html>
