1 前端页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>左侧树形导航栏</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="./css/demo.css" type="text/css">
<link rel="stylesheet" href="./css/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.ztree.core-3.5.js"></script> <SCRIPT type="text/javascript">
var setting = {
treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性
treeNodeParentKey : "pId", //在isSimpleData格式下，当前节点的父节点id属性
showLine : true, //是否显示节点间的连线
checkable : true //每个节点上是否显示 CheckBox
};
var zNodes;
$(function(){
$.ajax({
async:false,
cache:false,
type:'POST',
//dataType:"String",
url:'${pageContext.request.contextPath}/TestZTree',
success:function(data){
zNodes = data;
},error:function(){
alert("请求失败");
}
});
});
/*
var zNodes =[
{ id:1, pId:0, name:"父节点1", open:true},
{ id:2, pId:0, name:"父节点2", open:true},
{ id:3, pId:0, name:"父节点3", open:true}
];
*/
$(document).ready(function(){
treeNodes = eval("(" + zNodes + ")"); //将string类型转换成json
$.fn.zTree.init($("#tree"), setting, treeNodes);
});
</SCRIPT>
</head>
<body>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="tree" class="ztree"></ul>
</div>
</div>
</body>
</html>
2.后台代码
@Controller
@SessionAttributes("userT")
public class Test {
@RequestMapping("TestZTree")
public @ResponseBody String TestZTree() {
Tree s1 = new Tree(1,0,"test1",true);
Tree s2 = new Tree(2,0,"test2",true);
Tree s3 = new Tree(3,0,"test3",true);
Tree s4 = new Tree(4,0,"test4",true);
Tree s5 = new Tree(5,0,"test5",true);
Tree s6 = new Tree(6,0,"test6",true);
Tree s7 = new Tree(7,0,"test7",true);
Tree s8 = new Tree(8,0,"test8",true);
Tree s9 = new Tree(9,0,"test9",true);
Tree s10 = new Tree(10,0,"test10",true);
Tree s11 = new Tree(11,0,"test11",true);
List<Tree> lstTree = new ArrayList<Tree>();
lstTree.add(s1);
lstTree.add(s2);
lstTree.add(s3);
lstTree.add(s4);
lstTree.add(s5);
lstTree.add(s6);
lstTree.add(s7);
lstTree.add(s8);
lstTree.add(s9);
lstTree.add(s10);
lstTree.add(s11);
return makeTree(lstTree);
}
public static String makeTree(List<Tree> roles){
//Check Roles is null
StringBuffer sb = new StringBuffer();
Tree r = null;
sb.append("[");
for(int i=0;i<roles.size();i++){
r=(Tree) roles.get(i);
sb.append("{id:").append(r.getId()).append(",pId:").append("0").append(",name:\"")
.append(r.getName()).append("\"").append(",open:true").append("},");
}
return sb.substring(0,sb.length()-1)+"]";
}
效果图：