struts2+json+zTree实现异步加载树

注: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.


©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页