有关struts2+jquery+treeview的应用总结

最新推荐文章于 2021-04-02 13:45:52 发布

原创最新推荐文章于 2021-04-02 13:45:52 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #struts #string #class #stylesheet #function

本文介绍了一种使用JSP、jQuery和Struts框架实现动态加载树状菜单的方法。通过Ajax请求从服务器获取JSON格式的数据，递归构建DOM结构，并利用jQuery插件展示为树形结构。

首先，先附上我的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'"
                                                                        +"onclick=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的：

就大功告成。只是没有连数据库而已