forEach循环实现卡片列表

简介: 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);
}
相关文章
|
4月前
列表元素
【8月更文挑战第4天】列表元素。
42 8
全选和反选中for循环加if判断只会判断最后一个的问题(已解决)
全选和反选中for循环加if判断只会判断最后一个的问题(已解决)
60 0
|
JSON JavaScript 数据格式
Elementui Tree 树形控件,将勾选选中的值放在list集合里面提交
Elementui Tree 树形控件,将勾选选中的值放在list集合里面提交
81 1
|
小程序 JavaScript
小程序循环列表删除当前选中列表的方法
小程序循环列表删除当前选中列表的方法
114 0
批量遍历 list 中的元素
批量遍历 list 中的元素
109 0
批量遍历 list 中的元素
|
存储 索引
SwiftUI极简教程12:List列表和ForEach循环的使用
SwiftUI极简教程12:List列表和ForEach循环的使用
1188 0
SwiftUI极简教程12:List列表和ForEach循环的使用
|
索引
删除列表中的元素,文章中含有源码
删除列表中的元素,文章中含有源码
93 0
删除列表中的元素,文章中含有源码
|
开发者 Python
列表的遍历|学习笔记
快速学习列表的遍历
|
移动开发 前端开发 HTML5
web前端学习(七)——HTML5中列表(无序列表、有序列表、嵌套列表、自定义列表)及列表项的相关标签设置
web前端学习(七)——HTML5中列表(无序列表、有序列表、嵌套列表、自定义列表)及列表项的相关标签设置
web前端学习(七)——HTML5中列表(无序列表、有序列表、嵌套列表、自定义列表)及列表项的相关标签设置
|
开发者
遍历列表|学习笔记
快速学习 遍历列表
102 0