Struts2+json+ztree 导航树开发

最新推荐文章于 2024-07-26 18:04:49 发布

iteye_18824

最新推荐文章于 2024-07-26 18:04:49 发布

阅读量227

点赞数

本文链接：https://blog.csdn.net/iteye_18824/article/details/82488485

版权

1.首先到ztree首页下载最新版本的ztree资源
http://www.ztree.me/v3/main.php#_zTreeInfo
下载后的东西如下：

这几个文件夹中，与开发相关的有js、css两个文件夹。
api做的也不错，能方便的查看对外的接口内容，并且有相关的样例代码。
2.jsp页面相关代码
这里有几个关键点：
1）simpleData设置为true，通过该设置使我们在后台action端组织ztree的数据结构的时候，能够通过id和PId属性来进行父子关系设置。
2）js文件引入的顺序，由于ztree是基于jquery的，因此
jquery-1.4.4.min.js 要放在ztree核心js文件的前面，否则会报错。
jquery.ztree.excheck-3.3.js和jquery.ztree.exedit-3.3.js也要一并引入，否则树节点复选框功能是没有效果的。
3）异步加载的好处是当节点非常多的时候，对于提高展现性能是非常显著的（我之前用过dtree，当节点个数超过2000的时候，就会出现“页面脚本性能低下”样的提示）通过设置异步加载模式，只有当点击节点的时候，才会到数据库中查找相关子节点信息，async中设置的url在这个时候会被触发。
4）autoParam，它的作用是当异步加载动作触发的时候，传到后台的参数。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
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>
<link rel="stylesheet" href="<%=path%>/common/css/zTreeStyle.css">
<script type="text/javascript"
src="<%=path%>/common/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript"
src="<%=path%>/common/js/jquery.ztree.core-3.3.js"></script>
<script type="text/javascript"
src="<%=path%>/common/js/jquery.ztree.excheck-3.3.js"></script>
<script type="text/javascript"
src="<%=path%>/common/js/jquery.ztree.exedit-3.3.js"></script>

<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">

<script type="text/javascript">
var zTree1;
var zTreeNodes=[
{"id":"-1","pId":"-2","name":"搜索引擎",isParent:true}
];//数据
var setting = {
check:{//复选框设置
enable:true,
chkboxType:{"Y":"p","N":""},
chkStyle:"checkbox"
},
async:{//异步加载设置
enable:true,
url:"admin/tree!loadTreeNode.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>
3.action端相关代码
package com.langtuteng.sydsxx.info.common.tree;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

public class TreeMenuAction extends ActionSupport{
String id="";
public String loadTreeNode(){
JSONArray jsonArray = new JSONArray();
JSONObject one = new JSONObject();
System.out.println(id);
one.put("id", "1");
one.put("pId", "-1");
one.put("name", "百度");
one.put("url", "");
one.put("target", "rightFrame");
JSONObject two = new JSONObject();
two.put("id", "01");
two.put("pId", "1");
two.put("name", "歌曲");
two.put("url", "http://www.baidu.com");
two.put("target", "rightFrame");
JSONObject three = new JSONObject();
three.put("id", "02");
three.put("pId", "1");
three.put("name", "谷歌");
three.put("url", "http://www.google.cn");
three.put("target", "rightFrame");
JSONObject four = new JSONObject();
four.put("id", "0101");
four.put("pId", "01");
four.put("name", "歌曲");
four.put("url", "http://www.google.cn");
four.put("target", "rightFrame");

jsonArray.add(one);
jsonArray.add(two);
jsonArray.add(three);
jsonArray.add(four);

HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
response.setContentType("html/text");
PrintWriter out = null;
try{
out = response.getWriter();
out.print(jsonArray.toString());
System.out.println(jsonArray.toString());
out.flush();
out.close();
}catch(Exception e){
e.printStackTrace();
}
return "tree";
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
}
4.struts.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>

<constant name="struts.i18n.encoding" value="utf-8"/>

<constant name="struts.locale" value="zh_CN" />

<constant name="struts.custom.i18n.resources" value="messageResource"/>

<constant name="struts.devMode" value="true" />

<constant name="struts.ui.theme" value="simple" />
<package name="syinfo" extends="struts-default">

<interceptors>
<interceptor name="loginedCheck" class="com.langtuteng.sydsxx.info.admin.common.LoginedCheckInterceptor"/>
</interceptors>

<global-results>
<result name="exception">/exception.jsp</result>
<result name="tologin">/common/jsp/tologin.jsp</result>
<result name="noprim">/common/jsp/error.jsp</result>
</global-results>

<global-exception-mappings>
<exception-mapping result="exception" exception="java.lang.Exception"/>
</global-exception-mappings>
<action name="tree" class="com.langtuteng.sydsxx.info.common.tree.TreeMenuAction" method="{1}">
<result name="tree">/admin/tree.jsp</result>
</action>
</package>
</struts>

iteye_18824

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Struts2+json+ztree 导航树开发

1.首先到ztree首页下载最新版本的ztree资源http://www.ztree.me/v3/main.php#_zTreeInfo下载后的东西如下：这几个文件夹中，与开发相关的有js、css两个文件夹。api做的也不错，能方便的查看对外的接口内容，并且有相关的样例代码。2.jsp页面相关代码这里有几个关键点：1）simpleData设置为true，通过...
复制链接

扫一扫