ZTree在项目中可能经常会用到,通常会用来加载区域树形列表。我们平时用的时候通常会根据效率问题来选择是用同步加载树还是异步加载树,下面我就写一个简单的小例子来展示如何写一个同步树。
前端页面的代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/XHTML11/DTD/XHTML.DTD">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>同步树形列表</title>
<link href="${ctx}/static/css/regionTree.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
.title{
position:absolute;
font-family:'微软雅黑';
color:#ffffff;
font-size:12px;
left:0px;
top:6px;
width:90px;
height:24px;
text-align:center;
line-height:24px;
}
</style>
<link rel="stylesheet" href="${ctx}/static/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css"/>
<script type="text/javascript" src="${ctx}/static/zTree_v3/js/jquery_1.4.4.min.js"></script>
<scirpt type="text/javascript" src="${ctx}/static/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript">
var ctx="${ctx}";
</script>
<script type="text/javascript" src="${ctx}/static/js/ZTree/getTree.js"></script>
</head>
<body>
<div style="width:100%;height:100%;position:absolute">
<div style="width:100%;height:30px;">
<div id="title" class="title">树形列表</div>
</div>
<div id="depttree" style="width:100%;position:absolute;">
<div id="i3" style="border:0px solid red;">
<div id="i6" class="largetext" style="background-color:white;overflow:auto;height:85%;width:220px;">
<ul id="departmentTree" class="ztree"></ul>
</div>
</div>
</div>
</div>
</body>
</html>
前端页面需要引入ZTree的JS文件和Css样式等。getTree.js文件的内容如下:
var zTree;
var setting={
data:{
simpleData:{
enable:true,
idKey:'id',
pIdKey:'pId',
}
},
view:{
dblClickExpand:true,
showLine:true
}.
callback:{
onClick:dpttree_onClick
},
check:{
chkboxType:{'Y':'p','N':'p'},
chkStyle:'checkbox',
enable:true
}
};
function dpttree_onClick(event,treeId,treeNode,clickFlag){
alert(treeNode.id);
}
function createTree(){
$.ajax({
url:ctx+"/Tree/testTree",
type:'POST',
dataType:'text',
ContentType:'application/json;charset=utf-8',
success:function(data){
var ztreeNodes=eval('('+data+')');
zTree=$.fn.zTree.init(('#departmentTree').setting,ztreeNodes);
zTree=expandAll(true);
},
error:function(data){
alert("树加载失败");
}
});
}
$(document).ready(function(){
createTree();
});
后台的写法基本上利用JSONArray将所需要的数据加入到JSONArray当中,形成树所需要的结构,一般应包括isParent(是否有子节点),id,pId。
也可以附加其他的属性值传到前台如name等,类似的代码如下:
@RequestMapping(value="testTree")
@ResponseBody
public Object testTree(HttpServletRequest request){
JSONArray arr=new JSONArray();
JSONObject tempObj5=new JSONObject();
tempObj5.put("id","0");
tempObj5.put("isParent",true);
tempObj5.put("name","test000001");
arr.add(tempObj5);
JSONObject tempObj=new JSONObject();
tempObj.put("id","1");
tempObj.put("isParent",true);
tempObj.put("name","001");
tempObj.put("pId","0");
arr.add(tempObj);
JSONObject tempObj1=new JSONObject();
tempObj1.put("id","2");
tempObj.put("isParent",true);
tempObj,put("name","002");
tempObj.put("pId","0");
arr.add(tempObj1);
JSONObject tempObj2=new JSONObject();
tempObj2.put("id","3");
tempObj2.put("isParent",false);
tempObj2.put("name","0011");
tempObj2.put("pId","1");
arr.add(tempObj2);
JSONObject tempObj3=new JSONObject();
tempObj3.put("id","4");
tempObj3.put("isParent",false);
tempObj3.put("name","0021");
tempObj3.put("pId","2");
arr.add(tempObj3);
String TreeJson=JSONUtil.toJSON(arr);
return TreeJson;
}
运行后效果如下:
纯手工打字,如有哪里不对,请大神帮忙指正!