用过代码编辑器的都知道，代码的层次结构可以折叠和展开，其中同级之间还有竖线条连接，这样的样式易于找到同级别元素，在很多应用场景都很适用，比如文档树、目录树。如果树的数据过大渲染太多dom到页面势必会造成性能严重损耗，那么会采取虚拟滚动技术方案只渲染可见区域的数据，所以dom tree就不能有包含父子关系否则会很难处理，最好就是拍平，在dom中表现都是同级别元素，但是在界面显示上却要有层级关系。一维dom树的解决方案我写了个组件qtree，样式大致如下：

特点：

1. 一维dom结构，易于做虚拟滚动和动态渲染

2. 原生js实现，无其他任何依赖

3. 样式美观

使用：

页面引入qtree.js和qtree.css之后使用renderQtreeData渲染数据

renderQtreeData(data, document.getElementById('tree-ul'));

容器元素必须是ul。

data的数据结构：

[
	{
		title: 'xxxxx3333333',
		id: 3,
		children: [
			{
				title: 'xxxxx3333333.1',
				id: 4
			},
			{
				title: 'xxxxx3333333.4',
				id: 7,
				children: [
					{
						title: 'xxxxx3333333.4.1',
						id: 8
					},
					{
						title: 'xxxxx3333333.4.2',
						id: 9
					},
					{
						title: 'xxxxx3333333.4.3',
						id: 10
					},
				]
			},
		]
	},
	{
		title: 'xxxxx4444444',
		id: 12
	}
 ];

注意：id不能出现重复

代码托管于github：https://github.com/mizuiren/qtree