第一步：下载 jquery_treeview 把里面的文件拷到工程目录下
第二步：设置jsp页面
首先：引用jquery_treeview的 jquery.treeview.css、screen.css、jquery.js、jquery.treeview.js四个文件
然后：在页面<body>中加入 <ul id="templateLeft" class="filetree"></ul>
注释:页面主要在这里实现树形结构
再次：写js代码,如下:
<script type="text/javascript">
var treeList;
var treeView;
$(document).ready(function(){
jQuery.ajax({
type:"post",
url:"后台处理代码的方法",
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'>"
+"<a href='javascript:void(0)' target='rightFrame'"
+"οnclick=openPage('"+treeView.treeId+"')> "+treeView.treeName+"</a>"
+"</span>"
+"<ul id='tm"+treeView.treeId+"'></ul></li>");
template_tree(treeView); //调用迭代函数
$("#templateLeft").treeview(); //调用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'>"
+"<a href='javascript:void(0)' target='rightFrame'"
+"οnclick=openPage('"+this.treeId+"')> "+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>
第三步：后台action代码
@Controller
@Result(name="json",type="json")
public class TemplateTreeAction{
private static final long serialVersionUID = 1L;
private String treeId;
private TreeView treeView; //树基础类
private List<TreeView> treeViewList = new ArrayList<TreeView>();//盛放树的集合
//生成树方法
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返回
}
private Integer i=1;
private String rootNode;
/**
* 创建目录和文件树
* @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>");
}
}
}
第四步：TreeView 树基础类代码
/**
* 遍历文件夹中所有文件用TreeView展现
*/
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;
}
public void setTreeId(String treeId) {
this.treeId = treeId;
}
public String getTreeName() {
return treeName;
}
public void setTreeName(String treeName) {
this.treeName = treeName;
}
public String getParentNode() {
return parentNode;
}
public void setParentNode(String parentNode) {
this.parentNode = parentNode;
}
public boolean isExpanded() {
return expanded;
}
public void setExpanded(boolean expanded) {
this.expanded = expanded;
}
public boolean isHaschildren() {
return haschildren;
}
public void setHaschildren(boolean haschildren) {
this.haschildren = haschildren;
}
public String getClasses() {
return classes;
}
public void setClasses(String classes) {
this.classes = classes;
}
public String getFilePath() {
return filePath;
}
public void setFilePath(String filePath) {
this.filePath = filePath;
}
}
**************************************************************************************************
树完成:上传个图片 ^_^
442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
