后台添加菜单信息如何在前端循环遍历？
标签：
JavaScript
后台管理模块，添加产品照片，产品名称，产品特点等信息
前端页面模块，根据所属类别展示信息，点击子菜单的时候，会显示出具体产品特点，产品功能介绍的界面。
主要祖传代码展示：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<base href=" <%=basePath%>">
<title>product</title>
<link rel="stylesheet" href="assets/css/amazeui.css" />
<link rel="stylesheet" href="assets/css/common.min.css" />
<link rel="stylesheet" href="assets/css/product.min.css" />
<link rel="stylesheet" href="assets/css/index.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/example.min.css" />
<link rel="stylesheet" href="assets/css/product.css" />
</head>
<body>
<div class="layout">
<!-- top -->
<%@include file="common/topBar.jsp"%>
<div id="list">
<div class="header-box am-hide-sm" data-am-sticky
style="background: #f2f2f2; overflow: hidden;">
<div class="nav-contain">
<div class="nav-inner" id="catalog">
</div>
</div>
</div>
</div>
<!--作者：王小婷时间：2017-06-23描述：产品-->
<div>
<ul class=" product-show-ul" id="products">
<!-- <li>
<div class="product-content">
<div class="left am-u-sm-12 am-u-md-6 am-u-lg-6 recruit-left">
<img class="product-img"
class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="assets/images/product/M-SW- MN01.png" />
</div>
<div class="right am-u-sm-12 am-u-md-6 am-u-lg-6 recruit-right">
<div class="product-show-title">
<span>M-SW- MN01</span>
</div>
<div class="product-show-content">
<div class="product-add">
<span>产品特点：</span>
<div>
<p>
支持GPS/北斗定位，Wifi定位，BLE 连接外设;<br />
</p>
<p>3轴IMU传感器，屏幕尺寸1.22;</p>
<p>屏幕分辨率240*240;</p>
<p>方形屏幕形态,350毫安电池大小,触摸屏;</p>
</div>
</div>
<div class="product-add">
<span>产品功能：</span>
<div>
<p>计步功能,心率检测;</p>
<p>GSM通话功能,SOS紧急呼叫;</p>
<p>wifi连接网络;</p>
<p>支持网络配置,磁吸充电,语音功能;</p>
<p>1M存储功能;</p>
<p>环保材质,防水防尘,消费支付,电子点名,门禁结合;</p>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</li> -->
</ul>
</div>
<!-- 底部 -->
<%@include file="common/sideBar.jsp"%>
</div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="assets/js/jquery-2.1.0.js" charset="utf-8"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="assets/js/amazeui.js" charset="utf-8"></script>
<!--返回顶部-->
<script type="text/javascript"
class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript"
class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://hovertree.com/texiao/yestop/inc/jquery.yestop.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.fn.yestop();
});
//加载产品目录
$.ajax({
url : "/intmote/productMenu.do",
type : "get",
success : function(data) {
//遍历拼接html
var htm = '';
for (var i = 0; i < data.length; i++) {
var type = data[i].productType;
htm+='<ul class="product-model" onClick="showProducts(\''+type+'\')">';
htm+='<li class="product-title">'+data[i].productType+'</li>';
var list = data[i].products;
//遍历产品
for(var j = 0; j < list.length; j++){
htm+='<li>'+list[j].productName+'</li>';
}
htm+='</ul>';
}
$("#catalog").html(htm);
},
error : function(data) {
alert("获取产品菜单失败")
}
});
function showProducts(type){
$.ajax({
url : "/intmote/products.do?type="+type,
type : "get",
success : function(data) {
//遍历拼接html
var htm = '';
for (var i = 0; i < data.length; i++) {
htm+='<li><div class="product-content"><div class="left am-u-sm-12 am-u-md-6 am-u-lg-6 recruit-left">';
htm+='<img class="product-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="'+data[i].productUrl+'" /></div>';
htm+='<div class="right am-u-sm-12 am-u-md-6 am-u-lg-6 recruit-right">';
htm+='<div class="product-show-title"><span>'+data[i].productName+'</span></div>';
htm+='<div class="product-show-content"><div class="product-add"><span>产品特点：</span><div>';
htm+='<p>'+data[i].productPoint+'</p>';
htm+='</div></div><div class="product-add"><span>产品功能：</span><div>';
htm+='<p>'+data[i].productFunc+'</p>';
htm+='</div></div></div></div></div></li>';
}
$("#products").html(htm);
},
error : function(data) {
alert("获取产品失败")
}
});
}
//产品菜单的显示和隐藏
$(function() {
$("#list").hide();
$("#menu").hover(function() {
$("#list").show();
}, function() {
$("#list").hide();
})
// 鼠标移动到list的div上的时候list div不会被隐藏
$("#list").hover(function() {
$("#list").show();
}, function() {
$("#list").hide();
})
});
</script>
</body>
</html>点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦