从session中取出集合 动态位置显示集合内容到div
<div class="cnt">【原创】不知道大家是否有这样的经历,你把从数据库取到的N多bean放到了集合中 然后响应到jsp，通过jsp标签取出这些bean 并且把这些bean的属性按照一定规律放置到div，并且要求以每行4个显示。可能你有点晕 不知道我在说什么
举个例子
我从数据库查询完东西 得到一个集合 集合里面有N多个bean(Album)
是这样的bean
public void Album{
private int id;
private String name;
private String img;
...省略
}
然后把这个集合 放到了httpSession中
然后响应到某jsp中
这个jsp需要迭代取出这个bean
其实取出的就是相册(Album)它有名称 和 封面图片
然后把它显示在如下的div中
<div>
相册名称:${取出的名称}
<img src="取出的链接">
</div>
取出多少个bean 就有多少个这样的div
但是我需要让这些div 以每行4个显示 显示N行。还需要设置绝对定位。
就是以行的概念，一行显示4个 超过4个换行显示 直到把我所查的这些相册显示完为止
解决方案1：以table定位来显示
-----------------------------------------------
<body>
<%
List list=new ArrayList();
for(int i=0;i <20;i++)
{
Album a=new Album();
a.setName("名字"+i+1);
list.add(a);
}
session.setAttribute("listAlbum",list);
%>
以上假设 放入20个bean到集合
<table>
<tr>
<logic:iterate id="tphoto" name="listAlbum" indexId="i">
<c:if test="${i%4!=0}">
<td>
周
</td>
</c:if>
<c:if test="${i%4==0}">
</tr>
<tr>
<td>
雅
</td>
</c:if>
</logic:iterate>
</tr>
</table>
</body>
打印出的效果
雅 周 周 周
雅 周 周 周
雅 周 周 周
雅 周 周 周
雅 周 周 周
================================================================================
解决方案2：以绝对定位div来显示
------------------------------------------------------------------------------------
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript">
var x=10,y=0;
</script>
</head>
<body>
<%
//模仿从数据库取出数据
List list=new ArrayList();
for(int i=0;i<20;i++)
{
Album a=new Album();
a.setName("名字"+i+1);
list.add(a);
}
session.setAttribute("listAlbum",list);
%>
<div id="exterior_div" >
</div>
<div id="spare_div" style="display:none">
<div style="position:absolute;width:240px;height:220px;background-color:red"></div>
</div>
<logic:iterate id="tphoto" name="listAlbum" indexId="i">
<c:if test="${(i+1)%4!=0}">
<script type="text/javascript">
$("#spare_div").find("div").css("top",y).css("left",x);
$("#spare_div").find("div").html("${i+1}");
$("#spare_div").children().clone().appendTo("#exterior_div");
alert("x="+x+";y="+y+" 第"+${i+1}+"个|上");
x=x+250;
</script>
</c:if>
<c:if test="${(i+1)%4==0}">
<script type="text/javascript">
$("#spare_div").find("div").css("top",y).css("left",x);
$("#spare_div").find("div").html("${i+1}");
$("#spare_div").children().clone().appendTo("#exterior_div");
alert("x="+x+";y="+y+" 第"+${i+1}+"个|下");
y=y+230;
x=10;
</script>
</c:if>
</logic:iterate>
</body>
以上的js是使用的jquery框架
<span style="color: #ff0000;"><span style="color: #000000;">运行效果 http://hiphotos.baidu.com/qq136836301/abpic/item/04031dfac8c206376d22ebae.jpg20个红色的div 以每行4个显示
如果看不到截图 请到http://hi.baidu.com/qq136836301/blog/item/998240fbc635059f59ee90e4.html我的百度空间 去看本文。
如果还不明白可以加QQ136836301
页:
[1]