jquery bootstrap 实现表格中 复选框的全选和取消全选 批量提交 - Go语言中文社区

jquery bootstrap 实现表格中 复选框的全选和取消全选 批量提交


143925_kmU9_2507499.png

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@	taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 页内 全局起始路径 -->
<base href="${basePath}" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>比赛报名审核</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="js/bootstrap-3.3.7/dist/css/bootstrap.min.css">
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet"
	href="js/bootstrap-3.3.7/dist/css/bootstrap-theme.min.css">
<!-- Jquery 依赖 -->
<script src="js/jquery-1.9.1.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
	<div align="center">
		<h2>${game.name}&nbsp;&nbsp;比赛报名审核</h2>
		<jsp:include page="/programming/bonus/includ_gameInfo.jsp" />
		<button type="button" class="btn btn-info" οnclick="checkAll()">全选</button>
		<button type="button" class="btn btn-info" οnclick="checkNo()">取消全选</button>
		<button type="button" class="btn btn-warning" οnclick="audit()">批量审核</button>
		<form id="auditform" action="signingPlayer/audit">
			<table class="table table-striped" style="width: 70%;">
				<thead>
					<tr>
						<th style="display: none;">主键</th>
						<th style="display: none;">gameId</th>

						<td>选择</td>
						<th>用户id</th>
						<th>真实姓名</th>
						<th>性别</th>
						<th>年龄</th>
						<th>国籍</th>
						<th>支付状态</th>
						<th>审核状态</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${splist}" var="signingPlayer"
						varStatus="idxStatus">
						<tr>
							<td style="display: none;">${signingPlayer.id}</td>
							<td style="display: none;">${signingPlayer.game.id}</td>

							<c:choose>
								<c:when test="${signingPlayer.isAudit==1}">
									<td><input id="${signingPlayer.id}" name="checkbox"
										disabled="disabled" type="checkbox"
										value="${signingPlayer.id}"></td>
								</c:when>
								<c:otherwise>
									<td><input id="${signingPlayer.id}" name="checkbox"
										type="checkbox" value="${signingPlayer.id}"></td>
								</c:otherwise>
							</c:choose>

							<td>${signingPlayer.userId}</td>
							<td>${signingPlayer.name}</td>

							<c:choose>
								<c:when test="${signingPlayer.sex==1}">
									<td>男</td>
								</c:when>
								<c:otherwise>
									<td>女</td>
								</c:otherwise>
							</c:choose>

							<td>${signingPlayer.age}</td>
							<td>${signingPlayer.national.cnname}</td>

							<c:choose>
								<c:when test="${signingPlayer.isPay==1}">
									<td><span style="color: green;">已支付</span></td>
								</c:when>
								<c:otherwise>
									<td>未支付</td>
								</c:otherwise>
							</c:choose>

							<c:choose>
								<c:when test="${signingPlayer.isAudit==1}">
									<td><span style="color: green;">已通过</span></td>
								</c:when>
								<c:otherwise>
									<td>未通过</td>
								</c:otherwise>
							</c:choose>

							<c:choose>
								<c:when test="${signingPlayer.isAudit==1}">
									<td><button type="button" disabled="disabled"
											class="btn btn-warning btn-xs"
											οnclick="auditOne('${signingPlayer.id}')">通过审核</button></td>
								</c:when>
								<c:otherwise>
									<td><button type="button" class="btn btn-warning btn-xs"
											οnclick="auditOne('${signingPlayer.id}')">通过审核</button></td>
								</c:otherwise>
							</c:choose>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			<!-- 隐藏项 -->
			<input name="gameId" type="hidden" value="${gameId}" />
		</form>
	</div>

	<!-- 信息删除确认 -->
	<div class="modal fade" id="delcfmModel">
		<div class="modal-dialog">
			<div class="modal-content message_align">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">提示信息</h4>
				</div>
				<div class="modal-body">
					<p>您确认要删除吗?</p>
				</div>
				<div class="modal-footer">
					<input type="hidden" id="url" />
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<a οnclick="urlSubmit()" class="btn btn-success"
						data-dismiss="modal">确定</a>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
</body>
<script type="text/javascript">
	var checkAll = function() {
		//$("input[name='checkbox']").attr("checked",true);  坑,只能在第一次点击时候起效,attr()适合自定义属性
		/* $('input:checkbox').each(function() {
			$(this).attr('checked', true);
		}); */
		//正解,适合元素原生的属性
		$("input[name='checkbox']").prop("checked", true);
		$("input[name='checkbox'][disabled='disabled']").prop("checked", false);
	}
	var checkNo = function() {
		//$("input[name='checkbox']").removeAttr("checked"); 坑,只能在第一次点击时候起效,removeAttr()适合自定义属性
		/* $('input:checkbox').each(function() {
			$(this).attr('checked', false);
		}); */
		//正解,适合元素原生的属性
		$("input[name='checkbox']").prop('checked', false);
	}
	var audit = function() {
		$("#auditform").submit();
	}
	var auditOne = function(signingPlayerId) {
		$("input[name='checkbox']").prop('checked', false);
		$("#" + signingPlayerId).prop("checked", true);
		$("#auditform").submit();
	}
</script>
</html>

服务端:

	/**
	 * @Title:审核通过
	 * @Description:审核通过则录入到选手表
	 * @author 张颖辉
	 * @date 2017年9月22日下午7:41:23
	 */

	@Action(value = "audit", results = {
			@Result(name = "success", type = "redirect", location = "listByGameId4Audit?gameId=${gameId}") }
	 , interceptorRefs = {@InterceptorRef("loginStack") } //方法级拦截
			)
	public String audit() {
		try {
			String[] signingPlayerIds = request.getParameterValues("checkbox");
			if (signingPlayerIds != null && signingPlayerIds.length > 0) {
				playernoService.audit(signingPlayerIds, gameId);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}

		return SUCCESS;
	}

 

转载于:https://my.oschina.net/iyinghui/blog/1553759

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_33877885/article/details/91948047
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2020-03-01 22:58:35
  • 阅读 ( 799 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢