本次用的是一个双层循环,数据结构为一个Map<String,List<CheckItem>> map = new HashMap();
首先要加入<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>。使用该标签获取第二次循环的长度
<table id="contentTable" class="table table-striped table-bordered table-hover table-condensed dataTables-example dataTable">
<tbody>
<c:forEach items="${map}" var="m">
<tr>
<td class="leftClass" width="10%" valign="middle">${m.key}</td>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<c:forEach items="${m.value}" var="item" varStatus="id">
<c:if test="${fn:length(m.value)==1 }">
<tr>
<td width="30%">
<label for="" class="label_oneItem">
<input type="checkbox" id="${item.id}" class="i-checks">
${item.name}
</label>
</td>
</tr>
</c:if>
<c:if test="${fn:length(m.value)==2 }">
<c:choose>
<c:when test="${id.index==0}">
<tr>
<td width="30%">
<label for="" class="label_oneItem">
<input type="checkbox" id="${item.id}" class="i-checks">
${item.name}
</label>
</td>
</c:when>
<c:otherwise>
<td width="30%">
<label for="" class="label_oneItem">
<input type="checkbox" id="${item.id}" class="i-checks">
${item.name}
</label>
</td>
</tr>
</c:otherwise>
</c:choose>
</c:if>
<c:if test="${fn:length(m.value) >=3 }">
<c:choose>
<c:when test="${id.index % 3 == 1}">
<td width="30%">
<label for="" class="label_oneItem">
<input type="checkbox" id="${item.id}" class="i-checks">
${item.name}
</label>
</td>
</c:when>
<c:when test="${id.index % 3 == 2}"> <td width="30%">
<label for="" class="label_oneItem">
<input type="checkbox" id="${item.id}" class="i-checks">
${item.name}
</label>
</td>
</tr>
</c:when>
<c:otherwise>
<tr>
<td width="30%">
<label for="" class="label_oneItem">
<input type="checkbox" id="${item.id}" class="i-checks">
${item.name}
</label>
</td>
</c:otherwise>
</c:choose>
</c:if>
</c:forEach>
</tbody>
</table>
</td>
</tr>
</c:forEach>
</tbody>
</table>
效果图如下
下面为使用layer 打开一个页面。。并接收选中的值的id信息(父子页面传值)。如果table层级修改,只需要修改相应的
iframeWin.contentWindow.$("#contentTable tbody tr td table tbody tr td input.i-checks:checkbox").each(function(){});即可。
<a class="" style="font-size: 8px;" href="javascript:void(0)" >
<i class="fa fa-chevron-up" οnclick="selectQualitativeItem('选择定量单项', '${ctx}/core/checkItem/groupAllItemsByfirstLetter?isQualitative=0&isCompsite=0','1000px', '800px','pManageContent')">选择单项</i>
</a>
function selectQualitativeItem(title,url,width,height,target){
if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){//如果是移动端,就使用自适应大小弹窗
width='auto';
height='auto';
}else{//如果是PC端,根据用户设置的width和height显示。
}
top.layer.open({
type: 2,
area: [width, height],
title: title,
maxmin: true, //开启最大化最小化按钮
content: url ,
btn: ['确定','关闭'],
yes: function(index, layero){
var str="";
var body = top.layer.getChildFrame('body', index);
var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
iframeWin.contentWindow.$("#contentTable tbody tr td table tbody tr td input.i-checks:checkbox").each(function(){
if(true == $(this).is(':checked')){
str+=$(this).attr("id")+",";
}
});
//进行视图渲染。。echart
$.ajax({
type : "post",
url : "${ctx}/core/checkResult/statisticDXResult",
async : false,
data : {
"id" : str ,
"abnormal":"abnormal_type01"
},
success : function(data) {
}
});
// top.layer.close(index);//关闭对话框。
setTimeout(function(){top.layer.close(index)}, 100);//延时0.1秒,对应360 7.1版本bug
},
cancel: function(index){
}
});
}