文章转自:http://www.iteye.com/topic/1116588
需要两个jsp页面,一个是你要显示树的jsp页面tree.jsp,一个是递归构造树的页面recursive.jsp
显示树的jsp页面,tree.jsp- <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
- <div style=" float:left; display:block; margin:10px; overflow:auto; width:200px; height:300px; border:solid 1px #CCC; line-height:21px; background:#FFF;">
- <ul class="tree">
- <%@include file="recursive.jsp"%>
- </ul>
- </div>
递归构造树的页面recursive.jsp
- <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
- <li>
- <a href="main.html" target="navTab" rel="main">${menu.name}</a>
- <c:if test="${not empty menu.children}">
- <ul>
- <c:forEach var="menu" items="${menu.children}">
- <c:set var="menu" value="${menu}" scope="request"/>
- <jsp:include page="recursive.jsp"/>
- </c:forEach>
- </ul>
- </c:if>
- </li>
菜单Model,简单的一个Bean,树状结构的数据模型
- public class MenuItem{
- private String name;
- private String url;
- private List<MenuItem> children = new ArrayList<MenuItem>();
- public MenuItem(String name,String url){
- this.name = name;
- this.url = url;
- }
- public void addChildMenu(MenuItem menu){
- this.children.add(menu);
- }
- .......
- }
构造模拟数据
- MenuItem menu31 = new MenuItem("三级菜单1", "url31");
- MenuItem menu32 = new MenuItem("三级菜单2", "url32");
- MenuItem menu33 = new MenuItem("三级菜单3", "url33");
- MenuItem menu34 = new MenuItem("三级菜单4", "url34");
- MenuItem menu35 = new MenuItem("三级菜单5", "url35");
- MenuItem menu21 = new MenuItem("二级菜单1", "url21");
- menu21.addChildMenu(menu31);
- menu21.addChildMenu(menu32);
- menu21.addChildMenu(menu33);
- MenuItem menu22 = new MenuItem("二级菜单2", "url22");
- menu22.addChildMenu(menu34);
- menu22.addChildMenu(menu35);
- MenuItem root = new MenuItem("根目录", "root");
- root.addChildMenu(menu21);
- root.addChildMenu(menu22);
以上就是通过jstl标签构造生成树的全部代码了
最后生成的html代码
- <div style=" float:left; display:block; margin:10px; overflow:auto; width:200px; height:300px; border:solid 1px #CCC; line-height:21px; background:#FFF;">
- <ul class="tree">
- <li>
- <a href="main.html" target="navTab" rel="main">根目录</a>
- <ul>
- <li>
- <a href="main.html" target="navTab" rel="main">二级菜单1</a>
- <ul>
- <li><a href="main.html" target="navTab" rel="main">三级菜单1</a></li>
- <li><a href="main.html" target="navTab" rel="main">三级菜单2</a></li>
- <li><a href="main.html" target="navTab" rel="main">三级菜单3</a></li>
- </ul>
- </li>
- <li>
- <a href="main.html" target="navTab" rel="main">二级菜单2</a>
- <ul>
- <li>
- <a href="main.html" target="navTab" rel="main">三级菜单4</a>
- <a href="main.html" target="navTab" rel="main">三级菜单5</a>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- </ul>
- </div>