注:zTree是用jQuery实现的树形插件,用其可以快速的实现web树形结构。它可以用在jsp,php,asp等网站开发上,在这主要介绍了如何用struts2+json+zTree实现异步加载树。
在实现之前需要导入struts2.1.6 json需要包:commons-beanutils-1.7.0.jar,commons-collections-3.2.1.jar,commons-lang-2.3.jar,commons-logging-1.0.4.jar,ezmorph-1.0.3.jar,json-lib-2.1.jar,这些包的加入主要实现ajax加载json结构返回值。
一jsp页面部分代码
<%@ 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="<%=path%>/css/style.css">
<link rel="stylesheet" href="<%=path%>/js/JQuery_zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=path%>/js/JQuery_zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/JQuery_zTree/js/jquery.ztree.core-3.5.js"></script>
<link rel="stylesheet" type="text/css" href="<%=path %>/js/jqueryEasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/js/jqueryEasyui/themes/icon.css">
<script type="text/javascript" src="<%=path %>/js/jqueryEasyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
var zTree1;
var zTreeNodes=[
{"id":"-1","pId":null,"name":"系统功能",isParent:true}
];//数据
var setting = {
async:{//异步加载设置
enable:true,
url:"<%=path%>/sys/findOaFunctionByPid.action",//异步加载url
autoParam:["id"]//设置后台传递的参数
},
expandSpeed:"slow",
data:{
simpleData:{
enable:true,
idKey:"id",
pIdkey:"pId",
rootPid:"-2"
}
}
};
$(document).ready(function(){
zTree1 = $.fn.zTree.init($("#treeDemo"), setting,zTreeNodes);
});
</script>
</head>
<body>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</body>
</html>
二java部分代码
package com.oa.core.system.action;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.apache.log4j.Logger;
import com.oa.util.BaseAction;
public class OaFunctionAction extends BaseAction {
private static final Logger logger=Logger.getLogger(OaFunctionAction.class);
private static final long serialVersionUID = 1L;
public void findOaFunctionByPid(){
//获得父ID
String pid=request.getParameter("id");
System.out.println(pid);
logger.info("异步获得功能项");
try {
JSONObject item=null;
JSONArray jsonArray = new JSONArray();
for (int i = 0;i<10; i++) {
item = new JSONObject();
item.put("id",pid+i);
item.put("pId", pid);
item.put("name","x"+pid+i);
item.put("icon","images/icon/folder.gif");
item.put("iconOpen","images/icon/folderopen.gif");
item.put("iconClose","images/icon/folder.gif");
//如果是叶子节点就将isParent设为false
item.put("isParent", "true");
jsonArray.add(item);
}
response.setContentType("application/json;charset=UTF-8");
response.setCharacterEncoding("utf-8");
response.setHeader("Charset", "utf-8");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().print(jsonArray.toString());
response.getWriter().flush();
response.getWriter().close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
这两步做好之后再struts.xml配置好相应的action就OK了,如果需要进一步的完善应用可以参考ztree的API.