jstl处理递归问题+jquery,tree无限级树形菜单+简单实用案例
Posted JavaWeb大本营
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jstl处理递归问题+jquery,tree无限级树形菜单+简单实用案例相关的知识，希望对你有一定的参考价值。
需要两个jsp页面，一个是你要显示树的jsp页面tree.jsp，一个是递归构造树的页面recursive.jsp
显示树的jsp页面，tree.jsp
html代码
<%@ 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
Html代码 
<%@ 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,树状结构的数据模型
Java代码
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);
}
.......
}
构造模拟数据
Java代码
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代码
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>
jquery,tree无限级树形菜单+简单实用案例
我在项目中用到产品类别的树形。各种地方都要用。 我就封装起来，方便以后调用。
记录下来，希望给新手们提供帮助。要记得导入jquery.js tree.js 哦
[html] view plaincopyprint?
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" type="text/css" href="page/plugin/zTree/zTreeStyle/zTreeStyle.css"/>
<script type="text/javascript" src="page/js/jquery.ztree-2.6.min.js"></script>
<div id="goodsCategoryTree" class="tree"></div>
<input type="hidden" id="goodsCategoryTreeSelect" name="goodsCategoryTreeSelect"/>
<input type="hidden" id="goodsCategoryTreeSelectName" name="goodsCategoryTreeSelectName"/>
<script>
var goodsCategoryTree;
var treeNodes = eval('(${web.goodsCategoryJson})');//为节点进行json赋值
function getCheckTreeNode(event, treeId, treeNode){//获取选中节点id,name
var tId = treeNode.cateID;
var name = treeNode.cateName;
$("#goodsCategoryTreeSelect").val(tId);
$("#goodsCategoryTreeSelectName").val(name);
$("#goodsCategoryTreeSelect").focus();
}
var setting = {//参数设置
isSimpleData : true, //数据是否采用简单 Array 格式，默认false
treeNodeKey : "cateID", //在isSimpleData格式下，当前节点id属性
nameCol : "cateName",
treeNodeParentKey : "parentCateID", //在isSimpleData格式下，当前节点的父节点id属性
showLine : true, //是否显示节点间的连线
checkable : false, //每个节点上是否显示 CheckBox
callback : {
click: getCheckTreeNode
}
};
goodsCategoryTree = $("#goodsCategoryTree").zTree(setting, treeNodes);//初始化树形
</script>
Json 数据字符串
web.goodsCategoryJson = [{"cateID":"05E19A7462A148709CE295CA2295BD7E","cateName":"计算机","parentCateID":"43242"},{"cateID":"43242","cateName":"电器","parentCateID":"1"},{"cateID":"43243","cateName":"服装1","parentCateID":"1"},{"cateID":"43244","cateName":"女装","parentCateID":"43243"},{"cateID":"43245","cateName":"根目录","parentCateID":"43243"},{"cateID":"43246","cateName":"根目录6","parentCateID":"43244"},{"cateID":"43247","cateName":"根目录7","parentCateID":"43245"},{"cateID":"43248","cateName":"根目录8","parentCateID":"43246"},{"cateID":"43249","cateName":"根目录9","parentCateID":"43247"},{"cateID":"43250","cateName":"根目录0","parentCateID":"43248"},{"cateID":"43251","cateName":"根目录1","parentCateID":"43249"},{"cateID":"43252","cateName":"根目录2","parentCateID":"43250"},{"cateID":"43253","cateName":"根目录3","parentCateID":"2"},{"cateID":"1","cateName":"通用分类","parentCateID":"-1"},{"cateID":"2","cateName":"频道分类","parentCateID":"-1"}]
扫一扫关注二维码，获取更多源代码
以上是关于jstl处理递归问题+jquery,tree无限级树形菜单+简单实用案例的主要内容，如果未能解决你的问题，请参考以下文章