jsp页面展示更加商品的分类,控制商品的显示
我的大概思路是这样的,第一后果获取所有的商品分类 保存在list集合里面,第二从后台获取所有的商品 第三在JSP页面遍历商品分类集合放在页面的左边,然后jsp页面商品详细信息这块,也得先遍历商品分类,然后里面嵌套遍历商品详细信集合
并且带条件<c:if> 判断语句 条件为,分类对象的ID 要等于商品对象里面的分类ID 大概是这样,看下面JSP代码明白了
1:jsp 页面如下图
<div class="secti-con">
<!-- 菜品分类 -->
<div class="secti-conl" >
<ul class="secti-conla">
<c:forEach items="${classificationList }" var="classification">
<li style="border-top:0;" data-id="${classification.id }">${classification.className }</li>
</c:forEach>
</ul>
</div>
<!-- 菜品详细 -->
<div class="secti-conr" >
<c:forEach items="${classificationList }" var="classification">
<ul id="${classification.id }" style="display: none;">
<s:iterator value="list" var="dishes" status="st">
<c:if test="${classification.id eq dishes.classification.id }">
<li>
<div class="sect-box">
<div class="sect-img">
<%-- <a href="javascript:goToDetail(${dishes.id})"><img src="<%=basePath %>${dishes.imageUrl}"></a> --%>
<img src="<%=basePath %>${dishes.imageUrl}" onerror="javascript:this.src='<%=basePath %>res/funcanteen/images/Place-order-3.0/noimg.png';"/>
</div>
<div class="sect-name">
<div class="sect-name1">
<%-- <a href="javascript:goToDetail(${dishes.id})">
<span >${dishes.name }</span>
</a> --%>
<span >${dishes.name }</span>
</div>
<div class="sect-name2">已售出 <span id="dishes_${dishes.id }" class="salesShow">加载中</span></div>
<div class="sect-name3">¥<span class="priceded">${dishes.price }</span></div>
<div class="caidan_jg_y">${p.oldPrice != null ? '¥' : ''}${p.oldPrice }</div>
</div>
<div class="sect-add">
<div class="sect-adda">
<div class="sect-added">
<button type="button" class="dellNum delled" id="dellNum_${dishes.id }">-</button>
<input name="dell_dishesId" type="hidden" value="${dishes.id}" id="dell_dishesId"/>
<input id="numberinst_${dishes.id }" class="numberinst" readonly="" value="0" type="text" name="number" maxlength="2">
<button type="button" class="addedNum addedl">+</button>
<input name="dishesId" class="dishesIdInput" type="hidden" value="${dishes.id }"/>
</div>
</div>
</div>
</div>
</li>
</c:if>
</s:iterator>
</ul>
</c:forEach>
</div>
</div>
2:页面加载时候默认给选中第一个分类
js代码如下页面第一次加载时候js控制选中一个商品分类
$(document).ready(function(){
var conla = $(".secti-conla li:first-child");
conla.addClass("sectidea");
var conlaId = conla.data("id");
$("#"+conlaId).show();
});
3:js控制点击商品分类时候显示商品详细信息
//点击菜品分类名称
$(".secti-conla li").click(function(e) {
$(this).addClass("sectidea").siblings().removeClass("sectidea");
var conlaId = $(this).data("id");
$("#"+conlaId).show().siblings().hide();
});
具体后台数据怎么封装的,这个根据个人需求决定了,这里就不说了。
jsp页面展示更加商品的分类,控制商品的显示的更多相关文章
- jsp页面往mysql里插入中文后数据库里显示乱码
1.JSP页面乱码 这种乱码的原因是应为没有在页面里指定使用的字符集编码,解决方法:只要在页面开始地方用下面代码指定字符集编码即可,<%@ page contentType="text ...
- springmvc 返回json数据给前台jsp页面展示
spring mvc返回json字符串的方式 方案一:使用@ResponseBody 注解返回响应体 直接将返回值序列化json 优点:不需要自己再处理 步骤一:在spring- ...
- JSP页面数据展示:分组数据展示
一.描述: 页面上要展示的数据只要写好sql从数据库查出来即可,但是展示有时候不是太好处理.比如工作中遇到的这种情况:有一个问题处理的流程,其中需要选择下一处理人,这些处理人要以部门的形式分组展示,实 ...
- 关于html5与jsp页面同样的html代码展示的页面效果不一样的问题
原文:关于html5与jsp页面同样的html代码展示的页面效果不一样的问题 html5默认的声明为 <!DOCTYPE html> jsp默认的声明头部为 <%@ page con ...
- 通用分页jsp页面显示
注:本章内容都是在上一篇文章 通用分页后台显示:https://www.cnblogs.com/ly-0919/p/11058942.html 的基础上进行改进,所以有许多的类都在上一篇, 带来不便 ...
- 【SpringBoot】转载 springboot使用thymeleaf完成数据的页面展示
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/weixin_36380516/artic ...
- app——分享wap站,数据处理页面展示
无意中接到了一个小的工作任务:配合手机app端的分享功能做一个wap站,简言之:将手机app端分享的文章id传过来,利用此id再进行一系列的操作,由于文章分为纯文本,图文以及图集的三种类型的文章,因此 ...
- Saiku控制页面展示的数据过长自动换行(二十四)
Saiku控制页面展示的数据过长自动换行 目前用到saiku来展示数据,发现数据文本过长也不会自动换行,然而用户那边又需要换行(会好看些),所以就来改一改源码啦 首先我们使用谷歌浏览器 inspect ...
- Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
随机推荐
- Ubuntu18.04配置中文输入法(系统自带的)
Ubuntu18.04配置中文输入法 之前安装Ubuntu18.04的时候选择了english,现在要配置中文的输入法 打开系统设置 点击其中的工具按钮左边第一个 点击管理语言 ==如果系统刚安装可能 ...
- Laravel Vuejs 实战:开发知乎 (7)验证问题表单字段
上一节代码中已经实现 下面代码中的validate内部配置就是: public function store(Request $request) { // $data = $request->v ...
- 微信小程序GET 400 (Bad Request)解决方案
解决了接口的问题,接下来就是请求不正确,得不到数值 400 (Bad Request) 可以用这个方法:wx.request传入的对象参数中的head改一下 wx.request({ header: ...
- C语言:使用递归解决汉诺塔问题。
//汉诺塔:汉诺塔(又称河内塔)问题是源于印度一个古老传说的益智玩具.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘.大梵天命令婆罗门把圆盘从下面开始按大小 ...
- C++基础之迭代器iterator
C++基础之迭代器iterator 我们已经知道可以使用下标运算符来访问string对象的字符或vector对象的元素,还有另一种更通用的机制也可以实现同样的目的,这就是迭代器(iterator). ...
- sql语句查询指定月份数据
要求:查询出emp表中1981年2月份入职的员工 emp表 常用的两种方式: 1.YEAR查询年,MONTH查询月 SELECT * FROM emp WHERE ' 2.date_format (使 ...
- 带你了解MyBatis一二级缓存
在对数据库进行噼里啪啦的查询时,可能存在多次使用相同的SQL语句去查询数据库,并且结果可能还一样,这时,如果不采取一些措施,每次都从数据库查询,会造成一定资源的浪费,所以Mybatis中提供了一级缓存 ...
- JavaScirpt - 模块的写法
传送门 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 1. 原始写法 function f1() { // do sth. ...
- 复变函数知识总结(2)——Cauchy理论
复变函数知识总结(2)——Cauchy理论 版本:2020-01-01 此版本不是最终版本,还有后续的补充和更新. 如有错误请指出,转载时请注明出处! page1 page2 page3 page4 ...
- Jmeter在linux下的安装
Apache Jmeter简介 Apache JMeter 是Apache组织的开放源代码项目,是一个100%纯Java桌面应用,用于压力测试和性能测量.它最初被设计用于Web应用测试但后来扩展到 ...