页面实现全选和批量操作

全选的思路是:遍历标签下的type为checkbox的input标签,改变这些checkbox的check状态和点击全选的状态一样

批量操作的思路是:用js获取记录中的id用逗号拼接,传到后台执行批量操作的处理

 

全选js:

 

$("#checkAll").click(function() {
		var rows = $("#content").find('input');
		for (var i = 0; i < rows.length; i++) {
			if (rows[i].type == "checkbox") {
				var e = rows[i];
				e.checked = this.checked;
			}
		}
	});


批量操作:

 

html:

 


js:

 

 

//批量操作
	$("#save").click(function() {
		var checkid = document.getElementsByName("checkid");
		var str = "";
		for (var j = 0; j < checkid.length; j++) {
			if (checkid[j].checked == true) {
				str += checkid[j].value + ",";
			}
		}
		if(str == ""){
			JsUtils.show("请选择至少一条记录!");
			return false;
		}
		var flag = $("#command option:selected").val();
		if(flag == "-1"){
			JsUtils.show("请选择操作!");
			return false;
		}
		JsUtils.show("确定执行该操作?", guessList.save);
	});

 

//批量操作保存
		save : function() {
			var checkid = document.getElementsByName("checkid");
			var str = "";
			for (var j = 0; j < checkid.length; j++) {
				if (checkid[j].checked == true) {
					str += checkid[j].value + ",";
				}
			}
			var flag = $("#command option:selected").val();
			if (flag != "-1") {
				guessList.ajaxPost(flag, str);
			}
		},
		//批量操作
		ajaxPost : function(flag,ids) {
			$.ajax({
				type : "POST",
				async:true,
				url : ctx+"/rec/ges/batchUpdate",
				data : {
					"flag": flag,
					"ids": ids
				},
				dataType : "json",
				success : function(data, textStatus) {
					if (data.rtnCode == 0) {
						JsUtils.show("更新成功",function(){
							window.location.href = ctx+"/recommend/guess";
						});
					} else {
						JsUtils.show("操作失败,请重试!");
					}
				},
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					JsUtils.show("系统忙,请稍后再试!");
				}
			});
		},

 

 

java后台处理:

 

@RequestMapping(value = "/ges/batchUpdate", method = RequestMethod.POST)
	@ResponseBody
	public Map batchUpdate(String flag, String ids)
			throws Exception
	{
		Map result = new HashMap();
		String[] idsArray = null;
		if (StringUtils.isNotEmpty(ids))
		{
			idsArray = ids.split(",");
			List idList = Arrays.asList(idsArray);
			if ("0".equals(flag))
			{
				guessService.openRec(idList);
			}
			if ("1".equals(flag))
			{
				guessService.closeRec(idList);
			}
			if ("2".equals(flag))
			{
				guessService.delByIds(idList);
			}
		}
		result.put("rtnCode", 0);
		return result;
	}

 

 

mybatis配置:

 


		DELETE FROM ges WHERE id IN 
		
		#{idItem}
		
	

Mapper:

 

 

void delByIds(List ids);


 

 

 

 

 

 

 

 

 

你可能感兴趣的:(javascript)