（jq）封装jQuery树形插件_基于jquery的 tree checkbox插件-优快云博客

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>zTree树形结构菜单</title>
	<!-- import css -->
	<link rel="stylesheet" href="css/reset.min.css">
	<style>
		* {
			-webkit-user-select: none;
		}

		.container {
			box-sizing: border-box;
			margin: 20px auto;
			padding: 10px;
			width: 600px;
			border: 1px dashed #AAA;
		}

		.level {
			display: none;
			font-size: 14px;
			margin-left: 10px;
		}

		.level.level0 {
			display: block;
			margin-left: 0;
		}

		.level li {
			position: relative;
			padding-left: 15px;
			line-height: 30px;
		}

		.level li .icon {
			position: absolute;
			left: 0;
			top: 9px;
			box-sizing: border-box;
			width: 12px;
			height: 12px;
			line-height: 8px;
			text-align: center;
			border: 1px solid #AAA;
			background: #EEE;
			cursor: pointer;
		}

		.level li .icon:after {
			display: block;
			content: "+";
			font-size: 12px;
			font-style: normal;
		}

		.level li .icon.open:after {
			content: "-";
		}

		.level li .title {
			color: #000;
		}
	</style>
</head>

<body>
	<div class="container">
		<ul class="level level0" id="tree1"></ul>
	</div>

	<!-- import js -->
	<script src="js/jquery.min.js"></script>
	<script src="js/ztree-plugin.js"></script>
	<script>
		let result = [{
			"name": "前端开发基础",
			"open": true,
			"children": [{
				"name": "HTML5核心知识",
				"children": [{
					"name": "新增语义化标签"
				},
				{
					"name": "表单元素新特性"
				},
				{
					"name": "音视屏处理"
				},
				{
					"name": "canvas和webGL"
				},
				{
					"name": "新增JS中的API"
				}
				]
			},
			{
				"name": "CSS3核心知识",
				"children": [{
					"name": "新增选择器"
				},
				{
					"name": "字体图标"
				},
				{
					"name": "常用的样式属性"
				},
				{
					"name": "背景的处理"
				},
				{
					"name": "transform变形"
				},
				{
					"name": "CSS3动画",
					"children": [{
						"name": "transition过度动画"
					},
					{
						"name": "animation帧动画"
					},
					{
						"name": "3D动画的处理"
					}
					]
				},
				{
					"name": "新盒子模型属性",
					"children": [{
						"name": "flex弹性盒子模型"
					},
					{
						"name": "box-sizing新盒子模型属性"
					},
					{
						"name": "cloumns多列布局"
					}
					]
				}
				]
			},
			{
				"name": "实战案例和布局技巧",
				"children": [{
					"name": "实战案例练习",
					"children": [{
						"name": "居中处理"
					},
					{
						"name": "同行排列"
					},
					{
						"name": "圣杯布局"
					},
					{
						"name": "双飞翼布局"
					},
					{
						"name": "滑动门"
					},
					{
						"name": "面包屑导航"
					}
					]
				},
				{
					"name": "响应式布局开发",
					"children": [{
						"name": "viewport和dpi适配"
					},
					{
						"name": "@media媒体查询"
					},
					{
						"name": "rem等比缩放"
					},
					{
						"name": "百分比布局"
					}
					]
				}
				]
			}
			]
		}, {
			"name": "前端开发核心",
			"children": [{
				"name": "JS（ES6）核心",
				"children": [{
					"name": "基础知识"
				},
				{
					"name": "闭包作用域及堆栈内存"
				},
				{
					"name": "面向对象和THIS处理"
				},
				{
					"name": "同步异步（事件循环、微任务、宏任务）"
				},
				{
					"name": "DOM事件和事件委托"
				},
				{
					"name": "设计模式"
				}
				]
			},
			{
				"name": "AJAX前后端交互",
				"children": [{
					"name": "AJAX基础知识"
				},
				{
					"name": "跨域策略请求"
				},
				{
					"name": "TCP协议相关基础知识"
				},
				{
					"name": "性能和安全的初步优化"
				},
				{
					"name": "常用的AJAX库和插件"
				}
				]
			},
			{
				"name": "底层原理和高阶JS函数",
				"children": [{
					"name": "函数柯里化"
				},
				{
					"name": "compos函数"
				},
				{
					"name": "惰性思想"
				},
				{
					"name": "组件插件封装"
				},
				{
					"name": "底层源码解读"
				}
				]
			}
			]
		}, {
			"name": "前端工程化",
			"children": [{
				"name": "VUE全家桶",
				"children": [{
					"name": "基础知识"
				},
				{
					"name": "MVVM实现原理"
				},
				{
					"name": "路由处理"
				},
				{
					"name": "vuex公共状态管理"
				},
				{
					"name": "element-ui组件应用和二次封装"
				}
				]
			},
			{
				"name": "REACT全家桶",
				"children": [{
					"name": "基础知识"
				},
				{
					"name": "MVC实现原理"
				},
				{
					"name": "DOM DIFF"
				},
				{
					"name": "Virtual DOM"
				},
				{
					"name": "路由处理"
				},
				{
					"name": "公共状态管理",
					"children": [{
						"name": "REACT-REDUX、DAVS/SAGA等"
					},
					{
						"name": "compos函数"
					},
					{
						"name": "惰性思想"
					},
					{
						"name": "组件插件封装"
					},
					{
						"name": "底层源码解读"
					}
					]
				},
				{
					"name": "高阶租价"
				},
				{
					"name": "antd组件应用和二次封装"
				}
				]
			},
			{
				"name": "底层原理和高阶JS函数",
				"children": [{
					"name": "函数柯里化"
				},
				{
					"name": "compos函数"
				},
				{
					"name": "惰性思想"
				},
				{
					"name": "组件插件封装"
				},
				{
					"name": "底层源码解读"
				}
				]
			},
			{
				"name": "工程化开发部署",
				"children": [{
					"name": "webpack"
				},
				{
					"name": "git"
				},
				{
					"name": "linux"
				}
				]
			}
			]
		}, {
			"name": "前端开发热门点",
			"children": [{
				"name": "TypeScript"
			},
			{
				"name": "flutter"
			},
			{
				"name": "react native"
			},
			{
				"name": "小程序"
			},
			{
				"name": "性能和安全的优化"
			}
			]
		}]
		$('#tree1').ztree(result);

	</script>
	<script>
		// 1.动态绑定层级结构数据
		/* let $tree1 = $('#tree1'),
			count = 0;
		let bind = function bind(result) {
			count++;
			let str = ``;
			result.forEach(item => {
				str += `<li>
					<a href="#" class="title">${item.name}</a>
					${item.children ? `
						<em class="icon ${item.open ? 'open' : ''}"></em>
						<ul class="level level${count}" style="display: ${item.open ? 'block' : 'none'};">
							${bind(item.children)}
						</ul>
					`: ``}
				</li>`;
			});
			count--;
			return str;
		};
		let result = [{
			"name": "前端开发基础",
			"open": true,
			"children": [{
				"name": "HTML5核心知识",
				"children": [{
					"name": "新增语义化标签"
				},
				{
					"name": "表单元素新特性"
				},
				{
					"name": "音视屏处理"
				},
				{
					"name": "canvas和webGL"
				},
				{
					"name": "新增JS中的API"
				}
				]
			},
			{
				"name": "CSS3核心知识",
				"children": [{
					"name": "新增选择器"
				},
				{
					"name": "字体图标"
				},
				{
					"name": "常用的样式属性"
				},
				{
					"name": "背景的处理"
				},
				{
					"name": "transform变形"
				},
				{
					"name": "CSS3动画",
					"children": [{
						"name": "transition过度动画"
					},
					{
						"name": "animation帧动画"
					},
					{
						"name": "3D动画的处理"
					}
					]
				},
				{
					"name": "新盒子模型属性",
					"children": [{
						"name": "flex弹性盒子模型"
					},
					{
						"name": "box-sizing新盒子模型属性"
					},
					{
						"name": "cloumns多列布局"
					}
					]
				}
				]
			},
			{
				"name": "实战案例和布局技巧",
				"children": [{
					"name": "实战案例练习",
					"children": [{
						"name": "居中处理"
					},
					{
						"name": "同行排列"
					},
					{
						"name": "圣杯布局"
					},
					{
						"name": "双飞翼布局"
					},
					{
						"name": "滑动门"
					},
					{
						"name": "面包屑导航"
					}
					]
				},
				{
					"name": "响应式布局开发",
					"children": [{
						"name": "viewport和dpi适配"
					},
					{
						"name": "@media媒体查询"
					},
					{
						"name": "rem等比缩放"
					},
					{
						"name": "百分比布局"
					}
					]
				}
				]
			}
			]
		}, {
			"name": "前端开发核心",
			"children": [{
				"name": "JS（ES6）核心",
				"children": [{
					"name": "基础知识"
				},
				{
					"name": "闭包作用域及堆栈内存"
				},
				{
					"name": "面向对象和THIS处理"
				},
				{
					"name": "同步异步（事件循环、微任务、宏任务）"
				},
				{
					"name": "DOM事件和事件委托"
				},
				{
					"name": "设计模式"
				}
				]
			},
			{
				"name": "AJAX前后端交互",
				"children": [{
					"name": "AJAX基础知识"
				},
				{
					"name": "跨域策略请求"
				},
				{
					"name": "TCP协议相关基础知识"
				},
				{
					"name": "性能和安全的初步优化"
				},
				{
					"name": "常用的AJAX库和插件"
				}
				]
			},
			{
				"name": "底层原理和高阶JS函数",
				"children": [{
					"name": "函数柯里化"
				},
				{
					"name": "compos函数"
				},
				{
					"name": "惰性思想"
				},
				{
					"name": "组件插件封装"
				},
				{
					"name": "底层源码解读"
				}
				]
			}
			]
		}, {
			"name": "前端工程化",
			"children": [{
				"name": "VUE全家桶",
				"children": [{
					"name": "基础知识"
				},
				{
					"name": "MVVM实现原理"
				},
				{
					"name": "路由处理"
				},
				{
					"name": "vuex公共状态管理"
				},
				{
					"name": "element-ui组件应用和二次封装"
				}
				]
			},
			{
				"name": "REACT全家桶",
				"children": [{
					"name": "基础知识"
				},
				{
					"name": "MVC实现原理"
				},
				{
					"name": "DOM DIFF"
				},
				{
					"name": "Virtual DOM"
				},
				{
					"name": "路由处理"
				},
				{
					"name": "公共状态管理",
					"children": [{
						"name": "REACT-REDUX、DAVS/SAGA等"
					},
					{
						"name": "compos函数"
					},
					{
						"name": "惰性思想"
					},
					{
						"name": "组件插件封装"
					},
					{
						"name": "底层源码解读"
					}
					]
				},
				{
					"name": "高阶租价"
				},
				{
					"name": "antd组件应用和二次封装"
				}
				]
			},
			{
				"name": "底层原理和高阶JS函数",
				"children": [{
					"name": "函数柯里化"
				},
				{
					"name": "compos函数"
				},
				{
					"name": "惰性思想"
				},
				{
					"name": "组件插件封装"
				},
				{
					"name": "底层源码解读"
				}
				]
			},
			{
				"name": "工程化开发部署",
				"children": [{
					"name": "webpack"
				},
				{
					"name": "git"
				},
				{
					"name": "linux"
				}
				]
			}
			]
		}, {
			"name": "前端开发热门点",
			"children": [{
				"name": "TypeScript"
			},
			{
				"name": "flutter"
			},
			{
				"name": "react native"
			},
			{
				"name": "小程序"
			},
			{
				"name": "性能和安全的优化"
			}
			]
		}]

		let str = bind(result);
		$tree1.html(str);


		// 2.实现无限极展开（事件委托：可以处理动态绑定的元素）
		$tree1.on('click', function (ev) {
			let target = ev.target;
			if (target.tagName === 'EM') {
				// 把原生JS对象变为JQ对象，目的是使用JQ中的方法
				let $target = $(target),
					$next = $target.next('ul');
				// toggleXxx特点：和现在的值相反
				$target.toggleClass('open');
				$next.stop().slideToggle(200);
			}
		}); */
	</script>
</body>

</html>

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
button,
input,
textarea,
th,
td {
    margin: 0;
    padding: 0
}

body {
    font-size: 12px;
    font-style: normal;
    font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif
}

small {
    font-size: 12px
}

h1 {
    font-size: 18px
}

h2 {
    font-size: 16px
}

h3 {
    font-size: 14px
}

h4,
h5,
h6 {
    font-size: 100%
}

ul,
ol {
    list-style: none
}

a {
    text-decoration: none;
    background-color: transparent
}

a:hover,
a:active {
    outline-width: 0;
    text-decoration: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

hr {
    border: 0;
    height: 1px
}

img {
    border-style: none
}

img:not([src]) {
    display: none
}

svg:not(:root) {
    overflow: hidden
}

html {
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: 100%
}

input,
textarea,
button,
a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block
}

audio:not([controls]),
video:not([controls]) {
    display: none;
    height: 0
}

progress {
    vertical-align: baseline
}

mark {
    background-color: #ff0;
    color: #000
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

button,
input,
select,
textarea {
    font-size: 100%;
    outline: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

textarea {
    overflow: auto
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: .54
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

.clearfix:after {
    display: block;
    height: 0;
    content: "";
    clear: both
}

// ztree-plugin
~ function ($) {
	function ztree(data) {
		let count = 0,
			$this = $(this); //=>$tree1

		//=>数据绑定
		let bindHTML = function (result) {
			let str = ``;
			result.forEach(item => {
				count++;
				let {
					name,
					open,
					children
				} = item;
				str += `<li>
					<a href="" class="title">${name}</a>
					${children?`<em class="icon ${open?'open':''}"></em>
					<ul class="level level${count}" 
						style="display:${open?'block':'none'}">
						${bindHTML(children)}
					</ul>`:``}
				</li>`;
				count--;
			});
			return str;
		};
		$this.html(bindHTML(data));

		//=>基于事件委托实现点击操作
		$this.click(function (ev) {
			let target = ev.target,
				// 把原生dom对象编程jq对象
				$target = $(target),
				// 获取ul 
				$next = $target.next('ul');
			if (target.tagName === 'EM') {
				$target.toggleClass('open');
				$next.stop().slideToggle(100);
			}
		});
	}

	// 向JQ中扩展插件
	$.fn.extend({
		ztree: ztree
	});
}(jQuery);

// $tree1.ztree(从data.json中获取的数据)