引入对应的js和css，没有这些文件的小伙伴可以点击
http://www.treejs.cn/v3/api.php 下载
<script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
<link type="text/css" rel="stylesheet" href="plugins/zTree/3.5/zTreeStyle.css"/>
<script type="text/javascript" src="plugins/zTree/2.6/jquery.ztree-2.6.min.js"></script>
<script type="text/javascript" src="plugins/zTree/3.5/jquery.ztree.core-3.5.js"></script>
核心代码:
<body>
<div style="width:15%;">
<ul id="demotree" class="ztree"></ul>
</div>
</body>
<script type="text/javascript">
var setting = {
isSimpleData : true, //数据是否采用简单 Array 格式，默认false
treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性
treeNodeParentKey : "pId", //在isSimpleData格式下，当前节点的父节点id属性
showLine : true, //是否显示节点间的连线
<%-- async:{-- zTree官方文档说明 异步加载必须写上这个参数 但是我这里没写T-T 一样的可以 不知道我是不是假的异步加载 本人在这里也有疑问 %>
<%-- enable: true,--%>
<%-- url: "<%=basePath%>department/testYbTree2.do",--%>
<%-- autoParam: ["id"]--%>
<%-- },--%>
callback :{
onClick : function(event, treeId, treeNode, clickFlag) {
// 判断是否父节点
if(!treeNode.isParent){
//alert("treeId自动编号：" + treeNode.tId + ", 节点id是：" + treeNode.id + ", 节点文本是：" + treeNode.name);
$.ajax({
url: "<%=basePath%>department/testYbTree2.do",//请求的action路径
data:{"pid":treeNode.id},
error: function () {//请求失败处理函数
alert('请求失败');
},
success:function(data)
{ //添加子节点到指定的父节点
var jsondata= eval(data);
if(jsondata == null || jsondata == ""){
//末节点的数据为空 所以不再添加节点 这里可以根据业务需求自己写
//$("#treeFrame").attr("src",treeNode.url);
}
else{
var treeObj = $.fn.zTree.getZTreeObj("demotree");
//treeNode.halfCheck = false;
var parentZNode = treeObj.getNodeByParam("id", treeNode.id, null);//获取指定父节点
newNode = treeObj.addNodes(parentZNode,jsondata, false);
}
}
});
}
}
},
//checkable : true //每个节点上是否显示 CheckBox
};
var zTree;
var treeNodes;
$(function(){
$.ajax({
async : false,
cache:false,
type: 'POST',
dataType : "json",
url: "<%=basePath%>department/testYbTree2.do",//请求的action路径
error: function () {//请求失败处理函数
alert('请求失败');
},
success:function(data){ //请求成功后处理函数。
treeNodes = eval(data); //把后台封装好的简单Json格式赋给treeNodes
}
});
});
//初始化节点
$(document).ready(function(){
$.fn.zTree.init($("#demotree"), setting, treeNodes);
});
</script>