代码 ：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<%-- <%
List<Student> sList = (List<Student>)request.getAttribute("sList");
String username = (String)session.getAttribute("username");
%> --%>
<!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>Insert title here</title>
<style type="text/css">
td{
text-align: center;
}
a{
text-decoration: none;
}
.ghbs{
background-color: #F2F2F2;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#tBody>tr:even").addClass("ghbs");
$("#addBtn").click(function(){
window.location.href = "jsp/student/add.jsp";
})
$("#editBtn").click(function(){
// student/edit.do?id=${s.id}
//window.location.href = "student/edit.do?id=A0001";
//通过以上需求分析,我们这个操作和点击修改超链接是一个效果,但是点击修改超链接能够快速的取得当前记录的id
//我们使用这种形式,需要将当前需要修改记录的id取到
/*
1.将name为xz的所有复选框选中
2.基于以上选择,我们再进行筛选,筛选条件为 筛选出挑√的
3.数一下挑√的数量,我们控制在只能有一条记录
4.经过以上3个步骤,我们已经将唯一的挑√的记录选中了
5.将唯一的选中的记录的复选框中的value值取得,相当于将id取得了
6.id取得之后我们就可以执行跳转到修改页的操作了 window.location.href = "student/edit.do?id=?"
*/
var $xz = $("input[name='xz']:checked");
//我们在使用jquery对象的时候,可以当做dom对象的数组来使用
//alert($xz.length);
if($xz.length==0){
alert("请选择需要修改的记录");
}else if($xz.length>1){
alert("只能选择一条记录进行修改");
//肯定选中了一条
}else{
//将唯一的一条记录的 复选框中的value值拿到, id就拿到了
/*
针对于表单元素中value属性的存取值操作
相当于原生js中的 document.getElementById("").value
val():取值
val(值):赋值
针对于标签对中的内容的存取值操作
相当于原生js中的 document.getElementById("").innerHTML
html():取值
html(值):赋值
*/
//取值方式1
//var id = $xz.val();
//取值方式2 jquery对象转换为dom对象
/* var id = $xz[0].value;
alert(id); */
//取值方式3 dom对象 转换为jquery对象 $(dom)
var id = $($xz[0]).val();
window.location.href = "student/edit.do?id="+id;
}
})
$("#deleteBtn").click(function(){
var $xz = $("input[name='xz']:checked");
if($xz.length==0){
alert("请选择需要删除的记录");
//选中了一条或者多条记录
}else{
//alert("可以删除了");
//student/deletes.do?id=A0001&id=A0002&id=A0003
if(confirm("您确定删除所选记录吗?")){
var path = "student/deletes.do?";
for(var i=0;i<$xz.length;i++){
path += "id="+$($xz[i]).val();
if(i<$xz.length-1){
path += "&";
}
}
//alert(path);
window.location.href = path;
}
}
})
$("#qx").click(function(){
var $xz = $("input[name='xz']");
if($("#qx")[0].checked){
//alert("选中了");
for(var i=0;i<$xz.length;i++){
$xz[i].checked = true;
}
}else{
//alert("反选了");
for(var i=0;i<$xz.length;i++){
$xz[i].checked = false;
}
}
})
})
</script>
</head>
<body>
你好:${username}
<hr/>
<h3 align="center">学生信息管理系统</h3>
<table border="0" align="center" width="70%" cellpadding="6" cellspacing="0">
<tr>
<td style="text-align: left;">
<button id="addBtn">添加学员</button>
<button id="editBtn">修改学员</button>
<button id="deleteBtn">删除学员</button>
</td>
</tr>
</table>
<table border="1" align="center" width="70%" cellpadding="6" cellspacing="0">
<thead>
<tr>
<td>
<input type="checkbox" id="qx">
</td>
<td>
序号1
</td>
<td>
编号
</td>
<td>
姓名
</td>
<td>
年龄
</td>
<td>
操作
</td>
</tr>
</thead>
<tbody id="tBody">
<c:if test="${empty sList}">
<tr>
<td colspan="5">
没有相关的记录
</td>
</tr>
</c:if>
<c:if test="${!empty sList}">
<c:forEach items="${sList}" var="s" varStatus="vs">
<tr>
<td>
<input type="checkbox" name="xz" value="${s.id}">
</td>
<td>
${vs.count}
</td>
<td>
${s.id}
</td>
<td>
${s.name}
</td>
<td>
${s.age}
</td>
<td>
<a href="student/edit.do?id=${s.id}">
修改
</a>
||
<a href="student/delete.do?id=${s.id}">
删除
</a>
</td>
</tr>
</c:forEach>
</c:if>
</tbody>
</table>
</body>
</html>
这个用标签选择器
另外 一种给ajax返回绑定单击实现的 复选框全选与取消全选
<%@page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
<meta charset="UTF-8">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
<%-- pagination plugin --%>
<link href="jquery/bs_pagination/jquery.bs_pagination.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination/en.min.js"></script>
<script type="text/javascript">
$(function(){
$(".time").datetimepicker({
language: 'zh-CN',//显示中文
format: 'yyyy-mm-dd',//显示格式
minView: "month",//设置只显示到月份
initialDate: new Date(),//初始化当前日期
autoclose: true,//选中自动关闭
todayBtn: true,//显示今日按钮
clearBtn : true
});
//定制字段
$("#definedColumns > li").click(function(e) {
//防止下拉菜单消失
e.stopPropagation();
});
$("#createBtn").click(function(){
// 弹出modal窗口，但是modal窗口上需要所有者下拉列表数据。
// 发送ajax get请求，查询所有的用户tbl_user
// 重置表单
$("#activityForm")[0].reset();
$.get(
"workbench/activity/create.do",
function(json){
// [{"id":"","name":""},{"id":"","name":""},{"id":"","name":""}]
var html = "";
$.each(json , function(i , n){
// n代表的是数组中的每个元素: n.id 和 n.name
html += "<option value='"+n.id+"'>"+n.name+"</option>";
});
$("#owner").html(html);
// 设置下拉列表的value
$("#owner").val("${user.id}");
// 显示modal
$("#createActivityModal").modal("show");
}
);
});
$("#saveBtn").click(function(){
// 发送ajax post请求保存市场活动
$.post(
"workbench/activity/save.do",
{
"owner" : $.trim($("#owner").val()),
"name" : $.trim($("#name").val()),
"startDate" : $.trim($("#startDate").val()),
"endDate" : $.trim($("#endDate").val()),
"cost" : $.trim($("#cost").val()),
"description" : $.trim($("#description").val())
},
function(json){
if(json.success){
// 隐藏modal窗口
$("#createActivityModal").modal("hide");
// 显示分页查询的第一页数据
display(1, 2);
}else{
alert("保存市场活动失败");
}
}
);
});
// 页面加载完毕之后显示第一页数据
display(1, 2); // 1表示第一页，2表示每页显示2条。（页面加载完毕之后，每页显示的记录条数先给一个默认值：2）
$("#queryBtn").click(function(){
// 将页面上的四个查询条件更新到隐藏域当中
$("#h-name").val($.trim($("#p-name").val()));
$("#h-owner").val($.trim($("#p-owner").val()));
$("#h-startDate").val($.trim($("#p-startDate").val()));
$("#h-endDate").val($.trim($("#p-endDate").val()));
// 获取当前每页显示的记录条数
// var pageSize = $("#pagination").bs_pagination('getOption', 'rowsPerPage');
// display(1, pageSize);
display(1, $("#pagination").bs_pagination('getOption', 'rowsPerPage'));
});
// 全选或者取消全选
$("#firstChk").click(function(){
// $(":checkbox") // 页面中所有的复选框对象集合
// $(":checkbox[name='id']") // 页面中所有name="id"的复选框集合
$(":checkbox[name='id']").prop("checked" , this.checked); // this是dom对象，有这个checked属性。
});
// jquery是否支持同时给多个元素绑定事件呢？支持的。
// 以下代码有问题，给name="id"的复选框绑定事件的时候，复选框还不存在。无法绑定。
/*
$(":checkbox[name='id']").click(function(){
alert(1111);
});
*/
// jquery提供了一种机制，可以给页面上后期ajax动态生成的元素绑定事件
// 专门是给ajax后期动态生成的元素绑定事件：on
/*
语法：
$(父元素选择器).on("事件" , "被绑定事件的元素选择器" , callback);
on 是非常重要的知识点。jquery中的动态元素绑定事件。
*/
$("#activityTbody").on("click" , ":checkbox[name='id']" , function(){
$("#firstChk").prop("checked" , $(":checkbox[name='id']").size() == $(":checkbox[name='id']:checked").size());
});
// 尽量不要无故扩大范围，范围越大，浏览器执行效率越低。
/*
$("body").on("click" , ":checkbox[name='id']" , function(){
alert(444);
});
*/
$("#delBtn").click(function(){
if($(":checkbox[name='id']:checked").size() == 0){
alert("选择数据！");
} else {
// 提示用户是否删除
if(window.confirm("真的删除行么？")){
// 发送ajax post请求删除
var sendData = "";
$.each($(":checkbox[name='id']:checked") , function(i , n){
// n.value就是市场活动id
// n是dom对象。不是jquery对象
sendData += "&id=" + n.value;
});
sendData = sendData.substr(1);
$.post(
"workbench/activity/delete.do",
sendData,
function(json){
$("#firstChk").prop("checked" ,false);
if(json.success){
display(1, $("#pagination").bs_pagination('getOption', 'rowsPerPage'));
}else{
alert("删除失败！");
}
}
);
}
}
});
});
// 分页查询的方法
function display(pageNo , pageSize){ // pageNo页码，pageSize每页条数
$.ajax({
type : "get",
cache : false,
url : "workbench/activity/page.do",
data: {
"pageNo" : pageNo,
"pageSize" : pageSize,
/*
"name" : $.trim($("#p-name").val()),
"owner" : $.trim($("#p-owner").val()),
"startDate" : $.trim($("#p-startDate").val()),
"endDate" : $.trim($("#p-endDate").val())
*/
"name" : $.trim($("#h-name").val()),
"owner" : $.trim($("#h-owner").val()),
"startDate" : $.trim($("#h-startDate").val()),
"endDate" : $.trim($("#h-endDate").val())
},
success : function(json){
$("#firstChk").prop("checked" , false);
/*
{
"total" : 50,
"dataList" : [{"id":"","name":"","owner":"","startDate":"","endDate":""},{}]
}
*/
var html = "";
$.each(json.dataList , function(i , n){
html += '<tr>';
html += '<td><input type="checkbox" name="id" value="'+n.id+'"/></td>';
html += '<td><a style="text-decoration: none; cursor: pointer;" οnclick="window.location.href=\'workbench/activity/detail.jsp\';">'+n.name+'</a></td>';
html += '<td>'+n.owner+'</td>';
html += '<td>'+n.startDate+'</td>';
html += '<td>'+n.endDate+'</td>';
html += '</tr>';
});
$("#activityTbody").html(html);
// 这种方式依赖了代码的顺序，只要该代码顺序改变一下，则会导致绑定失败。
/*
$(":checkbox[name='id']").click(function(){
alert(222);
});
*/
// 显示翻页组件
var total = json.total;
var totalPages = (total % pageSize == 0 ? total / pageSize : parseInt(total / pageSize) + 1);
$("#pagination").bs_pagination({
currentPage: pageNo,
rowsPerPage: pageSize,
maxRowsPerPage: 50,
totalPages: totalPages,
totalRows: total,
visiblePageLinks: 3,
showGoToPage: true,
showRowsPerPage: true,
showRowsInfo: true,
onChangePage : function(event , data){
// 将隐藏域当中的条件更新到页面文本框中
$("#p-name").val($("#h-name").val());
$("#p-owner").val($("#h-owner").val());
$("#p-startDate").val($("#h-startDate").val());
$("#p-endDate").val($("#h-endDate").val());
display(data.currentPage , data.rowsPerPage);
}
});
}
});
}
</script>
</head>
<body>
<%-- 四个隐藏域来存储查询条件 --%>
<input type="hidden" id="h-name">
<input type="hidden" id="h-owner">
<input type="hidden" id="h-startDate">
<input type="hidden" id="h-endDate">
<!-- 创建市场活动的模态窗口 -->
<div class="modal fade" id="createActivityModal" role="dialog">
<div class="modal-dialog" role="document" style="width: 85%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
</div>
<div class="modal-body">
<form id="activityForm" class="form-horizontal" role="form">
<div class="form-group">
<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="owner">
</select>
</div>
<label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="name">
</div>
</div>
<div class="form-group">
<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control time" id="startDate">
</div>
<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control time" id="endDate">
</div>
</div>
<div class="form-group">
<label for="create-cost" class="col-sm-2 control-label">成本</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="cost">
</div>
</div>
<div class="form-group">
<label for="create-describe" class="col-sm-2 control-label">描述</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="description"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="saveBtn">保存</button>
</div>
</div>
</div>
</div>
<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="editActivityModal" role="dialog">
<div class="modal-dialog" role="document" style="width: 85%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="edit-marketActivityOwner">
<option>zhangsan</option>
<option>lisi</option>
<option>wangwu</option>
</select>
</div>
<label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
</div>
</div>
<div class="form-group">
<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-startTime" value="2020-10-10">
</div>
<label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-endTime" value="2020-10-20">
</div>
</div>
<div class="form-group">
<label for="edit-cost" class="col-sm-2 control-label">成本</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-cost" value="5,000">
</div>
</div>
<div class="form-group">
<label for="edit-describe" class="col-sm-2 control-label">描述</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="edit-describe">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">更新</button>
</div>
</div>
</div>
</div>
<!-- 导入市场活动的模态窗口 -->
<div class="modal fade" id="importActivityModal" role="dialog">
<div class="modal-dialog" role="document" style="width: 85%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
</div>
<div class="modal-body" style="height: 350px;">
<div style="position: relative;top: 20px; left: 50px;">
请选择要上传的文件：<small style="color: gray;">[仅支持.xls或.xlsx格式]</small>
</div>
<div style="position: relative;top: 40px; left: 50px;">
<input type="file">
</div>
<div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
<h3>重要提示</h3>
<ul>
<li>给定文件的第一行将视为字段名。</li>
<li>请确认您的文件大小不超过5MB。</li>
<li>从XLS/XLSX文件中导入全部重复记录之前都会被忽略。</li>
<li>复选框值应该是1或者0。</li>
<li>日期值必须为MM/dd/yyyy格式。任何其它格式的日期都将被忽略。</li>
<li>日期时间必须符合MM/dd/yyyy hh:mm:ss的格式，其它格式的日期时间将被忽略。</li>
<li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
<li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
</ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">导入</button>
</div>
</div>
</div>
</div>
<div>
<div style="position: relative; left: 10px; top: -10px;">
<div class="page-header">
<h3>市场活动列表</h3>
</div>
</div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
<div class="btn-toolbar" role="toolbar" style="height: 80px;">
<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">名称</div>
<input class="form-control" type="text" id="p-name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">所有者</div>
<input class="form-control" type="text" id="p-owner">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">开始日期</div>
<input class="form-control time" type="text" id="p-startDate" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">结束日期</div>
<input class="form-control time" type="text" id="p-endDate">
</div>
</div>
<%-- 一定要将submit修改为button --%>
<button type="button" class="btn btn-default" id="queryBtn">查询</button>
</form>
</div>
<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
<div class="btn-group" style="position: relative; top: 18%;">
<button type="button" class="btn btn-primary" id="createBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#editActivityModal"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
<button type="button" class="btn btn-danger" id="delBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
</div>
<div class="btn-group" style="position: relative; top: 18%;">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal"><span class="glyphicon glyphicon-import"></span> 导入</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 导出</button>
</div>
</div>
<div style="position: relative;top: 10px;">
<table class="table table-hover">
<thead>
<tr style="color: #B3B3B3;">
<td><input type="checkbox" id="firstChk"/></td>
<td>名称</td>
<td>所有者</td>
<td>开始日期</td>
<td>结束日期</td>
</tr>
</thead>
<tbody id="activityTbody">
<%--
<tr class="active">
<td><input type="checkbox" /></td>
<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='workbench/activity/detail.jsp';">发传单</a></td>
<td>zhangsan</td>
<td>2020-10-10</td>
<td>2020-10-20</td>
</tr>
<tr class="active">
<td><input type="checkbox" /></td>
<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='workbench/activity/detail.jsp';">发传单</a></td>
<td>zhangsan</td>
<td>2020-10-10</td>
<td>2020-10-20</td>
</tr>
--%>
</tbody>
</table>
</div>
<%-- 翻页组件 --%>
<div id="pagination"></div>
</div>
</div>
</body>
</html>
246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
