JavaWeb开发中关于页面那些事儿（一）

        我们项目中的一个页面上有一个人员清单列表，列出的每一数据由多个字段组成并匹配复选框供用户进行选择。在列表下方有一个添加按钮，可以将选中数据条目添加到某一个实体对象中去。如下图所示：

         其中一个重要的功能就是做全选，虽然很容易实现，但是也不能忽略，有些面试也会问到的。代码如下：

         HTML的代码：

<input id="checkAll" type="checkbox" title="全选"/>

         jQuery的代码：

$("#checkAll").click(function(){
				$(".checkbox").attr("checked", $(this).prop("checked")); // 该方法包含全选和反选
			})

         其中要注意的点：checkAll是进行全选操作唯一的复选框，所以可以用id来获取，而下面的都是相同的复选框（复选框的id不同），没必要一个个去写，可以通过jquery进行动态生成，这里等下再说，所以都用相同的class获取即可。

         因为这些数据是通过查询条件查出来的，之前并没有数据，因为每条数据之前都要附带复选框，而仅仅从数据库中查询的只能查到数据，所以我们用jquery遍历的方法将查询出来的数据逐一添加到列表下面。代码如下：

$("#btnSearch").click(function(){ // 这里的btnSearch表示查询按钮的id
				loading('正在查询，请稍等...');
				$.post("${ctx}/safe/stress/safeStressScheme/findPersonList?" + $("#inputForm").serialize(), // 注意：这里是一个比较我觉得比较新颖的写法，原来我们一般把action写在表单里，但这里我们需要在JS里做更多处理，所以直接post到后台得到的结果并不能满足我们的需求，可以将表单序列化为可以传输的形式后再提交给后台
	      			function(data){
					var html = "";
					$.each(data,function(i,item){ // 遍历方法，i表示当前循环到第几个索引，item表示要遍历的对象（后台返回）
						html += '<tr>';
						html += '<td><input class="checkbox" name="staffIds" type="checkbox" value="'+item.staffId+'"/></td>';
						html += '<td>'+(i+1)+'</td>';
						html += '<td>'+item.code+'</td>';
						html += '<td>'+item.name+'</td>';
						html += '<td>'+item.sex+'</td>';
						html += '<td>'+item.currMouthFoul+'</td>';
						html += '<td>'+item.currThreeMounthFoul+'</td>';
						html += '<td>'+item.currSixMounthFoul+'</td>';
						html += '<td>'+item.allYearFoul+'</td>';
						html += '<td>'+item.allYearBruiseNum+'</td>';
						html += '<td>'+item.allYeardieNum+'</td>';
						html += '<td>'+item.allYearFault+'</td>';
						html += '<td>'+item.sum+'</td>';
						html += '<td>'+item.status+'</td>';
						html += '<td>'+item.lineCode+'</td>';
						html += '<td>'+item.fleetName+'</td>';
						html += '<td>'+item.siteType+'</td>';
						html += '<td>'+item.entryDate+'</td>';
						html += '</tr>';
					});
					$("#dealInfo tbody").html(html); // 将动态生成的html代码块添加到tbody标签下
					$(".checkbox").click(function(){ // 随机点击一个复选框
						$("#checkAll").attr("checked",true); // 假设选中全选框 
						$.each($(".checkbox"),function(i,item){ // 遍历每个复选框
							if(!$(item).is(":checked")){ // 如果有一个复选框没选中
								$("#checkAll").attr("checked",false); // 全选框改为不被选中
								return false;
							}
						})
					})
					closeLoading(); // 关闭加载
				},"json");
			})