forEach循环实现卡片列表

时间:2022-06-20
本文章向大家介绍forEach循环实现卡片列表，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%
    String path = request.getRequestURI();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
%>
<base href="<%=basePath%>">
<title>监测看板</title>
<link rel="stylesheet" type="text/css" href="../../css/board/board.css" />
</head>
<body>
    <div class="page-content-wrapper">
        
            <div class="row cardcotain" id="par">
            <c:forEach var="ls" items="${list }">
                <div class=" card">
                    <div class="row">
                        <div class="img">
                            <img id="photo" src="${ls.headUrl }" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="name">
                            姓名:<span>${ls.name }</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="sex">
                            性别:<span>
                            <c:if test="${ls.sex == 1}">男</c:if>
                            <c:if test="${ls.sex == 2}">女</c:if>
                            </span>
                        </div>
                    </div>
                    <div class="row">
                        <c:if test="${ls.bed == 2 }">
                            <div class="orgin">
                                心率:<span> -- </span>
                            </div>
                        </c:if>
                        <c:if test="${ls.bed == 1 }">
                            <div class="orgin">
                                心率:<span>${ls.heart }</span>
                            </div>
                        </c:if>
                    </div>
                    <div class="row">
                        <c:if test="${ls.bed == 2 }">
                            <div class="orgin">
                                呼吸:<span> -- </span>
                            </div>
                        </c:if>
                        <c:if test="${ls.bed == 1 }">
                            <div class="orgin">
                                呼吸:<span>${ls.breath }</span>
                            </div>
                        </c:if>
                    </div>
                    <div class="row">
                        <c:if test="${ls.bed == 2 }">
                            <div class="orgin">
                                体动:<span> -- </span>
                            </div>
                        </c:if>
                        <c:if test="${ls.bed == 1 }">
                            <div class="orgin">
                                体动:<span>${ls.motion }</span>
                            </div>
                        </c:if>
                    </div>
                </div>
                </c:forEach>
            </div>

        
    </div>
    <script type="text/javascript" src="../../js/com/jquery-1.9.1.js" /></script>
    <script type="text/javascript" src="../../js/board/board.js" /></script>
    <script src="../../common/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

js

var path = getContextPath();

$(function() {

})

// 获取项目路径
function getContextPath() {
    var currentPath = window.document.location.href;
    var pathName = window.document.location.pathname;
    var pos = currentPath.indexOf(pathName);
    var localhostPath = currentPath.substring(0, pos);
    var projectName = pathName
            .substring(0, pathName.substr(1).indexOf('/') + 1);
    return (localhostPath + projectName);
}

随机文章
本站知识点必读
最近更新