参考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>
效果图