zoukankan      html  css  js  c++  java
  • <c:forEach> 并列遍历同一个集合(并列排版)

    具体效果是这样哒

    具体实现时这样哒(标红处为关键部分)

    <%@ page language="java" pageEncoding="UTF-8"%>
    <%@page import="com.hfepc.domain.biz.ProductionOrderSchedule"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
    <%@taglib uri="hfepcTag" prefix="hf"%>
    <%
      String path = request.getContextPath();
      String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <!DOCTYPE HTML>
    <html>
      <head>
        <base href="<%=basePath%>">
        <title>小时产能录入</title>
        <link rel="stylesheet" type="text/css" href="resources/widget/jQuery Validation Plugin/jquery.validate.css">
        <link rel="stylesheet" type="text/css" href="resources/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="resources/css/default.css">
        <link rel="stylesheet" type="text/css" href="resources/css/webapp.css">
        <script type="text/javascript" src="resources/js/vue.js"></script>
        <script type="text/javascript" src="resources/js/jquery.min.js"></script>
        <!-- element-ui -->
        <link rel="stylesheet" href="resources/widget/element-ui/theme-default/index.css">
        <script src="resources/widget/element-ui/index.js"></script>
        <style type="text/css">
          .h4, .h5, .h6, h4, h5, h6 {margin-top: 0;margin-bottom: 0;}
          th, td{font-size: 16px;}
          label,P{font-size: 18px;}
        </style>
      </head>
      <body onload="autoRowSpan(tb,0,0)">
        <nav class="navbar navbar-fixed-top navbar-inverse">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand"><span>小时产能录入</span></a>
            </div>
            <div class="collapse navbar-collapse">
              <ul class="nav navbar-nav navbar-right">
                <li class="danger">
                  <a href="webapp/index" title="主页"><i class="glyphicon glyphicon-home"></i>&nbsp;主页</a>
                </li>
              </ul>
            </div>
          </div>
        </nav><!-- ./nav -->
        <div class="container-fluid">
          <form id="fm" class="form-horizontal">
          <div class="wrapper">
            <div class="row">
                   <div class="form-group">
                  <div class="col-sm-2 text-right"><label class="control-label">生产线:</label></div>
                  <div class="col-sm-4"><p class="form-control-static">${productLine.name }</p></div>
                  <div class="col-sm-2 text-right"><label class="control-label">工作日期:</label></div>
                  <div class="col-sm-4"><p class="form-control-static"><fmt:formatDate value="${now }" pattern="yyyy-MM-dd"/></p></div>
                   </div>
                  <table class="table table-striped table-bordered table-hover table-condensed text-center" id="tb">
                    <thead>
                      <tr>
                        <th class=" text-center">班别</th>
                        <th class=" text-center">时间段</th>
                        <th class=" text-center">A/B边</th>
                        <th class=" text-center">目标产量</th>
                        <th class=" text-center">实际产量</th>
                        
                        <th class=" text-center">班别</th>
                        <th class=" text-center">时间段</th>
                        <th class=" text-center">A/B边</th>
                        <th class=" text-center">目标产量</th>
                        <th class=" text-center">实际产量</th>
                      </tr>
                    </thead>
                    <tbody id="tblDetail">
                       <tr>
                      <c:forEach items="${row }" var="lineSectionDailyInfo" varStatus="status">
                        <c:if test="${status.count%2!=0}">
                        <%-- <c:if test="${lineSectionDailyInfo.timePeriod.shift == 1}"> --%>
                           <td style="vertical-align: middle !important;text-align: center;"><hf:dictionary type="text" cssClass="form-control input-sm" name="shift" group="SCHEDULING_SHIFT" value="${lineSectionDailyInfo.timePeriod.shift }" /></td>
                           <td>${lineSectionDailyInfo.timePeriod.alias }</td>
                           <td>${lineSectionDailyInfo.sectionId }边</td>
                           <td>${lineSectionDailyInfo.planCplQty }</td>
                           <td>
                            <c:choose>
                                  <c:when test="${empty lineSectionDailyInfo.actCplQty }">
                                      <a class="btn btn-info" href="lineSectionDailyInfo/edit/${lineSectionDailyInfo.id }">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                                  </c:when>
                                  <c:otherwise>
                                      <a class="btn btn-info" href="lineSectionDailyInfo/edit/${lineSectionDailyInfo.id }">${lineSectionDailyInfo.actCplQty }</a>
                                  </c:otherwise>
                            </c:choose>
                           </td>
                         <%-- </c:if> --%>
                         </c:if>
                         <c:if test="${status.count%2==0}">
                         <%-- <c:if test="${lineSectionDailyInfo.timePeriod.shift == 2}"> --%>
                            <td style="vertical-align: middle !important;text-align: center;"><hf:dictionary type="text" cssClass="form-control input-sm" name="shift" group="SCHEDULING_SHIFT" value="${lineSectionDailyInfo.timePeriod.shift }" /></td>
                            <td>${lineSectionDailyInfo.timePeriod.alias }</td>
                            <td>${lineSectionDailyInfo.sectionId }边</td>
                            <td>${lineSectionDailyInfo.planCplQty }</td>
                            <td>
                              <c:choose>
                                  <c:when test="${empty lineSectionDailyInfo.actCplQty }">
                                      <a class="btn btn-info" href="lineSectionDailyInfo/edit/${lineSectionDailyInfo.id }">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                                  </c:when>
                                  <c:otherwise>
                                      <a class="btn btn-info" href="lineSectionDailyInfo/edit/${lineSectionDailyInfo.id }">${lineSectionDailyInfo.actCplQty }</a>
                                  </c:otherwise>
                            </c:choose>
                            </td>
                         <%-- </c:if> --%>
                         <tr></tr>
                         </c:if>
                       </c:forEach>
                       </tr>
                    </tbody>
                  </table>
                </div>
                <c:forEach items="${curLSDSI }" var="curLSDSI" varStatus="status">
                     <p class="hidden" id="time${status.count }"><fmt:formatDate value="${curLSDSI.recordDate }" pattern="yyyy-MM-dd"/></p>
                </c:forEach>
                <c:forEach items="${curLSDSI }" var="curLSDSI" varStatus="status">
                     <p class="hidden" id="planSum${status.count }">${curLSDSI.planQty }</p>
                </c:forEach>
                <c:forEach items="${curLSDSI }" var="curLSDSI" varStatus="status">
                     <p class="hidden" id="actSum${status.count }">${curLSDSI.actQty }</p>
                </c:forEach>
                <div id="container" style=" 800px; height: 275px; margin: 0 auto"></div>
                
            </div><!-- ./row -->
            </form>
          </div><!-- ./wrapper -->
        <script type="text/javascript">
          $(function() {
              initValid();
              k_addInputPrefix();
          });
        </script>
        <script type="text/javascript" src="resources/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="resources/js/jquery.min.js"></script>
        <script type="text/javascript" src="resources/js/highcharts.js"></script>
        <script type="text/javascript" src="resources/js/exporting.js"></script>
        <script type="text/javascript" src="resources/widget/jQuery Validation Plugin/jquery.validate.min.js"></script>
        <script type="text/javascript" src="resources/js/util.js"></script>
        <script type="text/javascript" src="resources/widget/layer/layer.js"></script>
        <script type="text/javascript" src="resources/app/kanban/kanban.js?1.2"></script>
        <script type="text/javascript" src="resources/app/andon/lineSectionDailyInfo.js" ></script>
      </body>
    </html>

    原理很简单:在集合中依次输出两条数据到到同一行,之后再进行换行操作。

  • 相关阅读:
    函数模板
    c#使用多线程的几种方式示例详解
    C#中数组、ArrayList和List三者的区别
    c# Thread类
    IEnumerable和IEnumerator 详解
    C#执行CMD命令并接收返回结果的实现方法
    C# Process.Start()方法详解
    C#Json转Xml格式数据的方法
    sql存储过程
    SQL存储过程基础
  • 原文地址:https://www.cnblogs.com/supperlhg/p/9298462.html
Copyright © 2011-2022 走看看