JSTL表达式实现递归树并修改样式

最新推荐文章于 2022-06-09 14:05:18 发布

屎大小仙女

最新推荐文章于 2022-06-09 14:05:18 发布

阅读量324

点赞数

分类专栏：问题及解决方案文章标签： JSTL 递归样式 EL CSS

本文链接：https://blog.csdn.net/wxzhangxin/article/details/105425689

版权

问题及解决方案专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JSTL递归实现参见（只有递归，无样式修改）：https://www.iteye.com/topic/1116588

我需要实现的是以树结构展示，每个层次的样式的margin-Left依次增加20px，如下：

1
- 1.1
- 1.2
  - 1.2.1

查了下，在style里不能直接使用EL表达式，查阅如何在css里面使用EL表达式取值，只找到几篇复制粘贴的博文。使用里面推荐的c:out标签并不能解决我的问题。既然css里不能直接使用EL表达式设置，那我先将值放在自定义标签里，最后页面加载时再取出来重新设置样式。

实现思路：

定义变量marginLeft作为每层的margin-left值，每递归一次自增20，使用自定义标签记录。最后加载时，取出每层的自定义标签数据，设置为margin-Left值。

显示树的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" %>  

<script flag="text/javascript">
function loadMenu(){
	var menuLi = document.getElementsByTagName("li");
	for(var i = 0; i < menuLi.length; i++){
		// 取出每层的margin-Left值
		var marginLeft = menuLi[i].getAttribute("marginLeft");
		// 重新设置样式
		menuLi[i].style.marginLeft = marginLeft;
	}
}
</script>

<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">
<!-- 增加：marginLeft变量记录当前层次的marginLeft值，初始值为55 -->
<c:set var="marginLeft" value="55" scope="request"/>
<%@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" %> 
<!-- 完成加载后，执行loadMenu()来控制样式 -->
<body onload="loadMenu()">
	<!-- 使用自定义标签marginLeft记录该层的margin-Left值 -->
	<li marginLeft="${marginLeft}">  
		<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"/>
				<!-- 每层子节点marginLeft增加20 -->
				<c:set var="marginLeft" value="${marginLeft + 20}" scope="request"/>
				<jsp:include page="recursive.jsp"/>  
			</c:forEach>              
		 </ul>  
		</c:if>  
	</li>
</body>