参考 http://www.treejs.cn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 css-->
<link rel="stylesheet" href="bower_components/layer/skin/default/layer.css">
<link rel="stylesheet" href="bower_components/ztree/css/metroStyle/metroStyle.css"/>
</head>
<body>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
<!-- 引入 js-->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="bower_components/layer/layer.js">
</script>
<script>
// 简略 ztree 配置
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "parentId",
rootPId: 0
}
}
}
$.ajax({
url: "/menu/doFindZtreeMenuNodes",
success: function (result) {// 初始化 zTree( 参考 http://www.treejs.cn/)
// 基于 setting 配置将返回的数据在 treeDemo 地位进行出现
$.fn.zTree.init($("#treeDemo"), setting, result.data);
}
})
</script>
</body>
</html>效果图