前台接收后台传过来的list进行遍历,然后根据表格用合并rowspan列

77 阅读 0 评论 51 点赞

我是靠谱客的博主悲凉皮卡丘，这篇文章主要介绍前台接收后台传过来的list进行遍历,然后根据表格用合并rowspan列，现在分享给大家，希望可以做个参考。

将数据以表格的信息进行展示,但是两行的开头要进行合并,可以用好多方法,下面是其中的一种：

后台代码使用的是spring mvc(我进行了简化)：

复制代码

1
2
3
4
	ModelAndView mv = new ModelAndView("页面路径");
List<MeetInfoBo> list = this.meetFindManager.findMeetInfoList();
mv.addObject("list", list);
return mv;

前台代码：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
	<table class="table_solid" border="0" cellspacing="0" id="list">
<tr>
<th width="16%">星期</th>
<th width="16%">会议或活动名称</th>
<th width="16%">开始时间</th>
<th width="16%">结束时间</th>
<th width="16%">主办单位</th>
<th width="16%">会议地点</th>
</tr>
<c:if test="${not empty list}">
<c:forEach items="${list}" var="item" varStatus="status">
<tr id="list">
<td>${item.weeks}</td>
<td>${item.title}</td>
<td>${item.beginDate}</td>
<td>${item.endDate}</td>
<td>${item.zbdw}</td>
<td>${item.meetPlace}</td>
</tr>
</c:forEach>
</c:if>
</table>

下面是js代码：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
	jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
return this.each(function(){
var that;
$('tr', this).each(function(row) {
$('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
if (that!=null && $(this).html() == $(that).html()) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan",1);
rowspan = $(that).attr("rowSpan"); }
rowspan = Number(rowspan)+1;
$(that).attr("rowSpan",rowspan);
$(this).hide();
} else {
that = this;
}
});
});
});
}
//调用表单的id
$("#list").rowspan(0);
$(function() {
$("#list").rowspan(0); //传入的参数是对应的列数从0开始，哪一列有相同的内容就输入对应的列数值
$("#list").rowspan(1);
});