首先,数据库有两个表,A表的ID(主键)是B表的外键,A表的一条数据可能对应B表的一条或多条数据,即A1→ B1、B2、B3... 功能需求是将A表的数据与A表对应的B表的数据显示出来,这就需要用到C标签,并且这里需要C标签的套用。
后台通过Map将值传到前台,后台代码如下:
@RequestMapping("index") public String turnToPage(HttpServletRequest request){ //request.setAttribute("list",pcQzShortcutService.getListByPcQzShortcut(null)); List<Map<String,List>> a=new ArrayList<Map<String,List>>(); List<PcQzShortcut> shortcuts = pcQzShortcutService.getListByPcQzShortcut(new PcQzShortcut()); for (PcQzShortcut pcQzShortcut:shortcuts){ PcQzDetail d = new PcQzDetail(); d.setPcQzId(pcQzShortcut.getId()); List<PcQzDetail> details = pcQzDetailService.getListByPcQzDetail(d); Map<String,List> map = new HashMap<String, List>(); List l=new ArrayList(); l.add(pcQzShortcut); map.put("zb", l); map.put("cb",details); a.add(map); } request.setAttribute("slist",a); return "pcQzShortcut/pcQzShortcut"; }代码讲解:
首先,遍历主表中的所有数据
List<Map<String,List>> a=new ArrayList<Map<String,List>>(); List<PcQzShortcut> shortcuts = pcQzShortcutService.getListByPcQzShortcut(new PcQzShortcut());
其中 PcQzDetail是从表实体类,新建一个从表实体对象,PcQzDetail d = new PcQzDetail();
将主表的ID塞到新的从表对象里面,
for (PcQzShortcut pcQzShortcut:shortcuts){ PcQzDetail d = new PcQzDetail(); d.setPcQzId(pcQzShortcut.getId());
然后用List 对象,查出从表中与外键ID相同的数据
然后用map将主表与从表数据传到前台List<PcQzDetail> details = pcQzDetailService.getListByPcQzDetail(d);
Map<String,List> map = new HashMap<String, List>(); List l=new ArrayList(); l.add(pcQzShortcut); map.put("zb", l); map.put("cb",details); a.add(map);将主表与从表对应起来的数据整合一起,传入前台:request.setAttribute("slist",a);
前台页面代码如下
红色部分:就是后台传入前台的值及c标签的用法
浅绿色部分:获取数据库的字段值
<div id="tab-2" class="tab-pane active"> <div class="panel-body"> <div class="text-left"> <button type="button" class="btn btn-primary" data-toggle="modal" οnclick="openSaveModal() <%--data-target="#addroad--%>">添加便道</button> </div> <c:forEach var="s" items="${slist}" varStatus="statuss"> <c:forEach var="pcQzShortcut" items="${s.zb}" varStatus="status"> <div class="jbz-eve" id="pcQzShortcutGrid"> <div class="ibox-title"> <h5>便道${statuss.index+1}</h5> <button type="button" class="btn btn-info" data-toggle="modal" οnclick=getShortcutDetail("${pcQzShortcut.id}") <%--data-target="#myModal2"--%>>编辑</button> <button type="button" class="btn btn-danger" data-toggle="modal" οnclick=del("${pcQzShortcut.id}","${ctx}/pcQzShortcut/delete.do")>删除</button> </div> <div class="ibox-content"> <ul class="ul-list"> <input class="hidden" type="text" value="${pcQzShortcut.id}"/> <li><span class="name">长度:</span><em>${pcQzShortcut.length}</em></li> <li><span class="name">坡度限值:</span><em>${pcQzShortcut.gradient}</em></li> <li><span class="name">宽度:</span><em>${pcQzShortcut.width}</em></li> <li><span class="name">零工数量:</span><em>${pcQzShortcut.oddjobNum}</em></li> <li><span class="name">设备台班数量:</span><em>${pcQzShortcut.facilityNum}</em></li> <li><span class="name">砼量:</span><em>${pcQzShortcut.proposeNum}</em></li> <li><span class="name">标识牌:</span><em>${pcQzShortcut.signboard}</em></li> <li><span class="name">排水:</span><em>${pcQzShortcut.drainage}</em></li> <br /> <li class="ul-table"> <span class="name" style="z-index: 1;">错车平台:</span> <div class="col-sm-8" style="margin-left: 200px;"> <table class="table table-bordered"> <thead> <tr > <th>#</th> <th>长度</th> <th>宽度</th> </tr> </thead> <tbody> <c:forEach var="pcQzDetail" items="${s.cb}" varStatus="status"> <tr> <input class="hidden" type="text" value="${pcQzDetail.id}"/> <td>${status.index+1}</td> <td>${pcQzDetail.length}</td> <td>${pcQzDetail.width}</td> </tr> </c:forEach> </tbody> </table> </div> </li> </ul> </div> </div> </c:forEach> </c:forEach> </div> </div>//讲解///
<c:forEach var="s" items="${slist}" varStatus="statuss"> : s.xxx→获取此集合中的相关数据
·items:要进行迭代的集合,后台传过来的集合,${slist}是主表与从表的对应数据集合·var:迭代参数的名称。可通过s.xxx 获取集合中的数据
varStatus:迭代变量的名称,用来表示迭代的状态,可以访问到迭代自身的信息,可以展现数据的条数
<c:forEach var="pcQzShortcut" items="${s.zb}" varStatus="status"> s.zb→ 主表集合items="${s.zb}"后台传入前台的主表数据集合var="pcQzShortcut"主表数据迭代参数名称,可以通过pcQzShortcut.xxx 将主表中的属性展现出来<c:forEach var="pcQzDetail" items="${s.cb}" varStatus="status"> s.cb→ 从表集合后台传入前台的从表数据集合主表数据迭代参数名称,可以通过pcQzDetail.xxx 将主表中的属性展现出来
展示效果如下:一条主表数据对应多条从表数据,数据库中有多少条就依次循环展现多少条