后台添加菜单信息如何在前端循环遍历?

后台管理模块,添加产品照片,产品名称,产品特点等信息

图片.png

前端页面模块,根据所属类别展示信息,点击子菜单的时候,会显示出具体产品特点,产品功能介绍的界面。

图片.png

主要祖传代码展示:

<%@ 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"
                                src="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 src="assets/js/jquery-2.1.0.js" charset="utf-8"></script>
    <script src="assets/js/amazeui.js" charset="utf-8"></script>

    
    

    <!--返回顶部-->
    <script type="text/javascript"
        src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript"
        src="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" src="'+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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

微信小游戏 - 初体验

在月活用户近9亿的社交平台上做小游戏,是胆战心惊了点,毕竟游戏脱离控制、变身国民爆款可能是分分钟的事。

8156
来自专栏Android知识点总结

01-Linux开篇-Android之路感触篇

1094
来自专栏猿湿Xoong

怎么用TWRP刷LineageOS拯救我的Android手机?

8924
来自专栏老九学堂

有个程序猿很忧桑:一个命令rm -rf/ ,他把整个公司删没了...

▼ 话说 最近有个程序猿很忧桑 ....... ? 因为弄错了一行代码 这哥们不小心把他整个公司 删没了 没了 了 ... ? ? 好吧.. 事情是这样的.....

3345
来自专栏儿童编程

【Scratch编程与艺术-1】简单与重复的艺术

利用Scratch的“图章”功能,能够实现非常美的效果。我们可以称之为简单的艺术。我们需要做的就是把下面的代码加在某一对象身上。点击开始按钮,就可以静静地欣赏亲...

1612
来自专栏Jerry的SAP技术分享

SAP成都研究院李三郎:SCP Application Router简介

作为成都研究院里同时精通Java, JavaScript和ABAP这三门编程语言的数位同事之一,Ben曾经先后担任了成都CRM Fiori开发团队,S4CRM开...

4366
来自专栏程序人生

从 gitlab 事件中吸取的教训

题注:这是一篇去年的文章,今早看到 gitlab 运维人员愚蠢地 rm -rf, 心有戚戚焉,故而重发这篇文章,供大家参考。 ---- 这两天不是很太平,程序圆...

38910
来自专栏SDNLAB

SDNLAB技术分享(十一):VXLAN基础知识

之前Arista在欧洲阶段性的有ATF的类似技术论坛的会议, ARISTA TECHNICAL FORUM, 后来到了美国和APAC, 名字改了, 改为CLOU...

4198
来自专栏沃趣科技

隔壁老王的数据备份“变形”记

隔壁老王作为一名合格的DBA 守护数据安全是他不可推卸的责任 比如每一次的数据库备份 可是你懂的 那备份的速度 ? 于是乎 兢兢业业的老王一边盯着屏幕 一边若有...

4237
来自专栏游戏杂谈

关于《Node.js开发指南》

天天刷豆瓣,就盼着京东360有货到或者亚马逊有货到(最开始只有china-pub有货,但从亚马逊上下单要先付款RMB43.8--其中要多付10块钱的运费:(,...

1022

扫码关注云+社区

领取腾讯云代金券