直接上代码:
js(通过选择器的两个属性值来判断是否勾选):
<script type="text/javascript">
...
<c:forEach items="${listCertType}" var="certType">
$(":checkbox[certid='${certType.certid}'][accttype='${certType.accttype}']")[0].checked = true;
</c:forEach>
...
</script>
html标签(自定义两个属性值accttype和certid):
<tbody>
<c:forEach items="${allcert}" var="list">
<tr>
<td>${ list.name}</td>
<td><input type="checkbox" accttype="0" certid="${list.id }"></td>
<td><input type="checkbox" accttype="1" certid="${list.id }"></td>
<td><input type="checkbox" accttype="2" certid="${list.id }"></td>
<td><input type="checkbox" accttype="3" certid="${list.id }"></td>
</tr>
</c:forEach>
</tbody>
数据来源:
@RequestMapping("/index")
public ModelAndView index() {
ModelAndView mv = new ModelAndView();
//查询所有cert,显示所有数据
List<Cert> list = certservice.queryAllCert();
mv.addObject("allcert", list);
//查询需要勾选的所有值
List<Map<String,Object>> listCertType = certservice.queryListCertType();
mv.addObject("listCertType", listCertType);
mv.setViewName("/type/index");
return mv;
}
大致思路是:
- 先在checkbox中声明两个自定义属性,分别表示行和列的索引值;
- 查询需要勾选出来的值放在map集合中,但由于有多条数据,所以再将其包装在List集合中;
- 在js中遍历此集合,将行和列相对应值取出并进行勾选(由于我这里的map存储的就是行和列的索引值,所以可以直接在js取出并使用)。
显示结果如下:
数据库中的数据: