完整代码下载：https://download.csdn.net/download/qidaorenzhe/12032112
ztree创建的树形结构，记下笔记
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ztreeDemo</title>
<link rel="stylesheet" href="zTreeStyle.css" type="text/css">
<script type="text/javascript" src ="jquery-2.1.0.min.js"></script>
<!-- zTree 这里使用的 all.js = core + excheck + exedit ( 不包括 exhide )-->
<script type="text/javascript" src="jquery.ztree.all-3.5.js"></script>
<!--my zTree 这里引入的是下面所示的js代码文件 -->
<script type="text/javascript" src ="ztree.js"></script>
</head>
<body>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 pt10">
<div class="well sidebar-nav ">
<ul id="planTree" class="ztree"></ul>
</div>
</div>
</div>
</body>
</html> $(function () {
init();
});
function init() {
builePlanTree();
}
//ZTREE
function builePlanTree() {
var setting = {
view: {
showIcon: true//设置 zTree 是否显示节点的图标。
},
data: {
simpleData: {
enable: true
}
},
callback: {
// beforeExpand: beforeExpand,
// onExpand: onExpand,
onClick: zTreeOnClick
}
}
var zNodes =[
{ id:1, pId:0, name:"课程目录", open:true},
{ id:11, pId:1, name:"季度产品知识课程", open:true},
{ id:111, pId:11, name:"13Q4产品知识", },
{ id:112, pId:11, name:"14Q1产品知识", },
{ id:113, pId:11, name:"14Q2产品知识", },
{ id:114, pId:11, name:"14Q3产品知识", },
{ id:115, pId:11, name:"14Q4产品知识", },
{ id:12, pId:1, name:"项目宣讲类课程", open:true},
{ id:121, pId:12, name:"项目宣讲类课程1"},
{ id:122, pId:12, name:"项目宣讲类课程2"},
{ id:123, pId:12, name:"项目宣讲类课程3"},
{ id:13, pId:1, name:"移动商学院", open:true},
{ id:131, pId:13, name:"技能类"},
{ id:132, pId:13, name:"心态类"},
{ id:132, pId:13, name:"知识类"}
];
$.fn.zTree.init($("#planTree"), setting, zNodes);
function zTreeOnClick(event, treeId, treeNode) {
//这里定义点击书中节点时，相应的页面其他的操作，示例：
// 每次点击节点后， 弹出该节点的 tId、name 的信息
alert(treeNode.tId + ", " + treeNode.name);
};
}