首先，先附上我的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>我的第一个tree</title>
<link rel="stylesheet" href="lib/jquery.treeview.css" />
<link rel="stylesheet" href="css/screen.css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="lib/jquery.cookie.js" type="text/javascript"></script>
<script src="lib/jquery.treeview.js" type="text/javascript"></script>
<script src="lib/jquery.treeview.async.js" type="text/javascript"></script>
<script type="text/javascript">
var treeList;
var treeView;
$(document).ready(function(){
jQuery.ajax({
type:"post",
url:"json_templateTree.action",
dataType:"json",
global:false,
success: function(root){
treeList = root.treeViewList;
treeView = root.treeView;
$("#templateLeft").append("<li class='"+treeView.classes+"'>"
+"<span id='"+treeView.treeId+"' class='folder'>"
+treeView.treeName+"</a>"
+"</span>"
+"<ul id='tm"+treeView.treeId+"'></ul></li>");
template_tree(treeView); //调用迭代函数
$("#templateLeft").treeview({
control:"#treecontrol"//对于body中的 ,可以对树的控制
}); //调用jquery_treeview中treeview函数
}
});
});
//迭代函数
function template_tree(root){
var oappend;
if(root.haschildren){
$(treeList).each(function(){
if(root.treeId == this.parentNode){
if(this.haschildren){
oappend = "<li class='"+this.classes+"'>"
+"<span id='"+this.treeId+"' class='folder'>"
+this.treeName+"</a>"
+"</span>"
+"<ul id='tm"+this.treeId+"'></ul></li>";
}else{
oappend = "<li class='"+this.classes+"'><span id='"+this.treeId+"' class='"+this.classes+"'>"
+"<a href='javascript:void(0)' target='rightFrame'"
+"οnclick=openPage('"+this.treeId+"')> "+this.treeName+"</a>"
+"</span></li>";
}
$("#tm"+root.treeId).append(oappend);
template_tree(this);
}
});
}
}
//当点击tree链接时所调用的函数,这里可以取得树的id,进行自己相应处理
function openPage(id){
// alert(id);
}
</script>
</head>
<body>
<div id="main">
<ul id="templateLeft" class="filetree"></ul>
</div>
<div id="treecontrol">
<a href="#">收起</a>
<a href="#">展开</a>
<a href="#">收起/展开</a>
</div>
</body>
</html>
还有action的代码：
package com.icafe.action;
import java.io.File;
import java.util.ArrayList;
import java.util.List;
import com.icafe.entity.TreeView;
import com.opensymphony.xwork2.ActionSupport;
public class treeAction extends ActionSupport {
private static final long serialVersionUID = 1L;
@SuppressWarnings("unused")
private String treeId;
private TreeView treeView; //树基础类
private Integer i=1;
private String rootNode;
public TreeView getTreeView() {
return treeView;
}
public void setTreeView(TreeView treeView) {
this.treeView = treeView;
}
private List<TreeView> treeViewList = new ArrayList<TreeView>();//盛放树的集合
public List<TreeView> getTreeViewList() {
return treeViewList;
}
public void setTreeViewList(List<TreeView> treeViewList) {
this.treeViewList = treeViewList;
}
//生成树方法
public String templateTree(){
String path = "D:/测试";
File rootFile = new File(path);
treeView = new TreeView();
if("测试".equals(rootFile.getName())){ //跟目录
treeView.setTreeId("1");
treeView.setParentNode("1");
treeView.setTreeName(rootFile.getName());
treeView.setClasses("filetree");
treeView.setExpanded(true);
treeView.setHaschildren(true);
treeView.setFilePath(path);
rootNode = treeView.getTreeId();
buildDirectoryNode(treeView);
}
// printTree(treeView);//调用测试方法
return "json"; //数据以json返回
}
/**
* 创建目录和文件树
* @param tv 父对象
*/
private void buildDirectoryNode(TreeView tv){
List<TreeView> frequencyLsit = new ArrayList<TreeView>();
if(tv.isHaschildren()){ //判断是否有子目录
File fif = new File(tv.getFilePath());
if(fif.isDirectory()){ //是目录
File[] files = fif.listFiles();
for(File fi:files){
TreeView tvv = new TreeView();
tvv.setTreeId(tv.getTreeId()+"-"+i);
tvv.setParentNode(tv.getTreeId());
tvv.setTreeName(fi.getName());
if(fi.isDirectory()){
tvv.setHaschildren(true);
}else{
tvv.setClasses("file");
tvv.setExpanded(true);
}
tvv.setFilePath(fif.getPath()+"/"+fi.getName());
frequencyLsit.add(tvv);
i++;
}
i=1;
}
}
if(!frequencyLsit.isEmpty()){
for(TreeView fq:frequencyLsit){
treeViewList.add(fq);
buildDirectoryNode(fq);
}
}
}
/**
* 打印树(测试方法)
* @param treeViewList 树集合
*/
private String space = "";
private void printTree(TreeView tv){
if(tv.isHaschildren()){
System.out.println(space+"<ul class='"+tv.getClasses()+"'>");
space += " ";
for(TreeView tvv:treeViewList){
if(tv.getTreeId().equals(tvv.getParentNode())){
System.out.println(space+"<li><span id='"+tvv.getTreeId()+"' class='"+tvv.getClasses()+"'>"+tvv.getTreeName()+"</span>");
printTree(tvv);
}
}
System.out.println(space+"</ul>");
System.out.println(space+"</li>");
space = " ";
}else{
System.out.println(space+"</li>");
}
}
}
再是实体类的代码：
package com.icafe.entity;
public class TreeView {
/**
* 树的id
*/
private String treeId;
/**
* 树显示的名字
*/
private String treeName;
/**
* 父节点
*/
private String parentNode;
/**
* true:代表这个结点下的child是展开的 ; false:代表这个结点下的child是闭合的
*/
private boolean expanded = false;
/**
* true,表示其下面有子结点 ; false:没有子节点
*/
private boolean haschildren = false;
/**
* 普通节点样式 folder:打开的文件夹 closed:关闭的文件夹 ; 根节点文件夹 filetree ; 文件 file
*/
private String classes = "closed";
/**
* 文件的路径
*/
private String filePath;
public TreeView() {
super();
}
public TreeView(String treeId, String treeName, String parentNode,
boolean expanded, boolean haschildren, String classes,
String filePath) {
super();
this.treeId = treeId;
this.treeName = treeName;
this.parentNode = parentNode;
this.expanded = expanded;
this.haschildren = haschildren;
this.classes = classes;
this.filePath = filePath;
}
public String getTreeId() {
return treeId;
}
/**
* 设置树的ID
* @param treeId
*/
public void setTreeId(String treeId) {
this.treeId = treeId;
}
public String getTreeName() {
return treeName;
}
/**
* 设置树的名称
* @return
*/
public void setTreeName(String treeName) {
this.treeName = treeName;
}
public String getParentNode() {
return parentNode;
}
/**
* 设置父节点
* @param parentNode
*/
public void setParentNode(String parentNode) {
this.parentNode = parentNode;
}
public boolean isExpanded() {
return expanded;
}
/**
* true:代表这个结点下的child是展开的 ; false:代表这个结点下的child是闭合的
*/
public void setExpanded(boolean expanded) {
this.expanded = expanded;
}
public boolean isHaschildren() {
return haschildren;
}
/**
* true,表示其下面有子结点 ; false:没有子节点
* @param haschildren
*/
public void setHaschildren(boolean haschildren) {
this.haschildren = haschildren;
}
public String getClasses() {
return classes;
}
/**
* 设置classes
* @param classes
*/
public void setClasses(String classes) {
this.classes = classes;
}
public String getFilePath() {
return filePath;
}
/**
* 设置文件路径
* @param filePath
*/
public void setFilePath(String filePath) {
this.filePath = filePath;
}
}
最后是struts.xml的：
<action name="json_*" class="com.icafe.action.treeAction" method="{1}">
<result name="json" type="json"></result>
<result name="input">/test.jsp</result>
</action>
就大功告成。只是没有连数据库而已
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
