jsp中div遍历list集合

时间:2023-02-12 19:40:43

        今天拿到一个新的需求实现,页面右边有两个tab,其中一个为今日报警,点击该tab连接一个页面,页面显示今日报警的最新两条记录。

jsp中div遍历list集合

    之前的查询都是分页返回ListData,然后查询数据显示在表格,然后在xml中配置URL,即action中该查询方法所打的标签。

jsp中div遍历list集合

        我还天真的以为jsp中也可以承接一个action返回的URL,不过一直显示不出来数据,后来发现自己思维很不灵活,各方法的使用也不熟练,比如这个明明不需要分页的,而且service层封装的finder查询器可以增加最大查询结果数(所以多看下更深处的东西,越到最底层越能体会柳暗花明又一村的感觉)

         开始也网上查找jsp中div如何遍历action返回的数据,可大多都是json返回给tb,然后自己就一直陷进去了,因为我返回的是分页json,而且页面接收也不是tb,而是div,这下<c:forEach>否定了,后来大神指点后,肠子都悔青了,有了一个想法一定要去实践,去证明它。哎,看下它的真面目吧。

一、service中查询今日最新2条记录:

/**
* 获取红外监控当前列表
* @param pageSize
* @param request
* @return
*/
@SuppressWarnings("unchecked")
public List<SnAlarmRecord> listtoday(int pageSize,HttpServletRequest request){
//创造带hql的创造器
Finder finder = Finder.create("select new com.snsoft.ssnc.ncgl.entity.SnAlarmRecord(recorduuid,eqname,alarmlocation,alarmstate,alarmtime)");
//查询日期为当天
finder.append("from SnAlarmRecord where DateDiff(dd,alarmtime,getdate())=0 ");
//根据日期排序,且是降序
finder.append(" order by alarmtime desc");
//查询最新的2条
finder.setMaxResults(pageSize);

return super.listByFinder(finder);
}

二、action中方法的调用(将查询list放在map中,并返回需要承接的jsp页面)

/**
* 获取红外监控当天数据页面
* @param sortorder 排序方式
* @param request
* @return
*/
@RequestMapping(value="/hwjk_right.do", method=RequestMethod.GET)
public String hwjk_right(ModelMap modelMap, String leftData,HttpServletRequest request){
//返回查询的今日2条list集合
List<SnAlarmRecord> list = alarmrecordService.listtoday(2, request);
//将list放在map中
modelMap.put("list", list);

return "ssnc/common/hwjk_right";
}

三、jsp中遍历放在map中的list

<span style="font-weight: normal;"><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/framework/include/taglib.jsp" %>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>红外监控</title>
<style type="text/css">
.topd{height:60px;position:relative; border:1px solid #ccc; margin:2px;}
.topd img{position:absolute; top:10px; left:10px;}
.topd .nmsg{position:absolute; top:25px; left:50px;}
.topd .nmsg b{color:red;}

.msglist{position:relative;border:1px solid #ccc; margin:2px;font-size:12px;}
.msglist .msgitm{padding:5px;border-bottom:1px solid #ccc; line-height:18px;}
.msglist .msgitm b{color:red;}
</style>
</head>
<body style="margin:0;padding:0;">

<div class="topd">
<img src="${path }/resource/framework/img/alarm.png" />
<div class="nmsg">今日报警 <b>2</b> 条</div>
</div>
<div >
<c:forEach items="${list }" var="s">
<div class="msglist">时间:<fmt:formatDate value="${s.alarmtime }" pattern="yyyy-MM-dd HH:mm:ss" /><br/>
设备:${s.eqname }<br/>
位置:${s.alarmlocation }<br/>
状态:<b>${s.alarmstate==0 ? "未处理":"已处理" }</b>
</div>
</c:forEach>

</div>
</body>
</html></span>

四、最后首页的xml连接到该jsp即可

jsp中div遍历list集合

     有想法了一定要实践来证明,不要故步自封。