您的位置：首页 > Web前端 > JavaScript

jsp中div遍历list集合

2015-12-29 12:01 585 查看
今天拿到一个新的需求实现，页面右边有两个tab，其中一个为今日报警，点击该tab连接一个页面，页面显示今日报警的最新两条记录。



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



我还天真的以为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即可



有想法了一定要实践来证明，不要故步自封。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航