layui框架学习（30：树形模块）

  Layui中的树形组件模块tree用于以树形形式显示上下级结构的数据，类似于winform中的tree控件。tree模块的基本用法及显示效果如下所示：

	<div id="test"></div><br />
	<script>
	  layui.use(['tree','layer'], function(){
		var tree = layui.tree;
		var layer = layui.layer;
		var $ = layui.jquery;
	   
		tree.render({
		  elem: '#test'  ,
		  data:[
			  {
				  title:'中国古代四大发明',
				  children:[
					  {
						  title:'火药'
					  },
					  {
						  title:'造纸术'
					  },
					  {
						  title:'活字印刷术'
					  },
					  {
						  title:'指南针'
					  }
					  ]
			  },
			  {
				  title:'中国省市',
				  children:[
					  {
						  title:'直辖市',
						  children:[
							  {
								  title:'北京'
							  },
							  {
								  title:'天津'
							  },
							  {
								  title:'上海'
							  },
							  {
								  title:'重庆'
							  }
						  ]
					  },
					  {
						  title:'河北',
						  children:[
							  {
								  title:'石家庄'
							  },
							  {
								  title:'秦皇岛'
							  },
							  {
								  title:'保定'
							  },
							  {
								  title:'邯郸'
							  }
						  ]
					  },
					  {
						  title:'山东',
						  children:[
							  {
								  title:'济南'
							  },
							  {
								  title:'淄博'
							  },
							  {
								  title:'青岛'
							  },
							  {
								  title:'威海'
							  }
						  ]
					  }
				  ]
			  }
			  ]		  
		});
	  });
	</script>

  基础参数data配置树形组件的数据源。data中的数据有格式规范，可以类比winform中的tree控件。data中的节点集合类似于tree控件中的nodes属性，每个节点对应一个node对象，其中必填节点属性为title，类似于node对象的text属性，每个节点可以设置id属性，用于唯一标识该节点，节点的children属性设置节点的子节点结合，类似于node对象中nodes属性。同时节点的spread、checked、disabled属性控制节点的展开状态、选中状态及禁用状态。data属性的详细数据格式请参见参考文献2。
  基础参数id设置树形组件实例的唯一标识，通过该标识，配合tree模块的相关函数可以获取或设置tree组件的节点相关数据。
  基础参数showCheckbox设置是否显示复选框，默认为false，即不显示。其显示效果如下所示：

  基础参数accordion设置是否开启手风琴模式。默认为false，即同一级的节点可以任意展开多个，为true时只能展开单个节点。其显示效果如下所示：

  基础参数onlyIconControl设置是否仅允许点击节点图标展开/收缩节点。默认为false，值为true值只能点击节点图标展开/收缩节点。
  基础参数isJump设置是否跳转到节点的href属性设置的url地址。可以是相对地址，也可以是独立的网站地址。
  基础参数showLine设置是否显示连接线。默认为true。其显示效果如下所示：

  基础参数edit设置是否显示节点的操作图标。值可以为true/false，为true时显示修改和删除图标，也可以用数组指定显示的图标和顺序，目前支持add、update、del三种。其显示效果如下所示：

  除了上述基本参数，tree模块的click、oncheck、operate设置处理节点被点击、复选框被点击和操作节点时的事件处理函数。
  基于tree组件设置的id属性，调用tree模块的tree.getChecked函数可以获取指定id的tree组件中所有选中的节点数据集合，调用tree.setChecked函数可以设置指定id的tree组件中指定节点id集合的节点选中状态。

参考文献：
[1]B站：layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/