使用c标签的forEach遍历展现数据库主表与从表的数据

首先，数据库有两个表，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相同的数据

List<PcQzDetail> details = pcQzDetailService.getListByPcQzDetail(d);
然后用map将主表与从表数据传到前台

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 将主表中的属性展现出来
 
 

展示效果如下：一条主表数据对应多条从表数据，数据库中有多少条就依次循环展现多少条