<%@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("删除失败!");
}
}
);
}
}
});
$("#popEditModalBtn").click(function(){
if($(":checkbox[name='id']:checked").size() == 0){
alert("选择要修改的数据!");
} else if($(":checkbox[name='id']:checked").size() > 1){
alert("一次只能修改一条!");
} else {
// 发送ajax get请求,提交市场活动的id,查询市场活动。
$.get(
"workbench/activity/edit.do",
{
"id" : $(":checkbox[name='id']:checked").val(),
"_" : new Date().getTime()
},
function(json){
// {"activity" : {"id":"","name":"","owner":"","startDate":"","endDate":"","cost":"","description":""} , "userList" : [{"id":"","name":""},{"id":"","name":""}]}
// 初始化下拉列表
var html = "";
$.each(json.userList , function(i , n){
html += "<option value='"+n.id+"'>"+n.name+"</option>";
});
$("#e-owner").html(html);
// 定位下拉列表的选项
$("#e-owner").val(json.activity.owner);
// 设置modal窗口中每一个文本框的值
$("#e-id").val(json.activity.id);
$("#e-name").val(json.activity.name);
$("#e-startDate").val(json.activity.startDate);
$("#e-endDate").val(json.activity.endDate);
$("#e-cost").val(json.activity.cost);
$("#e-description").val(json.activity.description);
// 显示modal窗口
$("#editActivityModal").modal("show");
}
);
}
});
$("#updateBtn").click(function(){
$.post(
"workbench/activity/update.do",
{
"id" : $.trim($("#e-id").val()),
"owner" : $.trim($("#e-owner").val()),
"name" : $.trim($("#e-name").val()),
"startDate" : $.trim($("#e-startDate").val()),
"endDate" : $.trim($("#e-endDate").val()),
"cost" : $.trim($("#e-cost").val()),
"description" : $.trim($("#e-description").val())
},
function(json){
if(json.success){
$("#editActivityModal").modal("hide");
// 分页查询
var pageNo = $("#pagination").bs_pagination('getOption', 'currentPage');
var pageSize = $("#pagination").bs_pagination('getOption', 'rowsPerPage');
display(pageNo, pageSize);
// 第一个复选框取消选中
$("#firstChk").prop("checked" , false);
}else{
alert("更新失败!");
}
}
);
});
// 给id="exportAllBtn"的按钮绑定click
$("#exportAllBtn").click(function(){
if (window.confirm("导出全部吗?")) {
window.location.href = "workbench/activity/exportAll.do";
}
});
$("#exportChkBtn").click(function(){
if($(":checkbox[name='id']:checked").size() == 0){
alert("请选择要导出的数据!");
} else {
if (window.confirm("导出吗?")) {
var sendData = "";
$.each($(":checkbox[name='id']:checked") , function(i , n){
sendData += "&id=" + n.value;
});
sendData = sendData.substr(1);
window.location.href = "workbench/activity/exportChk.do?" + sendData;
}
}
});
$("#importBtn").click(function(){
// 发送ajax post请求(异步的ajax导入。)
var formData = new FormData();
formData.append("myfile", $("#activityFile")[0].files[0]);
$.ajax({
type : "post",
url : "workbench/activity/import.do",
contentType: false, // 注意1 (默认值是:true表示application/x-www-form-urlencoded,false表示multipart/form-data)
processData: false, // 注意2 (false表示不会把对象转换成字符串,对象就按照对象的形式提交给服务器。)
data : formData, // 注意3
success : function(json){
if(json.success){
$("#importActivityModal").modal("hide");
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.do?id='+n.id+'\';">'+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">
<%-- 隐藏域中放市场活动的id --%>
<input type="hidden" id="e-id">
<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="e-owner">
</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="e-name">
</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 time" id="e-startDate">
</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 time" id="e-endDate">
</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="e-cost">
</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="e-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="updateBtn">更新</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" id="activityFile">
</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" id="importBtn">导入</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" id="popEditModalBtn"><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" id="exportChkBtn"><span class="glyphicon glyphicon-export"></span> 导出选中</button>
<button type="button" class="btn btn-default" id="exportAllBtn"><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>
一个jsp模板
最新推荐文章于 2021-02-26 08:37:57 发布