首先准备好后台数据:这里我就不贴SQL了,因为数据是别人博客里面的.后面会标明出处.
引入对应的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>
后台controller层
这里我用的是springMvc
@RequestMapping(value="/testYbTree2")
public void testYbTree2(HttpServletRequest request,HttpServletResponse response)throws Exception{
String pid = request.getParameter("pid");
if(pid == null || pid == ""){//初始化节点的时候 默认查询最顶级的节点 即pid=0
pid="0";
}
List<TestYbTree> list = departmentService.listTestYbTree1(pid);
for(int i=0;i<list.size();i++){
int flag = list.get(i).getFlag();
if(flag == 1){//对应数据库的flag字段
//因为初始化查询的节点没有子节点 为了不让图标太难看 所以这里自己定义一个样式
list.get(i).setIcon("plugins/zTree/3.5/img/diy/1_open.png");
}
}
JSONArray arr = JSONArray.fromObject(list);
response.setCharacterEncoding("UTF-8");
response.getWriter().print(arr);
}
arr的数据格式如图
可能有的小伙伴和我的controller层写法不同,这其实是问题不大的,只要我们最后返回的json格式一样满足zTree的格式要求即可.
实体类TestYbTree
private int id;
private int pId;
private String name;
private int isParent;
private String icon;
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon;
}
public int getIsParent() {
return isParent;
}
public void setIsParent(int isParent) {
this.isParent = isParent;
}
private String url;
private int flag;
public int getFlag() {
return flag;
}
public void setFlag(int flag) {
this.flag = flag;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int getpId() {
return pId;
}
public void setpId(int pId) {
this.pId = pId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
页面效果图如下:
初始化的时候:
单击节点(点击“清华大学”):
继续点击节点效果如图:
PS:departmentService.listTestYbTree1(pid)方法是我调用数据库层获取数据的方法,每个可能都不同,如我上面所说,只要保持最后的返回格式一致就行.
<%-- async:{-- zTree官方文档说明 异步加载必须写上这个参数 但是我这里没写T-T 一样的可以 不知道我是不是假的异步加载 本人在这里也有疑问 %>
<%-- enable: true,--%>
<%-- url: "<%=basePath%>department/testYbTree2.do",--%>
<%-- autoParam: ["id"]--%>
<%-- },--%>
这段我注释掉的方法,ztree官方Api说明必须添加,但是我没添加,所以我现在也有点怀疑我是不是实现的是假的异步加载,可是又确实达到了我要的效果,如果有什么不妥之处,希望各位看官多加指点.
部分内容引用:http://blog.csdn.net/IndexMan/article/details/78573782
我最开始想用该博主的方法实现异步加载,但是怎么点击都没有反应,所以我就自己给自己写了一个点击事件 T-T