一、分页查询市场活动流程图
1.mapper层
package com.bjpowernode.crm.workbench.mapper;
import com.bjpowernode.crm.workbench.domain.Activity;
import java.util.List;
import java.util.Map;
public interface ActivityMapper {
/**
* This method was generated by MyBatis Generator.
* This method corresponds to the database table tbl_activity
*
* @mbggenerated Thu Sep 15 22:05:10 CST 2022
*/
int deleteByPrimaryKey(String id);
/**
* This method was generated by MyBatis Generator.
* This method corresponds to the database table tbl_activity
*
* @mbggenerated Thu Sep 15 22:05:10 CST 2022
*/
int insertSelective(Activity record);
/**
* This method was generated by MyBatis Generator.
* This method corresponds to the database table tbl_activity
*
* @mbggenerated Thu Sep 15 22:05:10 CST 2022
*/
Activity selectByPrimaryKey(String id);
/**
* This method was generated by MyBatis Generator.
* This method corresponds to the database table tbl_activity
*
* @mbggenerated Thu Sep 15 22:05:10 CST 2022
*/
int updateByPrimaryKeySelective(Activity record);
/**
* This method was generated by MyBatis Generator.
* This method corresponds to the database table tbl_activity
*
* @mbggenerated Thu Sep 15 22:05:10 CST 2022
*/
int updateByPrimaryKey(Activity record);
/**
保存创建的市场活动
*/
int insertActivity(Activity activity);
/**
* 根据条件分页查询市场活动的列表
* @param map
* @return
*/
List<Activity> selectActivityByConditionForPage(Map<String,Object> map);
/**
* 根据条件查询市场活动的总条数
* @param map
* @return
*/
int selectCountOfActivityByCondition(Map<String,Object> map);
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.bjpowernode.crm.workbench.mapper.ActivityMapper" >
<resultMap id="BaseResultMap" type="com.bjpowernode.crm.workbench.domain.Activity" >
<!--
WARNING - @mbggenerated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Thu Sep 15 22:05:10 CST 2022.
-->
<id column="id" property="id" jdbcType="CHAR" />
<result column="owner" property="owner" jdbcType="CHAR" />
<result column="name" property="name" jdbcType="VARCHAR" />
<result column="start_date" property="startDate" jdbcType="CHAR" />
<result column="end_date" property="endDate" jdbcType="CHAR" />
<result column="cost" property="cost" jdbcType="VARCHAR" />
<result column="description" property="description" jdbcType="VARCHAR" />
<result column="create_time" property="createTime" jdbcType="CHAR" />
<result column="create_by" property="createBy" jdbcType="VARCHAR" />
<result column="edit_time" property="editTime" jdbcType="CHAR" />
<result column="edit_by" property="editBy" jdbcType="VARCHAR" />
</resultMap>
<sql id="Base_Column_List" >
<!--
WARNING - @mbggenerated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Thu Sep 15 22:05:10 CST 2022.
-->
id, owner, name, start_date, end_date, cost, description, create_time, create_by,
edit_time, edit_by
</sql>
<select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.String" >
<!--
WARNING - @mbggenerated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Thu Sep 15 22:05:10 CST 2022.
-->
select
<include refid="Base_Column_List" />
from tbl_activity
where id = #{id,jdbcType=CHAR}
</select>
<delete id="deleteByPrimaryKey" parameterType="java.lang.String" >
<!--
WARNING - @mbggenerated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Thu Sep 15 22:05:10 CST 2022.
-->
delete from tbl_activity
where id = #{id,jdbcType=CHAR}
</delete>
<insert id="insertActivity" parameterType="com.bjpowernode.crm.workbench.domain.Activity" >
<!--
WARNING - @mbggenerated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Thu Sep 15 22:05:10 CST 2022.
-->
insert into tbl_activity (id, owner, name, start_date,
end_date, cost, description,
create_time, create_by)
values (#{id,jdbcType=CHAR}, #{owner,jdbcType=CHAR}, #{name,jdbcType=VARCHAR}, #{startDate,jdbcType=CHAR},
#{endDate,jdbcType=CHAR}, #{cost,jdbcType=VARCHAR}, #{description,jdbcType=VARCHAR},
#{createTime,jdbcType=CHAR}, #{createBy,jdbcType=VARCHAR})
</insert>
<insert id="insert" parameterType="com.bjpowernode.crm.workbench.domain.Activity" >
<!--
WARNING - @mbggenerated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Thu Sep 15 22:05:10 CST 2022.
-->
insert into tbl_activity
<trim prefix="(" suffix=")" suffixOverrides="," >
<if test="id != null" >
id,
</if>
<if test="owner != null" >
owner,
</if>
<if test="name != null" >
name,
</if>
<if test="startDate != null" >
start_date,
</if>
<if test="endDate != null" >
end_date,
</if>
<if test="cost != null" >
cost,
</if>
<if test="description != null" >
description,
</if>
<if test="createTime != null" >
create_time,
</if>
<if test="createBy != null" >
create_by,
</if>
<if test="editTime != null" >
edit_time,
</if>
<if test="editBy != null" >
edit_by,
</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides="," >
<if test="id != null" >
#{id,jdbcType=CHAR},
</if>
<if test="owner != null" >
#{owner,jdbcType=CHAR},
</if>
<if test="name != null" >
#{name,jdbcType=VARCHAR},
</if>
<if test="startDate != null" >
#{startDate,jdbcType=CHAR},
</if>
<if test="endDate != null" >
#{endDate,jdbcType=CHAR},
</if>
<if test="cost != null" >
#{cost,jdbcType=VARCHAR},
</if>
<if test="description != null" >
#{description,jdbcType=VARCHAR},
</if>
<if test="createTime != null" >
#{createTime,jdbcType=CHAR},
</if>
<if test="createBy != null" >
#{createBy,jdbcType=VARCHAR},
</if>
<if test="editTime != null" >
#{editTime,jdbcType=CHAR},
</if>
<if test="editBy != null" >
#{editBy,jdbcType=VARCHAR},
</if>
</trim>
</insert>
<update id="updateByPrimaryKeySelective" parameterType="com.bjpowernode.crm.workbench.domain.Activity" >
<!--
WARNING - @mbggenerated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Thu Sep 15 22:05:10 CST 2022.
-->
update tbl_activity
<set >
<if test="owner != null" >
owner = #{owner,jdbcType=CHAR},
</if>
<if test="name != null" >
name = #{name,jdbcType=VARCHAR},
</if>
<if test="startDate != null" >
start_date = #{startDate,jdbcType=CHAR},
</if>
<if test="endDate != null" >
end_date = #{endDate,jdbcType=CHAR},
</if>
<if test="cost != null" >
cost = #{cost,jdbcType=VARCHAR},
</if>
<if test="description != null" >
description = #{description,jdbcType=VARCHAR},
</if>
<if test="createTime != null" >
create_time = #{createTime,jdbcType=CHAR},
</if>
<if test="createBy != null" >
create_by = #{createBy,jdbcType=VARCHAR},
</if>
<if test="editTime != null" >
edit_time = #{editTime,jdbcType=CHAR},
</if>
<if test="editBy != null" >
edit_by = #{editBy,jdbcType=VARCHAR},
</if>
</set>
where id = #{id,jdbcType=CHAR}
</update>
<update id="updateByPrimaryKey" parameterType="com.bjpowernode.crm.workbench.domain.Activity" >
<!--
WARNING - @mbggenerated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Thu Sep 15 22:05:10 CST 2022.
-->
update tbl_activity
set owner = #{owner,jdbcType=CHAR},
name = #{name,jdbcType=VARCHAR},
start_date = #{startDate,jdbcType=CHAR},
end_date = #{endDate,jdbcType=CHAR},
cost = #{cost,jdbcType=VARCHAR},
description = #{description,jdbcType=VARCHAR},
create_time = #{createTime,jdbcType=CHAR},
create_by = #{createBy,jdbcType=VARCHAR},
edit_time = #{editTime,jdbcType=CHAR},
edit_by = #{editBy,jdbcType=VARCHAR}
where id = #{id,jdbcType=CHAR}
</update>
<select id="selectActivityByConditionForPage" parameterType="map" resultMap="BaseResultMap">
select a.id,u1.name as owner,a.name,a.start_date,a.end_date,a.cost,a.description,a.create_time,
u2.name as create_by,a.edit_time,u3.name as edit_by
from tbl_activity a
join tbl_user u1 on a.owner=u1.id
join tbl_user u2 on a.create_by=u2.id
left join tbl_user u3 on a.edit_by=u3.id
<where>
<if test="name!=null and name!=''">
and a.name like '%' #{name} '%'
</if>
<if test="owner!=null and owner!=''">
and u1.name like '%' #{owner} '%'
</if>
<if test="startDate!=null and startDate!=''">
and a.start_date>=#{startDate}
</if>
<if test="endDate!=null and endDate!=''">
and a.end_date<=#{endDate}
</if>
</where>
order by a.create_time desc
limit #{beginNo},#{pageSize}
</select>
<select id="selectCountOfActivityByCondition" parameterType="map" resultType="int">
select count(*)
from tbl_activity a
join tbl_user u1 on a.owner=u1.id
join tbl_user u2 on a.create_by=u2.id
left join tbl_user u3 on a.edit_by=u3.id
<where>
<if test="name!=null and name!=''">
and a.name like '%' #{name} '%'
</if>
<if test="owner!=null and owner!=''">
and u1.name like '%' #{owner} '%'
</if>
<if test="startDate!=null and startDate!=''">
and a.start_date>=#{startDate}
</if>
<if test="endDate!=null and endDate!=''">
and a.end_date<=#{endDate}
</if>
</where>
</select>
</mapper>
2.service层
public interface ActivityService {
int saveCreateActivity(Activity activity);
List<Activity> queryActivityByConditionForPage(Map<String,Object> map);
int queryCountOfActivityByCondition(Map<String,Object>map);
}
@Service("activityService")
public class ActivityServiceImpl implements ActivityService {
@Autowired
private ActivityMapper activityMapper;
@Override
public int saveCreateActivity(Activity activity) {
return activityMapper.insertActivity(activity);
}
@Override
public List<Activity> queryActivityByConditionForPage(Map<String, Object> map) {
return activityMapper.selectActivityByConditionForPage(map);
}
@Override
public int queryCountOfActivityByCondition(Map<String, Object> map) {
return activityMapper.selectCountOfActivityByCondition(map);
}
}
3.controller层
@Controller
public class ActivityController {
@Autowired
private UserService userService;
@Autowired
private ActivityService activityService;
@RequestMapping("/workbench/activity/index.do")
public String index(HttpServletRequest request){
//调用service方法,查询所有的用户
List<User> userList=userService.queryAllUsers();
//把数据保存到request中
request.setAttribute("userList",userList);
//请求转发到市场活动的主页面
return "workbench/activity/index";
}
@RequestMapping("/workbench/activity/saveCreateActivity.do")
@ResponseBody
public Object saveCreateActivity(Activity activity, HttpSession session){
User user=(User) session.getAttribute(Contants.SESSION_USER);
//封装参数
activity.setId(UUIDUtils.getUUID());
activity.setCreateTime(DateUtils.formateDateTime(new Date()));
activity.setCreateBy(user.getId());
ReturnObject returnObject = new ReturnObject();
try{
int ret=activityService.saveCreateActivity(activity);
if(ret>0){
returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
}else {
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage("系统忙,请稍后重试...");
}
}catch (Exception e){
e.printStackTrace();
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage("系统忙,请稍后重试...");
}
//调用service层方法,保存创建的市场活动
return returnObject;
}
@RequestMapping("/workbench/activity/queryActivityByConditionForPage.do")
@ResponseBody
public Object queryActivityByConditionForPage(String name,String owner,String startDate,String endDate,
int pageNo,int pageSize){
//封装参数
Map<String,Object> map=new HashMap<>();
map.put("name",name);
map.put("owner",owner);
map.put("startDate",startDate);
map.put("endDate",endDate);
map.put("beginNo",(pageNo-1)*pageSize);
map.put("pageSize",pageSize);
//调用service层方法,查询数据
List<Activity> activityList=activityService.queryActivityByConditionForPage(map);
int totalRows=activityService.queryCountOfActivityByCondition(map);
//根据查询结果结果,生成响应信息
Map<String,Object> retMap=new HashMap<>();
retMap.put("activityList",activityList);
retMap.put("totalRows",totalRows);
return retMap;
}
}
4.前端页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
<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>
<script type="text/javascript">
$(function(){
//给"创建"按钮添加单击事件
$("#createActivityBtn").click(function () {
//初始化工作
//重置表单
$("#createActivityForm").get(0).reset();
//弹出创建市场活动的模态窗口
$("#createActivityModal").modal("show");
});
//给"保存"按钮添加单击事件
$("#saveCreateActivityBtn").click(function () {
//收集参数
var owner=$("#create-marketActivityOwner").val();
var name=$.trim($("#create-marketActivityName").val());
var startDate=$("#create-startDate").val();
var endDate=$("#create-endDate").val();
var cost=$.trim($("#create-cost").val());
var description=$.trim($("#create-description").val());
//表单验证
if(owner==""){
alert("所有者不能为空");
return;
}
if(name==""){
alert("名称不能为空");
return;
}
if(startDate!=""&&endDate!=""){
//使用字符串的大小代替日期的大小
if(endDate<startDate){
alert("结束日期不能比开始日期小");
return;
}
}
/*
正则表达式:
1,语言,语法:定义字符串的匹配模式,可以用来判断指定的具体字符串是否符合匹配模式。
2,语法通则:
1)//:在js中定义一个正则表达式. var regExp=/...../;
2)^:匹配字符串的开头位置
$: 匹配字符串的结尾
3)[]:匹配指定字符集中的一位字符。 var regExp=/^[abc]$/;
var regExp=/^[a-z0-9]$/;
4){}:匹配次数.var regExp=/^[abc]{5}$/;
{m}:匹配m此
{m,n}:匹配m次到n次
{m,}:匹配m次或者更多次
5)特殊符号:
\d:匹配一位数字,相当于[0-9]
\D:匹配一位非数字
\w:匹配所有字符,包括字母、数字、下划线。
\W:匹配非字符,除了字母、数字、下划线之外的字符。
*:匹配0次或者多次,相当于{0,}
+:匹配1次或者多次,相当于{1,}
?:匹配0次或者1次,相当于{0,1}
*/
var regExp=/^(([1-9]\d*)|0)$/;
if(!regExp.test(cost)){
alert("成本只能为非负整数");
return;
}
//发送请求
$.ajax({
url:'workbench/activity/saveCreateActivity.do',
data:{
owner:owner,
name:name,
startDate:startDate,
endDate:endDate,
cost:cost,
description:description
},
type:'post',
dataType:'json',
success:function (data) {
if(data.code=="1"){
//关闭模态窗口
$("#createActivityModal").modal("hide");
//刷新市场活动列,显示第一页数据,保持每页显示条数不变(保留)
}else{
//提示信息
alert(data.message);
//模态窗口不关闭
$("#createActivityModal").modal("show");//可以不写。
}
}
});
});
//当容器加载完成之后,对容器调用工具函数
//$("input[name='mydate']").datetimepicker({
$(".mydate").datetimepicker({
language:'zh-CN', //语言
format:'yyyy-mm-dd',//日期的格式
minView:'month', //可以选择的最小视图
initialDate:new Date(),//初始化显示的日期
autoclose:true,//设置选择完日期或者时间之后,日否自动关闭日历
todayBtn:true,//设置是否显示"今天"按钮,默认是false
clearBtn:true//设置是否显示"清空"按钮,默认是false
});
//当市场活动主页面加载完成,查询所有数据的第一页以及所有数据的总条数,默认每页显示10条
queryActivityByConditionForPage();
//给"查询"按钮添加单击事件
$("#queryActivityBtn").click(function () {
//查询所有符合条件数据的第一页以及所有符合条件数据的总条数;
queryActivityByConditionForPage();
});
});
function queryActivityByConditionForPage() {
//收集参数
var name=$("#query-name").val();
var owner=$("#query-owner").val();
var startDate=$("#query-startDate").val();
var endDate=$("#query-endDate").val();
var pageNo=1;
var pageSize=10;
//发送请求
$.ajax({
url:'workbench/activity/queryActivityByConditionForPage.do',
data:{
name:name,
owner:owner,
startDate:startDate,
endDate:endDate,
pageNo:pageNo,
pageSize:pageSize
},
type:'post',
dataType:'json',
success:function (data) {
//显示总条数
$("#totalRowsB").text(data.totalRows);
//显示市场活动的列表
//遍历activityList,拼接所有行数据
var htmlStr="";
$.each(data.activityList,function (index,obj) {
htmlStr+="<tr class=\"active\">";
htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";
htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">"+obj.name+"</a></td>";
htmlStr+="<td>"+obj.owner+"</td>";
htmlStr+="<td>"+obj.startDate+"</td>";
htmlStr+="<td>"+obj.endDate+"</td>";
htmlStr+="</tr>";
});
$("#tBody").html(htmlStr);
}
});
}
</script>
</head>
<body>
<!-- 创建市场活动的模态窗口 -->
<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="createActivityForm" 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="create-marketActivityOwner">
<c:forEach items="${userList}" var="u">
<option value="${u.id}">${u.name}</option>
</c:forEach>
</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="create-marketActivityName">
</div>
</div>
<div class="form-group">
<label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control mydate" name="mydate" id="create-startDate" readonly>
</div>
<label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control mydate" name="mydate" id="create-endDate" readonly>
</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="create-cost">
</div>
</div>
<div class="form-group">
<label for="create-description" class="col-sm-2 control-label">描述</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="create-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="saveCreateActivityBtn">保存</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">
<c:forEach items="${userList}" var="u">
<option value="${u.id}">${u.name}</option>
</c:forEach>
</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]</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>操作仅针对Excel,仅支持后缀名为XLS的文件。</li>
<li>给定文件的第一行将视为字段名。</li>
<li>请确认您的文件大小不超过5MB。</li>
<li>日期值以文本形式保存,必须符合yyyy-MM-dd格式。</li>
<li>日期时间以文本形式保存,必须符合yyyy-MM-dd 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 id="importActivityBtn" type="button" class="btn btn-primary">导入</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="query-name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">所有者</div>
<input class="form-control" type="text" id="query-owner">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">开始日期</div>
<input class="form-control" type="text" id="query-startDate" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">结束日期</div>
<input class="form-control" type="text" id="query-endDate">
</div>
</div>
<button type="button" class="btn btn-default" id="queryActivityBtn">查询</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="createActivityBtn"><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"><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 id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据(批量导出)</button>
<button id="exportActivityXzBtn" 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" /></td>
<td>名称</td>
<td>所有者</td>
<td>开始日期</td>
<td>结束日期</td>
</tr>
</thead>
<tbody id="tBody">
<%--<tr class="active">
<td><input type="checkbox" /></td>
<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</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='detail.html';">发传单</a></td>
<td>zhangsan</td>
<td>2020-10-10</td>
<td>2020-10-20</td>
</tr>--%>
</tbody>
</table>
</div>
<div style="height: 50px; position: relative;top: 30px;">
<div>
<button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalRowsB">50</b>条记录</button>
</div>
<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
10
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">20</a></li>
<li><a href="#">30</a></li>
</ul>
</div>
<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
</div>
<div style="position: relative;top: -88px; left: 285px;">
<nav>
<ul class="pagination">
<li class="disabled"><a href="#">首页</a></li>
<li class="disabled"><a href="#">上一页</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li class="disabled"><a href="#">末页</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</body>
</html>
二、实现翻页功能
1.前端插件的使用步骤
1)引入开发包
2)创建容器:
3)当容器加载完之后,对容器调用工具函数
2.js的系统函数
1.eval()
var srt = “var a=100”;
eval(str);
alert(a);
2.演示分页查询市场活动的过程:
1,queryActivityByConditionForPage(1,10)
|->把pageNo,pageSize和查询条件一起发送到后台,查询数据
|->data
|->activityList:遍历list,显示列表
|->totalRows:调用工具函数,显示翻页信息
2,当用户切换页号或者每页显示条数时:pageNo,pageSize
|->翻页信息会自动变化
|->手动刷新列表:
|->把pageNo,pageSize和查询条件一起发送到后台,查询数据
|->data
|->activityList:遍历list,显示列表
|->totalRows:调用工具函数,显示翻页信息
3.修改activity下的index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
<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>
<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
<script type="text/javascript">
$(function(){
//给"创建"按钮添加单击事件
$("#createActivityBtn").click(function () {
//初始化工作
//重置表单
$("#createActivityForm").get(0).reset();
//弹出创建市场活动的模态窗口
$("#createActivityModal").modal("show");
});
//给"保存"按钮添加单击事件
$("#saveCreateActivityBtn").click(function () {
//收集参数
var owner=$("#create-marketActivityOwner").val();
var name=$.trim($("#create-marketActivityName").val());
var startDate=$("#create-startDate").val();
var endDate=$("#create-endDate").val();
var cost=$.trim($("#create-cost").val());
var description=$.trim($("#create-description").val());
//表单验证
if(owner==""){
alert("所有者不能为空");
return;
}
if(name==""){
alert("名称不能为空");
return;
}
if(startDate!=""&&endDate!=""){
//使用字符串的大小代替日期的大小
if(endDate<startDate){
alert("结束日期不能比开始日期小");
return;
}
}
/*
正则表达式:
1,语言,语法:定义字符串的匹配模式,可以用来判断指定的具体字符串是否符合匹配模式。
2,语法通则:
1)//:在js中定义一个正则表达式. var regExp=/...../;
2)^:匹配字符串的开头位置
$: 匹配字符串的结尾
3)[]:匹配指定字符集中的一位字符。 var regExp=/^[abc]$/;
var regExp=/^[a-z0-9]$/;
4){}:匹配次数.var regExp=/^[abc]{5}$/;
{m}:匹配m此
{m,n}:匹配m次到n次
{m,}:匹配m次或者更多次
5)特殊符号:
\d:匹配一位数字,相当于[0-9]
\D:匹配一位非数字
\w:匹配所有字符,包括字母、数字、下划线。
\W:匹配非字符,除了字母、数字、下划线之外的字符。
*:匹配0次或者多次,相当于{0,}
+:匹配1次或者多次,相当于{1,}
?:匹配0次或者1次,相当于{0,1}
*/
var regExp=/^(([1-9]\d*)|0)$/;
if(!regExp.test(cost)){
alert("成本只能为非负整数");
return;
}
//发送请求
$.ajax({
url:'workbench/activity/saveCreateActivity.do',
data:{
owner:owner,
name:name,
startDate:startDate,
endDate:endDate,
cost:cost,
description:description
},
type:'post',
dataType:'json',
success:function (data) {
if(data.code=="1"){
//关闭模态窗口
$("#createActivityModal").modal("hide");
//刷新市场活动列,显示第一页数据,保持每页显示条数不变
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
}else{
//提示信息
alert(data.message);
//模态窗口不关闭
$("#createActivityModal").modal("show");//可以不写。
}
}
});
});
//当容器加载完成之后,对容器调用工具函数
//$("input[name='mydate']").datetimepicker({
$(".mydate").datetimepicker({
language:'zh-CN', //语言
format:'yyyy-mm-dd',//日期的格式
minView:'month', //可以选择的最小视图
initialDate:new Date(),//初始化显示的日期
autoclose:true,//设置选择完日期或者时间之后,日否自动关闭日历
todayBtn:true,//设置是否显示"今天"按钮,默认是false
clearBtn:true//设置是否显示"清空"按钮,默认是false
});
//当市场活动主页面加载完成,查询所有数据的第一页以及所有数据的总条数,默认每页显示10条
queryActivityByConditionForPage(1,10);
//给"查询"按钮添加单击事件
$("#queryActivityBtn").click(function () {
//查询所有符合条件数据的第一页以及所有符合条件数据的总条数;
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
});
});
function queryActivityByConditionForPage(pageNo,pageSize) {
//收集参数
var name=$("#query-name").val();
var owner=$("#query-owner").val();
var startDate=$("#query-startDate").val();
var endDate=$("#query-endDate").val();
//var pageNo=1;
//var pageSize=10;
//发送请求
$.ajax({
url:'workbench/activity/queryActivityByConditionForPage.do',
data:{
name:name,
owner:owner,
startDate:startDate,
endDate:endDate,
pageNo:pageNo,
pageSize:pageSize
},
type:'post',
dataType:'json',
success:function (data) {
//显示总条数
//$("#totalRowsB").text(data.totalRows);
//显示市场活动的列表
//遍历activityList,拼接所有行数据
var htmlStr="";
$.each(data.activityList,function (index,obj) {
htmlStr+="<tr class=\"active\">";
htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";
htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">"+obj.name+"</a></td>";
htmlStr+="<td>"+obj.owner+"</td>";
htmlStr+="<td>"+obj.startDate+"</td>";
htmlStr+="<td>"+obj.endDate+"</td>";
htmlStr+="</tr>";
});
$("#tBody").html(htmlStr);
//计算总页数
var totalPages=1;
if(data.totalRows%pageSize==0){
totalPages=data.totalRows/pageSize;
}else{
totalPages=parseInt(data.totalRows/pageSize)+1;
}
//对容器调用bs_pagination工具函数,显示翻页信息
$("#demo_pag1").bs_pagination({
currentPage:pageNo,//当前页号,相当于pageNo
rowsPerPage:pageSize,//每页显示条数,相当于pageSize
totalRows:data.totalRows,//总条数
totalPages: totalPages, //总页数,必填参数.
visiblePageLinks:5,//最多可以显示的卡片数
showGoToPage:true,//是否显示"跳转到"部分,默认true--显示
showRowsPerPage:true,//是否显示"每页显示条数"部分。默认true--显示
showRowsInfo:true,//是否显示记录的信息,默认true--显示
//用户每次切换页号,都自动触发本函数;
//每次返回切换页号之后的pageNo和pageSize
onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked
//js代码
//alert(pageObj.currentPage);
//alert(pageObj.rowsPerPage);
queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
}
});
}
});
}
</script>
</head>
<body>
<!-- 创建市场活动的模态窗口 -->
<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="createActivityForm" 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="create-marketActivityOwner">
<c:forEach items="${userList}" var="u">
<option value="${u.id}">${u.name}</option>
</c:forEach>
</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="create-marketActivityName">
</div>
</div>
<div class="form-group">
<label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control mydate" name="mydate" id="create-startDate" readonly>
</div>
<label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control mydate" name="mydate" id="create-endDate" readonly>
</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="create-cost">
</div>
</div>
<div class="form-group">
<label for="create-description" class="col-sm-2 control-label">描述</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="create-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="saveCreateActivityBtn">保存</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">
<c:forEach items="${userList}" var="u">
<option value="${u.id}">${u.name}</option>
</c:forEach>
</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]</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>操作仅针对Excel,仅支持后缀名为XLS的文件。</li>
<li>给定文件的第一行将视为字段名。</li>
<li>请确认您的文件大小不超过5MB。</li>
<li>日期值以文本形式保存,必须符合yyyy-MM-dd格式。</li>
<li>日期时间以文本形式保存,必须符合yyyy-MM-dd 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 id="importActivityBtn" type="button" class="btn btn-primary">导入</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="query-name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">所有者</div>
<input class="form-control" type="text" id="query-owner">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">开始日期</div>
<input class="form-control" type="text" id="query-startDate" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">结束日期</div>
<input class="form-control" type="text" id="query-endDate">
</div>
</div>
<button type="button" class="btn btn-default" id="queryActivityBtn">查询</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="createActivityBtn"><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"><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 id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据(批量导出)</button>
<button id="exportActivityXzBtn" 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="chckAll"/></td>
<td>名称</td>
<td>所有者</td>
<td>开始日期</td>
<td>结束日期</td>
</tr>
</thead>
<tbody id="tBody">
<%--<tr class="active">
<td><input type="checkbox" /></td>
<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</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='detail.html';">发传单</a></td>
<td>zhangsan</td>
<td>2020-10-10</td>
<td>2020-10-20</td>
</tr>--%>
</tbody>
</table>
<div id="demo_pag1"></div>
</div>
<%--<div style="height: 50px; position: relative;top: 30px;">
<div>
<button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalRowsB">50</b>条记录</button>
</div>
<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
10
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">20</a></li>
<li><a href="#">30</a></li>
</ul>
</div>
<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
</div>
<div style="position: relative;top: -88px; left: 285px;">
<nav>
<ul class="pagination">
<li class="disabled"><a href="#">首页</a></li>
<li class="disabled"><a href="#">上一页</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li class="disabled"><a href="#">末页</a></li>
</ul>
</nav>
</div>
</div>--%>
</div>
</div>
</body>
</html>
三、删除市场活动流程图
1.前端全选和取消全选
1,在页面中给元素添加事件语法: 1)使用元素的事件属性:onxxxx=”f()” 2)使用jquery对象:选择器.xxxx(function(){ //js代码 //this }); *只能给固有元素添加事件 固有元素:当调用事件函数给元素添加事件时,如果元素已经生成,则这些元素叫做固有元素; 动态生成的元素:当调用事件函数给元素添加事件时,如果元素还没有生成,后来生成的元素叫做动态生成的元素。 3)使用jquery的on函数:父选择器.on(“事件类型”,子选择器,function(){ //js代码 //this });
父元素:必须是固有元素,可以直接父元素,也可以是间接父元素. 原则固有父元素范围越小越好. 事件类型:跟事件属性和事件函数一一对应。 子选择器:目标元素,跟父选择器构成一个父子选择器 *不但能给固有元素添加事件,还能够给动态生成的元素添加事件。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
<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>
<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
<script type="text/javascript">
$(function(){
//给"创建"按钮添加单击事件
$("#createActivityBtn").click(function () {
//初始化工作
//重置表单
$("#createActivityForm").get(0).reset();
//弹出创建市场活动的模态窗口
$("#createActivityModal").modal("show");
});
//给"保存"按钮添加单击事件
$("#saveCreateActivityBtn").click(function () {
//收集参数
var owner=$("#create-marketActivityOwner").val();
var name=$.trim($("#create-marketActivityName").val());
var startDate=$("#create-startDate").val();
var endDate=$("#create-endDate").val();
var cost=$.trim($("#create-cost").val());
var description=$.trim($("#create-description").val());
//表单验证
if(owner==""){
alert("所有者不能为空");
return;
}
if(name==""){
alert("名称不能为空");
return;
}
if(startDate!=""&&endDate!=""){
//使用字符串的大小代替日期的大小
if(endDate<startDate){
alert("结束日期不能比开始日期小");
return;
}
}
/*
正则表达式:
1,语言,语法:定义字符串的匹配模式,可以用来判断指定的具体字符串是否符合匹配模式。
2,语法通则:
1)//:在js中定义一个正则表达式. var regExp=/...../;
2)^:匹配字符串的开头位置
$: 匹配字符串的结尾
3)[]:匹配指定字符集中的一位字符。 var regExp=/^[abc]$/;
var regExp=/^[a-z0-9]$/;
4){}:匹配次数.var regExp=/^[abc]{5}$/;
{m}:匹配m此
{m,n}:匹配m次到n次
{m,}:匹配m次或者更多次
5)特殊符号:
\d:匹配一位数字,相当于[0-9]
\D:匹配一位非数字
\w:匹配所有字符,包括字母、数字、下划线。
\W:匹配非字符,除了字母、数字、下划线之外的字符。
*:匹配0次或者多次,相当于{0,}
+:匹配1次或者多次,相当于{1,}
?:匹配0次或者1次,相当于{0,1}
*/
var regExp=/^(([1-9]\d*)|0)$/;
if(!regExp.test(cost)){
alert("成本只能为非负整数");
return;
}
//发送请求
$.ajax({
url:'workbench/activity/saveCreateActivity.do',
data:{
owner:owner,
name:name,
startDate:startDate,
endDate:endDate,
cost:cost,
description:description
},
type:'post',
dataType:'json',
success:function (data) {
if(data.code=="1"){
//关闭模态窗口
$("#createActivityModal").modal("hide");
//刷新市场活动列,显示第一页数据,保持每页显示条数不变
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
}else{
//提示信息
alert(data.message);
//模态窗口不关闭
$("#createActivityModal").modal("show");//可以不写。
}
}
});
});
//当容器加载完成之后,对容器调用工具函数
//$("input[name='mydate']").datetimepicker({
$(".mydate").datetimepicker({
language:'zh-CN', //语言
format:'yyyy-mm-dd',//日期的格式
minView:'month', //可以选择的最小视图
initialDate:new Date(),//初始化显示的日期
autoclose:true,//设置选择完日期或者时间之后,日否自动关闭日历
todayBtn:true,//设置是否显示"今天"按钮,默认是false
clearBtn:true//设置是否显示"清空"按钮,默认是false
});
//当市场活动主页面加载完成,查询所有数据的第一页以及所有数据的总条数,默认每页显示10条
queryActivityByConditionForPage(1,10);
//给"查询"按钮添加单击事件
$("#queryActivityBtn").click(function () {
//查询所有符合条件数据的第一页以及所有符合条件数据的总条数;
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
});
//给"全选"按钮添加单击事件
$("#chckAll").click(function () {
//如果"全选"按钮是选中状态,则列表中所有checkbox都选中
/*if(this.checked==true){
$("#tBody input[type='checkbox']").prop("checked",true);
}else{
$("#tBody input[type='checkbox']").prop("checked",false);
}*/
$("#tBody input[type='checkbox']").prop("checked",this.checked);
});
/*$("#tBody input[type='checkbox']").click(function () {
//如果列表中的所有checkbox都选中,则"全选"按钮也选中
if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
$("#chckAll").prop("checked",true);
}else{//如果列表中的所有checkbox至少有一个没选中,则"全选"按钮也取消
$("#chckAll").prop("checked",false);
}
});*/
$("#tBody").on("click","input[type='checkbox']",function () {
//如果列表中的所有checkbox都选中,则"全选"按钮也选中
if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
$("#chckAll").prop("checked",true);
}else{//如果列表中的所有checkbox至少有一个没选中,则"全选"按钮也取消
$("#chckAll").prop("checked",false);
}
});
//给"删除"按钮添加单击事件
$("#deleteActivityBtn").click(function () {
//收集参数
//获取列表中所有被选中的checkbox
var chekkedIds=$("#tBody input[type='checkbox']:checked");
if(chekkedIds.size()==0){
alert("请选择要删除的市场活动");
return;
}
if(window.confirm("确定删除吗?")){
var ids="";
$.each(chekkedIds,function () {//id=xxxx&id=xxx&.....&id=xxx&
ids+="id="+this.value+"&";
});
ids=ids.substr(0,ids.length-1);//id=xxxx&id=xxx&.....&id=xxx
//发送请求
$.ajax({
url:'workbench/activity/deleteActivityIds.do',
data:ids,
type:'post',
dataType:'json',
success:function (data) {
if(data.code=="1"){
//刷新市场活动列表,显示第一页数据,保持每页显示条数不变
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
}else{
//提示信息
alert(data.message);
}
}
});
}
});
//给"修改"按钮添加单击事件
$("#editActivityBtn").click(function () {
//收集参数
//获取列表中被选中的checkbox
var chkedIds=$("#tBody input[type='checkbox']:checked");
if(chkedIds.size()==0){
alert("请选择要修改的市场活动");
return;
}
if(chkedIds.size()>1){
alert("每次只能修改一条市场活动");
return;
}
//var id=chkedIds.val();
//var id=chkedIds.get(0).value;
var id=chkedIds[0].value;
//发送请求
$.ajax({
url:'workbench/activity/queryActivityById.do',
data:{
id:id
},
type:'post',
dataType:'json',
success:function (data) {
//把市场活动的信息显示在修改的模态窗口上
$("#edit-id").val(data.id);
$("#edit-marketActivityOwner").val(data.owner);
$("#edit-marketActivityName").val(data.name);
$("#edit-startTime").val(data.startDate);
$("#edit-endTime").val(data.endDate);
$("#edit-cost").val(data.cost);
$("#edit-description").val(data.description);
//弹出模态窗口
$("#editActivityModal").modal("show");
}
});
});
});
function queryActivityByConditionForPage(pageNo,pageSize) {
//收集参数
var name=$("#query-name").val();
var owner=$("#query-owner").val();
var startDate=$("#query-startDate").val();
var endDate=$("#query-endDate").val();
//var pageNo=1;
//var pageSize=10;
//发送请求
$.ajax({
url:'workbench/activity/queryActivityByConditionForPage.do',
data:{
name:name,
owner:owner,
startDate:startDate,
endDate:endDate,
pageNo:pageNo,
pageSize:pageSize
},
type:'post',
dataType:'json',
success:function (data) {
//显示总条数
//$("#totalRowsB").text(data.totalRows);
//显示市场活动的列表
//遍历activityList,拼接所有行数据
var htmlStr="";
$.each(data.activityList,function (index,obj) {
htmlStr+="<tr class=\"active\">";
htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";
htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">"+obj.name+"</a></td>";
htmlStr+="<td>"+obj.owner+"</td>";
htmlStr+="<td>"+obj.startDate+"</td>";
htmlStr+="<td>"+obj.endDate+"</td>";
htmlStr+="</tr>";
});
$("#tBody").html(htmlStr);
//取消"全选"按钮
$("#chckAll").prop("checked",false);
//计算总页数
var totalPages=1;
if(data.totalRows%pageSize==0){
totalPages=data.totalRows/pageSize;
}else{
totalPages=parseInt(data.totalRows/pageSize)+1;
}
//对容器调用bs_pagination工具函数,显示翻页信息
$("#demo_pag1").bs_pagination({
currentPage:pageNo,//当前页号,相当于pageNo
rowsPerPage:pageSize,//每页显示条数,相当于pageSize
totalRows:data.totalRows,//总条数
totalPages: totalPages, //总页数,必填参数.
visiblePageLinks:5,//最多可以显示的卡片数
showGoToPage:true,//是否显示"跳转到"部分,默认true--显示
showRowsPerPage:true,//是否显示"每页显示条数"部分。默认true--显示
showRowsInfo:true,//是否显示记录的信息,默认true--显示
//用户每次切换页号,都自动触发本函数;
//每次返回切换页号之后的pageNo和pageSize
onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked
//js代码
//alert(pageObj.currentPage);
//alert(pageObj.rowsPerPage);
queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
}
});
}
});
}
</script>
</head>
<body>
<!-- 创建市场活动的模态窗口 -->
<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="createActivityForm" 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="create-marketActivityOwner">
<c:forEach items="${userList}" var="u">
<option value="${u.id}">${u.name}</option>
</c:forEach>
</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="create-marketActivityName">
</div>
</div>
<div class="form-group">
<label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control mydate" name="mydate" id="create-startDate" readonly>
</div>
<label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control mydate" name="mydate" id="create-endDate" readonly>
</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="create-cost">
</div>
</div>
<div class="form-group">
<label for="create-description" class="col-sm-2 control-label">描述</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="create-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="saveCreateActivityBtn">保存</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">
<input type="hidden" id="edit-id">
<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">
<c:forEach items="${userList}" var="u">
<option value="${u.id}">${u.name}</option>
</c:forEach>
</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-description" class="col-sm-2 control-label">描述</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="edit-description">市场活动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]</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>操作仅针对Excel,仅支持后缀名为XLS的文件。</li>
<li>给定文件的第一行将视为字段名。</li>
<li>请确认您的文件大小不超过5MB。</li>
<li>日期值以文本形式保存,必须符合yyyy-MM-dd格式。</li>
<li>日期时间以文本形式保存,必须符合yyyy-MM-dd 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 id="importActivityBtn" type="button" class="btn btn-primary">导入</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="query-name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">所有者</div>
<input class="form-control" type="text" id="query-owner">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">开始日期</div>
<input class="form-control" type="text" id="query-startDate" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">结束日期</div>
<input class="form-control" type="text" id="query-endDate">
</div>
</div>
<button type="button" class="btn btn-default" id="queryActivityBtn">查询</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="createActivityBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
<button type="button" class="btn btn-default" id="editActivityBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
<button type="button" class="btn btn-danger" id="deleteActivityBtn"><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 id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据(批量导出)</button>
<button id="exportActivityXzBtn" 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="chckAll"/></td>
<td>名称</td>
<td>所有者</td>
<td>开始日期</td>
<td>结束日期</td>
</tr>
</thead>
<tbody id="tBody">
<%--<tr class="active">
<td><input type="checkbox" /></td>
<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</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='detail.html';">发传单</a></td>
<td>zhangsan</td>
<td>2020-10-10</td>
<td>2020-10-20</td>
</tr>--%>
</tbody>
</table>
<div id="demo_pag1"></div>
</div>
<%--<div style="height: 50px; position: relative;top: 30px;">
<div>
<button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalRowsB">50</b>条记录</button>
</div>
<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
10
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">20</a></li>
<li><a href="#">30</a></li>
</ul>
</div>
<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
</div>
<div style="position: relative;top: -88px; left: 285px;">
<nav>
<ul class="pagination">
<li class="disabled"><a href="#">首页</a></li>
<li class="disabled"><a href="#">上一页</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li class="disabled"><a href="#">末页</a></li>
</ul>
</nav>
</div>
</div>--%>
</div>
</div>
</body>
</html>
2.mapper层
/**
* 根据id删除市场活动
*/
int deleteActivityByIds(String[] ids);
<delete id="deleteActivityByIds" parameterType="string">
delete from tbl_activity where id in <!--(xxx,xxx,xxx)-->
<foreach collection="array" item="id" separator="," open="(" close=")">
#{id}
</foreach>
</delete>
3.service层
int deleteActivityByIds(String[] ids);
@Override
public int deleteActivityByIds(String[] ids) {
return activityMapper.deleteActivityByIds(ids);
}
4.controller层
@RequestMapping("/workbench/activity/deleteActivityIds.do")
@ResponseBody
public Object deleteActivityIds(String[] id) {
ReturnObject returnObject = new ReturnObject();
try {
//调用service方法,删除市场活动
int ret = activityService.deleteActivityByIds(id);
if (ret > 0) {
returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
} else {
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage("系统忙,请稍后重试。");
}
} catch (Exception e) {
e.printStackTrace();
}
return returnObject;
}
}
5.修改activity下的index.jsp
1,在页面中给元素添加事件语法: 1)使用元素的事件属性:onxxxx=”f()” 2)使用jquery对象:选择器.xxxx(function(){ //js代码 //this }); *只能给固有元素添加事件 固有元素:当调用事件函数给元素添加事件时,如果元素已经生成,则这些元素叫做固有元素; 动态生成的元素:当调用事件函数给元素添加事件时,如果元素还没有生成,后来生成的元素叫做动态生成的元素。 3)使用jquery的on函数:父选择器.on(“事件类型”,子选择器,function(){ //js代码 //this });
父元素:必须是固有元素,可以直接父元素,也可以是间接父元素. 原则固有父元素范围越小越好. 事件类型:跟事件属性和事件函数一一对应。 子选择器:目标元素,跟父选择器构成一个父子选择器 *不但能给固有元素添加事件,还能够给动态生成的元素添加事件。
2,js中截取字符串: str.substr(startIndex,length);//从下标为startIndex的字符开始截取,截取length个字符 str.substring(startIndex,endIndex)//从下标为startIndex的字符开始截取,截取到下标是endIndex的字符 var str=”beijing”; str.substr(2,3);//iji str.substring(2,3);//ij 3,ajax向后台发送请求时,可以通过data提交参数,data的数据格式有三种格式: 1)data:{ k1:v1, k2:v2, …. } *劣势:只能向后台提交一个参数名对应一个参数值的数据, 不能向后台提交一个参数名对应多个参数值的数据。 只能向后台提交字符串数据 优势:操作简单 2)data:k1=v1&k2:v2&…. *优势:不但能够向后台提交一个参数名对应一个参数值的数据, 还能向后台提交一个参数名对应多个参数值的数据。 劣势:操作麻烦 只能向后台提交字符串数据 3)data:FormData对象 优势:不但能提交字符串数据, 还能提交二进制数据 劣势:操作更复杂
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
<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>
<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
<script type="text/javascript">
$(function(){
//给"创建"按钮添加单击事件
$("#createActivityBtn").click(function () {
//初始化工作
//重置表单
$("#createActivityForm").get(0).reset();
//弹出创建市场活动的模态窗口
$("#createActivityModal").modal("show");
});
//给"保存"按钮添加单击事件
$("#saveCreateActivityBtn").click(function () {
//收集参数
var owner=$("#create-marketActivityOwner").val();
var name=$.trim($("#create-marketActivityName").val());
var startDate=$("#create-startDate").val();
var endDate=$("#create-endDate").val();
var cost=$.trim($("#create-cost").val());
var description=$.trim($("#create-description").val());
//表单验证
if(owner==""){
alert("所有者不能为空");
return;
}
if(name==""){
alert("名称不能为空");
return;
}
if(startDate!=""&&endDate!=""){
//使用字符串的大小代替日期的大小
if(endDate<startDate){
alert("结束日期不能比开始日期小");
return;
}
}
/*
正则表达式:
1,语言,语法:定义字符串的匹配模式,可以用来判断指定的具体字符串是否符合匹配模式。
2,语法通则:
1)//:在js中定义一个正则表达式. var regExp=/...../;
2)^:匹配字符串的开头位置
$: 匹配字符串的结尾
3)[]:匹配指定字符集中的一位字符。 var regExp=/^[abc]$/;
var regExp=/^[a-z0-9]$/;
4){}:匹配次数.var regExp=/^[abc]{5}$/;
{m}:匹配m此
{m,n}:匹配m次到n次
{m,}:匹配m次或者更多次
5)特殊符号:
\d:匹配一位数字,相当于[0-9]
\D:匹配一位非数字
\w:匹配所有字符,包括字母、数字、下划线。
\W:匹配非字符,除了字母、数字、下划线之外的字符。
*:匹配0次或者多次,相当于{0,}
+:匹配1次或者多次,相当于{1,}
?:匹配0次或者1次,相当于{0,1}
*/
var regExp=/^(([1-9]\d*)|0)$/;
if(!regExp.test(cost)){
alert("成本只能为非负整数");
return;
}
//发送请求
$.ajax({
url:'workbench/activity/saveCreateActivity.do',
data:{
owner:owner,
name:name,
startDate:startDate,
endDate:endDate,
cost:cost,
description:description
},
type:'post',
dataType:'json',
success:function (data) {
if(data.code=="1"){
//关闭模态窗口
$("#createActivityModal").modal("hide");
//刷新市场活动列,显示第一页数据,保持每页显示条数不变
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
}else{
//提示信息
alert(data.message);
//模态窗口不关闭
$("#createActivityModal").modal("show");//可以不写。
}
}
});
});
//当容器加载完成之后,对容器调用工具函数
//$("input[name='mydate']").datetimepicker({
$(".mydate").datetimepicker({
language:'zh-CN', //语言
format:'yyyy-mm-dd',//日期的格式
minView:'month', //可以选择的最小视图
initialDate:new Date(),//初始化显示的日期
autoclose:true,//设置选择完日期或者时间之后,日否自动关闭日历
todayBtn:true,//设置是否显示"今天"按钮,默认是false
clearBtn:true//设置是否显示"清空"按钮,默认是false
});
//当市场活动主页面加载完成,查询所有数据的第一页以及所有数据的总条数,默认每页显示10条
queryActivityByConditionForPage(1,10);
//给"查询"按钮添加单击事件
$("#queryActivityBtn").click(function () {
//查询所有符合条件数据的第一页以及所有符合条件数据的总条数;
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
});
});
function queryActivityByConditionForPage(pageNo,pageSize) {
//收集参数
var name = $("#query-name").val();
var owner = $("#query-owner").val();
var startDate = $("#query-startDate").val();
var endDate = $("#query-endDate").val();
//var pageNo=1;
//var pageSize=10;
//发送请求
$.ajax({
url: 'workbench/activity/queryActivityByConditionForPage.do',
data: {
name: name,
owner: owner,
startDate: startDate,
endDate: endDate,
pageNo: pageNo,
pageSize: pageSize
},
type: 'post',
dataType: 'json',
success: function (data) {
//显示总条数
//$("#totalRowsB").text(data.totalRows);
//显示市场活动的列表
//遍历activityList,拼接所有行数据
var htmlStr = "";
$.each(data.activityList, function (index, obj) {
htmlStr += "<tr class=\"active\">";
htmlStr += "<td><input type=\"checkbox\" value=\"" + obj.id + "\"/></td>";
htmlStr += "<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">" + obj.name + "</a></td>";
htmlStr += "<td>" + obj.owner + "</td>";
htmlStr += "<td>" + obj.startDate + "</td>";
htmlStr += "<td>" + obj.endDate + "</td>";
htmlStr += "</tr>";
});
$("#tBody").html(htmlStr);
//计算总页数
var totalPages = 1;
if (data.totalRows % pageSize == 0) {
totalPages = data.totalRows / pageSize;
} else {
totalPages = parseInt(data.totalRows / pageSize) + 1;
}
//对容器调用bs_pagination工具函数,显示翻页信息
$("#demo_pag1").bs_pagination({
currentPage: pageNo,//当前页号,相当于pageNo
rowsPerPage: pageSize,//每页显示条数,相当于pageSize
totalRows: data.totalRows,//总条数
totalPages: totalPages, //总页数,必填参数.
visiblePageLinks: 5,//最多可以显示的卡片数
showGoToPage: true,//是否显示"跳转到"部分,默认true--显示
showRowsPerPage: true,//是否显示"每页显示条数"部分。默认true--显示
showRowsInfo: true,//是否显示记录的信息,默认true--显示
//用户每次切换页号,都自动触发本函数;
//每次返回切换页号之后的pageNo和pageSize
onChangePage: function (event, pageObj) { // returns page_num and rows_per_page after a link has clicked
//js代码
//alert(pageObj.currentPage);
//alert(pageObj.rowsPerPage);
queryActivityByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage);
}
});
}
});
//给"删除"按钮添加单击事件
$("#deleteActivityBtn").click(function () {
//收集参数
//获取列表中所有被选中的checkbox
var chekkedIds = $("#tBody input[type='checkbox']:checked");
if (chekkedIds.size() == 0) {
alert("请选择要删除的市场活动");
return;
}
if (window.confirm("确定删除吗?")) {
var ids = "";
$.each(chekkedIds, function () {//id=xxxx&id=xxx&.....&id=xxx&
ids += "id=" + this.value + "&";
});
ids = ids.substr(0, ids.length - 1);//id=xxxx&id=xxx&.....&id=xxx
//发送请求
$.ajax({
url: 'workbench/activity/deleteActivityIds.do',
data: ids,
type: 'post',
dataType: 'json',
success: function (data) {
if (data.code == "1") {
//刷新市场活动列表,显示第一页数据,保持每页显示条数不变
queryActivityByConditionForPage(1, $("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
} else {
//提示信息
alert(data.message);
}
}
});
}
});
}
</script>
</head>
<body>
<!-- 创建市场活动的模态窗口 -->
<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="createActivityForm" 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="create-marketActivityOwner">
<c:forEach items="${userList}" var="u">
<option value="${u.id}">${u.name}</option>
</c:forEach>
</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="create-marketActivityName">
</div>
</div>
<div class="form-group">
<label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control mydate" name="mydate" id="create-startDate" readonly>
</div>
<label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control mydate" name="mydate" id="create-endDate" readonly>
</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="create-cost">
</div>
</div>
<div class="form-group">
<label for="create-description" class="col-sm-2 control-label">描述</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="create-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="saveCreateActivityBtn">保存</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">
<c:forEach items="${userList}" var="u">
<option value="${u.id}">${u.name}</option>
</c:forEach>
</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]</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>操作仅针对Excel,仅支持后缀名为XLS的文件。</li>
<li>给定文件的第一行将视为字段名。</li>
<li>请确认您的文件大小不超过5MB。</li>
<li>日期值以文本形式保存,必须符合yyyy-MM-dd格式。</li>
<li>日期时间以文本形式保存,必须符合yyyy-MM-dd 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 id="importActivityBtn" type="button" class="btn btn-primary">导入</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="query-name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">所有者</div>
<input class="form-control" type="text" id="query-owner">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">开始日期</div>
<input class="form-control" type="text" id="query-startDate" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">结束日期</div>
<input class="form-control" type="text" id="query-endDate">
</div>
</div>
<button type="button" class="btn btn-default" id="queryActivityBtn">查询</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="createActivityBtn"><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="deleteActivityBtn"><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 id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据(批量导出)</button>
<button id="exportActivityXzBtn" 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="chckAll"/></td>
<td>名称</td>
<td>所有者</td>
<td>开始日期</td>
<td>结束日期</td>
</tr>
</thead>
<tbody id="tBody">
<%--<tr class="active">
<td><input type="checkbox" /></td>
<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</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='detail.html';">发传单</a></td>
<td>zhangsan</td>
<td>2020-10-10</td>
<td>2020-10-20</td>
</tr>--%>
</tbody>
</table>
<div id="demo_pag1"></div>
</div>
<%--<div style="height: 50px; position: relative;top: 30px;">
<div>
<button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalRowsB">50</b>条记录</button>
</div>
<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
10
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">20</a></li>
<li><a href="#">30</a></li>
</ul>
</div>
<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
</div>
<div style="position: relative;top: -88px; left: 285px;">
<nav>
<ul class="pagination">
<li class="disabled"><a href="#">首页</a></li>
<li class="disabled"><a href="#">上一页</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li class="disabled"><a href="#">末页</a></li>
</ul>
</nav>
</div>
</div>--%>
</div>
</div>
</body>
</html>
四、修改市场活动流程图
1.mapper层
/**
* 根据id来查询市场活动的信息
*/
Activity selectActivityById(String id);
<select id="selectActivityById" parameterType="string" resultMap="BaseResultMap">
select
<include refid="Base_Column_List">
from tbl_activity
where id=#{id}
</select>
2.service层
Activity queryActivityById(String id);
@Override
public Activity queryActivityById(String id) {
return activityMapper.selectActivityById(id);
}
3.controller层
@RequestMapping("/workbench/activity/queryActivityById.do")
@ResponseBody
public Object queryActivityById(String id){
//调用service层方法,查询市场活动
Activity activity = activityService.queryActivityById(id);
return activity;
}
6.修改activity下的index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
<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>
<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
<script type="text/javascript">
$(function(){
//给"创建"按钮添加单击事件
$("#createActivityBtn").click(function () {
//初始化工作
//重置表单
$("#createActivityForm").get(0).reset();
//弹出创建市场活动的模态窗口
$("#createActivityModal").modal("show");
});
//给"保存"按钮添加单击事件
$("#saveCreateActivityBtn").click(function () {
//收集参数
var owner=$("#create-marketActivityOwner").val();
var name=$.trim($("#create-marketActivityName").val());
var startDate=$("#create-startDate").val();
var endDate=$("#create-endDate").val();
var cost=$.trim($("#create-cost").val());
var description=$.trim($("#create-description").val());
//表单验证
if(owner==""){
alert("所有者不能为空");
return;
}
if(name==""){
alert("名称不能为空");
return;
}
if(startDate!=""&&endDate!=""){
//使用字符串的大小代替日期的大小
if(endDate<startDate){
alert("结束日期不能比开始日期小");
return;
}
}
/*
正则表达式:
1,语言,语法:定义字符串的匹配模式,可以用来判断指定的具体字符串是否符合匹配模式。
2,语法通则:
1)//:在js中定义一个正则表达式. var regExp=/...../;
2)^:匹配字符串的开头位置
$: 匹配字符串的结尾
3)[]:匹配指定字符集中的一位字符。 var regExp=/^[abc]$/;
var regExp=/^[a-z0-9]$/;
4){}:匹配次数.var regExp=/^[abc]{5}$/;
{m}:匹配m此
{m,n}:匹配m次到n次
{m,}:匹配m次或者更多次
5)特殊符号:
\d:匹配一位数字,相当于[0-9]
\D:匹配一位非数字
\w:匹配所有字符,包括字母、数字、下划线。
\W:匹配非字符,除了字母、数字、下划线之外的字符。
*:匹配0次或者多次,相当于{0,}
+:匹配1次或者多次,相当于{1,}
?:匹配0次或者1次,相当于{0,1}
*/
var regExp=/^(([1-9]\d*)|0)$/;
if(!regExp.test(cost)){
alert("成本只能为非负整数");
return;
}
//发送请求
$.ajax({
url:'workbench/activity/saveCreateActivity.do',
data:{
owner:owner,
name:name,
startDate:startDate,
endDate:endDate,
cost:cost,
description:description
},
type:'post',
dataType:'json',
success:function (data) {
if(data.code=="1"){
//关闭模态窗口
$("#createActivityModal").modal("hide");
//刷新市场活动列,显示第一页数据,保持每页显示条数不变
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
}else{
//提示信息
alert(data.message);
//模态窗口不关闭
$("#createActivityModal").modal("show");//可以不写。
}
}
});
});
//当容器加载完成之后,对容器调用工具函数
//$("input[name='mydate']").datetimepicker({
$(".mydate").datetimepicker({
language:'zh-CN', //语言
format:'yyyy-mm-dd',//日期的格式
minView:'month', //可以选择的最小视图
initialDate:new Date(),//初始化显示的日期
autoclose:true,//设置选择完日期或者时间之后,日否自动关闭日历
todayBtn:true,//设置是否显示"今天"按钮,默认是false
clearBtn:true//设置是否显示"清空"按钮,默认是false
});
//当市场活动主页面加载完成,查询所有数据的第一页以及所有数据的总条数,默认每页显示10条
queryActivityByConditionForPage(1,10);
//给"查询"按钮添加单击事件
$("#queryActivityBtn").click(function () {
//查询所有符合条件数据的第一页以及所有符合条件数据的总条数;
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
});
//给"全选"按钮添加单击事件
$("#chckAll").click(function () {
//如果"全选"按钮是选中状态,则列表中所有checkbox都选中
/*if(this.checked==true){
$("#tBody input[type='checkbox']").prop("checked",true);
}else{
$("#tBody input[type='checkbox']").prop("checked",false);
}*/
$("#tBody input[type='checkbox']").prop("checked",this.checked);
});
/*$("#tBody input[type='checkbox']").click(function () {
//如果列表中的所有checkbox都选中,则"全选"按钮也选中
if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
$("#chckAll").prop("checked",true);
}else{//如果列表中的所有checkbox至少有一个没选中,则"全选"按钮也取消
$("#chckAll").prop("checked",false);
}
});*/
$("#tBody").on("click","input[type='checkbox']",function () {
//如果列表中的所有checkbox都选中,则"全选"按钮也选中
if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
$("#chckAll").prop("checked",true);
}else{//如果列表中的所有checkbox至少有一个没选中,则"全选"按钮也取消
$("#chckAll").prop("checked",false);
}
});
//给"删除"按钮添加单击事件
$("#deleteActivityBtn").click(function () {
//收集参数
//获取列表中所有被选中的checkbox
var chekkedIds=$("#tBody input[type='checkbox']:checked");
if(chekkedIds.size()==0){
alert("请选择要删除的市场活动");
return;
}
if(window.confirm("确定删除吗?")){
var ids="";
$.each(chekkedIds,function () {//id=xxxx&id=xxx&.....&id=xxx&
ids+="id="+this.value+"&";
});
ids=ids.substr(0,ids.length-1);//id=xxxx&id=xxx&.....&id=xxx
//发送请求
$.ajax({
url:'workbench/activity/deleteActivityIds.do',
data:ids,
type:'post',
dataType:'json',
success:function (data) {
if(data.code=="1"){
//刷新市场活动列表,显示第一页数据,保持每页显示条数不变
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
}else{
//提示信息
alert(data.message);
}
}
});
}
});
//给"修改"按钮添加单击事件
$("#editActivityBtn").click(function () {
//收集参数
//获取列表中被选中的checkbox
var chkedIds=$("#tBody input[type='checkbox']:checked");
if(chkedIds.size()==0){
alert("请选择要修改的市场活动");
return;
}
if(chkedIds.size()>1){
alert("每次只能修改一条市场活动");
return;
}
//var id=chkedIds.val();
//var id=chkedIds.get(0).value;
var id=chkedIds[0].value;
//发送请求
$.ajax({
url:'workbench/activity/queryActivityById.do',
data:{
id:id
},
type:'post',
dataType:'json',
success:function (data) {
//把市场活动的信息显示在修改的模态窗口上
$("#edit-id").val(data.id);
$("#edit-marketActivityOwner").val(data.owner);
$("#edit-marketActivityName").val(data.name);
$("#edit-startTime").val(data.startDate);
$("#edit-endTime").val(data.endDate);
$("#edit-cost").val(data.cost);
$("#edit-description").val(data.description);
//弹出模态窗口
$("#editActivityModal").modal("show");
}
});
});
});
function queryActivityByConditionForPage(pageNo,pageSize) {
//收集参数
var name=$("#query-name").val();
var owner=$("#query-owner").val();
var startDate=$("#query-startDate").val();
var endDate=$("#query-endDate").val();
//var pageNo=1;
//var pageSize=10;
//发送请求
$.ajax({
url:'workbench/activity/queryActivityByConditionForPage.do',
data:{
name:name,
owner:owner,
startDate:startDate,
endDate:endDate,
pageNo:pageNo,
pageSize:pageSize
},
type:'post',
dataType:'json',
success:function (data) {
//显示总条数
//$("#totalRowsB").text(data.totalRows);
//显示市场活动的列表
//遍历activityList,拼接所有行数据
var htmlStr="";
$.each(data.activityList,function (index,obj) {
htmlStr+="<tr class=\"active\">";
htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";
htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">"+obj.name+"</a></td>";
htmlStr+="<td>"+obj.owner+"</td>";
htmlStr+="<td>"+obj.startDate+"</td>";
htmlStr+="<td>"+obj.endDate+"</td>";
htmlStr+="</tr>";
});
$("#tBody").html(htmlStr);
//取消"全选"按钮
$("#chckAll").prop("checked",false);
//计算总页数
var totalPages=1;
if(data.totalRows%pageSize==0){
totalPages=data.totalRows/pageSize;
}else{
totalPages=parseInt(data.totalRows/pageSize)+1;
}
//对容器调用bs_pagination工具函数,显示翻页信息
$("#demo_pag1").bs_pagination({
currentPage:pageNo,//当前页号,相当于pageNo
rowsPerPage:pageSize,//每页显示条数,相当于pageSize
totalRows:data.totalRows,//总条数
totalPages: totalPages, //总页数,必填参数.
visiblePageLinks:5,//最多可以显示的卡片数
showGoToPage:true,//是否显示"跳转到"部分,默认true--显示
showRowsPerPage:true,//是否显示"每页显示条数"部分。默认true--显示
showRowsInfo:true,//是否显示记录的信息,默认true--显示
//用户每次切换页号,都自动触发本函数;
//每次返回切换页号之后的pageNo和pageSize
onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked
//js代码
//alert(pageObj.currentPage);
//alert(pageObj.rowsPerPage);
queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
}
});
}
});
}
</script>
</head>
<body>
<!-- 创建市场活动的模态窗口 -->
<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="createActivityForm" 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="create-marketActivityOwner">
<c:forEach items="${userList}" var="u">
<option value="${u.id}">${u.name}</option>
</c:forEach>
</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="create-marketActivityName">
</div>
</div>
<div class="form-group">
<label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control mydate" name="mydate" id="create-startDate" readonly>
</div>
<label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control mydate" name="mydate" id="create-endDate" readonly>
</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="create-cost">
</div>
</div>
<div class="form-group">
<label for="create-description" class="col-sm-2 control-label">描述</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="create-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="saveCreateActivityBtn">保存</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">
<input type="hidden" id="edit-id">
<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">
<c:forEach items="${userList}" var="u">
<option value="${u.id}">${u.name}</option>
</c:forEach>
</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-description" class="col-sm-2 control-label">描述</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="edit-description">市场活动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]</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>操作仅针对Excel,仅支持后缀名为XLS的文件。</li>
<li>给定文件的第一行将视为字段名。</li>
<li>请确认您的文件大小不超过5MB。</li>
<li>日期值以文本形式保存,必须符合yyyy-MM-dd格式。</li>
<li>日期时间以文本形式保存,必须符合yyyy-MM-dd 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 id="importActivityBtn" type="button" class="btn btn-primary">导入</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="query-name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">所有者</div>
<input class="form-control" type="text" id="query-owner">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">开始日期</div>
<input class="form-control" type="text" id="query-startDate" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">结束日期</div>
<input class="form-control" type="text" id="query-endDate">
</div>
</div>
<button type="button" class="btn btn-default" id="queryActivityBtn">查询</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="createActivityBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
<button type="button" class="btn btn-default" id="editActivityBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
<button type="button" class="btn btn-danger" id="deleteActivityBtn"><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 id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据(批量导出)</button>
<button id="exportActivityXzBtn" 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="chckAll"/></td>
<td>名称</td>
<td>所有者</td>
<td>开始日期</td>
<td>结束日期</td>
</tr>
</thead>
<tbody id="tBody">
<%--<tr class="active">
<td><input type="checkbox" /></td>
<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</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='detail.html';">发传单</a></td>
<td>zhangsan</td>
<td>2020-10-10</td>
<td>2020-10-20</td>
</tr>--%>
</tbody>
</table>
<div id="demo_pag1"></div>
</div>
<%--<div style="height: 50px; position: relative;top: 30px;">
<div>
<button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalRowsB">50</b>条记录</button>
</div>
<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
10
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">20</a></li>
<li><a href="#">30</a></li>
</ul>
</div>
<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
</div>
<div style="position: relative;top: -88px; left: 285px;">
<nav>
<ul class="pagination">
<li class="disabled"><a href="#">首页</a></li>
<li class="disabled"><a href="#">上一页</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li class="disabled"><a href="#">末页</a></li>
</ul>
</nav>
</div>
</div>--%>
</div>
</div>
</body>
</html>
2.1设计保存修改的市场活动
2.2mapper层
/**
* 保存修改的市场活动
*/
int updateActivity(Activity activity)
<update id="updateActivity" parameterType="com.bjpowernode.crm.workbench.domain.Activity">
update tbl_activity
set owner=#{owner},name=#{name},start_date=#{startDate},end_date=#{endDate},cost=#{cost},description=#{description},
edit_time=#{editTime},edit_by=#{editBy}
where id=#{id}
</update>
2.3service层
int saveEditActivity(Activity activity);
@Override
public int saveEditActivity(Activity activity) {
return activityMapper.updateActivity(activity);
}
2.4controller层
@RequestMapping("/workbench/activity/saveEditActivity.do")
@ResponseBody
public Object saveEditActivity(Activity activity,HttpSession session){
User user=(User) session.getAttribute(Contants.SESSION_USER);
//封装参数
activity.setEditTime(DateUtils.formateDateTime(new Date()));
activity.setEditBy(user.getId());
ReturnObject returnObject =new ReturnObject();
int ret =activityService.saveEditActivity(activity);
if(ret>0){
returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
}else {
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage("系统忙,请稍后重试");
}
return returnObject;
}
2.5修改activity下的index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
<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>
<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
<script type="text/javascript">
$(function(){
//给"创建"按钮添加单击事件
$("#createActivityBtn").click(function () {
//初始化工作
//重置表单
$("#createActivityForm").get(0).reset();
//弹出创建市场活动的模态窗口
$("#createActivityModal").modal("show");
});
//给"保存"按钮添加单击事件
$("#saveCreateActivityBtn").click(function () {
//收集参数
var owner=$("#create-marketActivityOwner").val();
var name=$.trim($("#create-marketActivityName").val());
var startDate=$("#create-startDate").val();
var endDate=$("#create-endDate").val();
var cost=$.trim($("#create-cost").val());
var description=$.trim($("#create-description").val());
//表单验证
if(owner==""){
alert("所有者不能为空");
return;
}
if(name==""){
alert("名称不能为空");
return;
}
if(startDate!=""&&endDate!=""){
//使用字符串的大小代替日期的大小
if(endDate<startDate){
alert("结束日期不能比开始日期小");
return;
}
}
/*
正则表达式:
1,语言,语法:定义字符串的匹配模式,可以用来判断指定的具体字符串是否符合匹配模式。
2,语法通则:
1)//:在js中定义一个正则表达式. var regExp=/...../;
2)^:匹配字符串的开头位置
$: 匹配字符串的结尾
3)[]:匹配指定字符集中的一位字符。 var regExp=/^[abc]$/;
var regExp=/^[a-z0-9]$/;
4){}:匹配次数.var regExp=/^[abc]{5}$/;
{m}:匹配m此
{m,n}:匹配m次到n次
{m,}:匹配m次或者更多次
5)特殊符号:
\d:匹配一位数字,相当于[0-9]
\D:匹配一位非数字
\w:匹配所有字符,包括字母、数字、下划线。
\W:匹配非字符,除了字母、数字、下划线之外的字符。
*:匹配0次或者多次,相当于{0,}
+:匹配1次或者多次,相当于{1,}
?:匹配0次或者1次,相当于{0,1}
*/
var regExp=/^(([1-9]\d*)|0)$/;
if(!regExp.test(cost)){
alert("成本只能为非负整数");
return;
}
//发送请求
$.ajax({
url:'workbench/activity/saveCreateActivity.do',
data:{
owner:owner,
name:name,
startDate:startDate,
endDate:endDate,
cost:cost,
description:description
},
type:'post',
dataType:'json',
success:function (data) {
if(data.code=="1"){
//关闭模态窗口
$("#createActivityModal").modal("hide");
//刷新市场活动列,显示第一页数据,保持每页显示条数不变
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
}else{
//提示信息
alert(data.message);
//模态窗口不关闭
$("#createActivityModal").modal("show");//可以不写。
}
}
});
});
//当容器加载完成之后,对容器调用工具函数
//$("input[name='mydate']").datetimepicker({
$(".mydate").datetimepicker({
language:'zh-CN', //语言
format:'yyyy-mm-dd',//日期的格式
minView:'month', //可以选择的最小视图
initialDate:new Date(),//初始化显示的日期
autoclose:true,//设置选择完日期或者时间之后,日否自动关闭日历
todayBtn:true,//设置是否显示"今天"按钮,默认是false
clearBtn:true//设置是否显示"清空"按钮,默认是false
});
//当市场活动主页面加载完成,查询所有数据的第一页以及所有数据的总条数,默认每页显示10条
queryActivityByConditionForPage(1,10);
//给"查询"按钮添加单击事件
$("#queryActivityBtn").click(function () {
//查询所有符合条件数据的第一页以及所有符合条件数据的总条数;
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
});
//给"全选"按钮添加单击事件
$("#chckAll").click(function () {
//如果"全选"按钮是选中状态,则列表中所有checkbox都选中
/*if(this.checked==true){
$("#tBody input[type='checkbox']").prop("checked",true);
}else{
$("#tBody input[type='checkbox']").prop("checked",false);
}*/
$("#tBody input[type='checkbox']").prop("checked",this.checked);
});
/*$("#tBody input[type='checkbox']").click(function () {
//如果列表中的所有checkbox都选中,则"全选"按钮也选中
if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
$("#chckAll").prop("checked",true);
}else{//如果列表中的所有checkbox至少有一个没选中,则"全选"按钮也取消
$("#chckAll").prop("checked",false);
}
});*/
$("#tBody").on("click","input[type='checkbox']",function () {
//如果列表中的所有checkbox都选中,则"全选"按钮也选中
if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
$("#chckAll").prop("checked",true);
}else{//如果列表中的所有checkbox至少有一个没选中,则"全选"按钮也取消
$("#chckAll").prop("checked",false);
}
});
//给"删除"按钮添加单击事件
$("#deleteActivityBtn").click(function () {
//收集参数
//获取列表中所有被选中的checkbox
var chekkedIds=$("#tBody input[type='checkbox']:checked");
if(chekkedIds.size()==0){
alert("请选择要删除的市场活动");
return;
}
if(window.confirm("确定删除吗?")){
var ids="";
$.each(chekkedIds,function () {//id=xxxx&id=xxx&.....&id=xxx&
ids+="id="+this.value+"&";
});
ids=ids.substr(0,ids.length-1);//id=xxxx&id=xxx&.....&id=xxx
//发送请求
$.ajax({
url:'workbench/activity/deleteActivityIds.do',
data:ids,
type:'post',
dataType:'json',
success:function (data) {
if(data.code=="1"){
//刷新市场活动列表,显示第一页数据,保持每页显示条数不变
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
}else{
//提示信息
alert(data.message);
}
}
});
}
});
//给"修改"按钮添加单击事件
$("#editActivityBtn").click(function () {
//收集参数
//获取列表中被选中的checkbox
var chkedIds=$("#tBody input[type='checkbox']:checked");
if(chkedIds.size()==0){
alert("请选择要修改的市场活动");
return;
}
if(chkedIds.size()>1){
alert("每次只能修改一条市场活动");
return;
}
//var id=chkedIds.val();
//var id=chkedIds.get(0).value;
var id=chkedIds[0].value;
//发送请求
$.ajax({
url:'workbench/activity/queryActivityById.do',
data:{
id:id
},
type:'post',
dataType:'json',
success:function (data) {
//把市场活动的信息显示在修改的模态窗口上
$("#edit-id").val(data.id);
$("#edit-marketActivityOwner").val(data.owner);
$("#edit-marketActivityName").val(data.name);
$("#edit-startTime").val(data.startDate);
$("#edit-endTime").val(data.endDate);
$("#edit-cost").val(data.cost);
$("#edit-description").val(data.description);
//弹出模态窗口
$("#editActivityModal").modal("show");
}
});
});
//给"更新"按钮添加单击事件
$("#saveEditActivityBtn").click(function () {
//收集参数
var id=$("#edit-id").val();
var owner=$("#edit-marketActivityOwner").val();
var name=$.trim($("#edit-marketActivityName").val());
var startDate=$("#edit-startTime").val();
var endDate=$("#edit-endTime").val();
var cost=$.trim($("#edit-cost").val());
var description=$.trim($("#edit-description").val());
//表单验证(作业)
//发送请求
$.ajax({
url:'workbench/activity/saveEditActivity.do',
data:{
id:id,
owner:owner,
name:name,
startDate:startDate,
endDate:endDate,
cost:cost,
description:description
},
type:'post',
dataType:'json',
success:function (data) {
if(data.code=="1"){
//关闭模态窗口
$("#editActivityModal").modal("hide");
//刷新市场活动列表,保持页号和每页显示条数都不变
queryActivityByConditionForPage($("#demo_pag1").bs_pagination('getOption', 'currentPage'),$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
}else{
//提示信息
alert(data.message);
//模态窗口不关闭
$("#editActivityModal").modal("show");
}
}
});
});
//给"批量导出"按钮添加单击事件
$("#exportActivityAllBtn").click(function () {
//发送同步请求
window.location.href="workbench/activity/exportAllActivitys.do";
});
//给"导入"按钮添加单击事件
$("#importActivityBtn").click(function () {
//收集参数
var activityFileName=$("#activityFile").val();
var suffix=activityFileName.substr(activityFileName.lastIndexOf(".")+1).toLocaleLowerCase();//xls,XLS,Xls,xLs,....
if(suffix!="xls"){
alert("只支持xls文件");
return;
}
var activityFile=$("#activityFile")[0].files[0];
if(activityFile.size>5*1024*1024){
alert("文件大小不超过5MB");
return;
}
//FormData是ajax提供的接口,可以模拟键值对向后台提交参数;
//FormData最大的优势是不但能提交文本数据,还能提交二进制数据
var formData=new FormData();
formData.append("activityFile",activityFile);
formData.append("userName","张三");
//发送请求
$.ajax({
url:'workbench/activity/importActivity.do',
data:formData,
processData:false,//设置ajax向后台提交参数之前,是否把参数统一转换成字符串:true--是,false--不是,默认是true
contentType:false,//设置ajax向后台提交参数之前,是否把所有的参数统一按urlencoded编码:true--是,false--不是,默认是true
type:'post',
dataType:'json',
success:function (data) {
if(data.code=="1"){
//提示成功导入记录条数
alert("成功导入"+data.retData+"条记录");
//关闭模态窗口
$("#importActivityModal").modal("hide");
//刷新市场活动列表,显示第一页数据,保持每页显示条数不变
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
}else{
//提示信息
alert(data.message);
//模态窗口不关闭
$("#importActivityModal").modal("show");
}
}
});
});
});
function queryActivityByConditionForPage(pageNo,pageSize) {
//收集参数
var name=$("#query-name").val();
var owner=$("#query-owner").val();
var startDate=$("#query-startDate").val();
var endDate=$("#query-endDate").val();
//var pageNo=1;
//var pageSize=10;
//发送请求
$.ajax({
url:'workbench/activity/queryActivityByConditionForPage.do',
data:{
name:name,
owner:owner,
startDate:startDate,
endDate:endDate,
pageNo:pageNo,
pageSize:pageSize
},
type:'post',
dataType:'json',
success:function (data) {
//显示总条数
//$("#totalRowsB").text(data.totalRows);
//显示市场活动的列表
//遍历activityList,拼接所有行数据
var htmlStr="";
$.each(data.activityList,function (index,obj) {
htmlStr+="<tr class=\"active\">";
htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";
htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">"+obj.name+"</a></td>";
htmlStr+="<td>"+obj.owner+"</td>";
htmlStr+="<td>"+obj.startDate+"</td>";
htmlStr+="<td>"+obj.endDate+"</td>";
htmlStr+="</tr>";
});
$("#tBody").html(htmlStr);
//取消"全选"按钮
$("#chckAll").prop("checked",false);
//计算总页数
var totalPages=1;
if(data.totalRows%pageSize==0){
totalPages=data.totalRows/pageSize;
}else{
totalPages=parseInt(data.totalRows/pageSize)+1;
}
//对容器调用bs_pagination工具函数,显示翻页信息
$("#demo_pag1").bs_pagination({
currentPage:pageNo,//当前页号,相当于pageNo
rowsPerPage:pageSize,//每页显示条数,相当于pageSize
totalRows:data.totalRows,//总条数
totalPages: totalPages, //总页数,必填参数.
visiblePageLinks:5,//最多可以显示的卡片数
showGoToPage:true,//是否显示"跳转到"部分,默认true--显示
showRowsPerPage:true,//是否显示"每页显示条数"部分。默认true--显示
showRowsInfo:true,//是否显示记录的信息,默认true--显示
//用户每次切换页号,都自动触发本函数;
//每次返回切换页号之后的pageNo和pageSize
onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked
//js代码
//alert(pageObj.currentPage);
//alert(pageObj.rowsPerPage);
queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
}
});
}
});
}
</script>
</head>
<body>
<!-- 创建市场活动的模态窗口 -->
<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="createActivityForm" 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="create-marketActivityOwner">
<c:forEach items="${userList}" var="u">
<option value="${u.id}">${u.name}</option>
</c:forEach>
</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="create-marketActivityName">
</div>
</div>
<div class="form-group">
<label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control mydate" name="mydate" id="create-startDate" readonly>
</div>
<label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control mydate" name="mydate" id="create-endDate" readonly>
</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="create-cost">
</div>
</div>
<div class="form-group">
<label for="create-description" class="col-sm-2 control-label">描述</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="create-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="saveCreateActivityBtn">保存</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">
<input type="hidden" id="edit-id">
<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">
<c:forEach items="${userList}" var="u">
<option value="${u.id}">${u.name}</option>
</c:forEach>
</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-description" class="col-sm-2 control-label">描述</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="edit-description">市场活动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" id="saveEditActivityBtn">更新</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]</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>操作仅针对Excel,仅支持后缀名为XLS的文件。</li>
<li>给定文件的第一行将视为字段名。</li>
<li>请确认您的文件大小不超过5MB。</li>
<li>日期值以文本形式保存,必须符合yyyy-MM-dd格式。</li>
<li>日期时间以文本形式保存,必须符合yyyy-MM-dd 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 id="importActivityBtn" type="button" class="btn btn-primary">导入</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="query-name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">所有者</div>
<input class="form-control" type="text" id="query-owner">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">开始日期</div>
<input class="form-control" type="text" id="query-startDate" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">结束日期</div>
<input class="form-control" type="text" id="query-endDate">
</div>
</div>
<button type="button" class="btn btn-default" id="queryActivityBtn">查询</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="createActivityBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
<button type="button" class="btn btn-default" id="editActivityBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
<button type="button" class="btn btn-danger" id="deleteActivityBtn"><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 id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据(批量导出)</button>
<button id="exportActivityXzBtn" 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="chckAll"/></td>
<td>名称</td>
<td>所有者</td>
<td>开始日期</td>
<td>结束日期</td>
</tr>
</thead>
<tbody id="tBody">
<%--<tr class="active">
<td><input type="checkbox" /></td>
<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</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='detail.html';">发传单</a></td>
<td>zhangsan</td>
<td>2020-10-10</td>
<td>2020-10-20</td>
</tr>--%>
</tbody>
</table>
<div id="demo_pag1"></div>
</div>
<%--<div style="height: 50px; position: relative;top: 30px;">
<div>
<button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalRowsB">50</b>条记录</button>
</div>
<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
10
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">20</a></li>
<li><a href="#">30</a></li>
</ul>
</div>
<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
</div>
<div style="position: relative;top: -88px; left: 285px;">
<nav>
<ul class="pagination">
<li class="disabled"><a href="#">首页</a></li>
<li class="disabled"><a href="#">上一页</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li class="disabled"><a href="#">末页</a></li>
</ul>
</nav>
</div>
</div>--%>
</div>
</div>
</body>
</html>