一、分页查询市场活动流程图

分页查询市场活动.png

1.mapper层

image.png

  1. package com.bjpowernode.crm.workbench.mapper;
  2. import com.bjpowernode.crm.workbench.domain.Activity;
  3. import java.util.List;
  4. import java.util.Map;
  5. public interface ActivityMapper {
  6. /**
  7. * This method was generated by MyBatis Generator.
  8. * This method corresponds to the database table tbl_activity
  9. *
  10. * @mbggenerated Thu Sep 15 22:05:10 CST 2022
  11. */
  12. int deleteByPrimaryKey(String id);
  13. /**
  14. * This method was generated by MyBatis Generator.
  15. * This method corresponds to the database table tbl_activity
  16. *
  17. * @mbggenerated Thu Sep 15 22:05:10 CST 2022
  18. */
  19. int insertSelective(Activity record);
  20. /**
  21. * This method was generated by MyBatis Generator.
  22. * This method corresponds to the database table tbl_activity
  23. *
  24. * @mbggenerated Thu Sep 15 22:05:10 CST 2022
  25. */
  26. Activity selectByPrimaryKey(String id);
  27. /**
  28. * This method was generated by MyBatis Generator.
  29. * This method corresponds to the database table tbl_activity
  30. *
  31. * @mbggenerated Thu Sep 15 22:05:10 CST 2022
  32. */
  33. int updateByPrimaryKeySelective(Activity record);
  34. /**
  35. * This method was generated by MyBatis Generator.
  36. * This method corresponds to the database table tbl_activity
  37. *
  38. * @mbggenerated Thu Sep 15 22:05:10 CST 2022
  39. */
  40. int updateByPrimaryKey(Activity record);
  41. /**
  42. 保存创建的市场活动
  43. */
  44. int insertActivity(Activity activity);
  45. /**
  46. * 根据条件分页查询市场活动的列表
  47. * @param map
  48. * @return
  49. */
  50. List<Activity> selectActivityByConditionForPage(Map<String,Object> map);
  51. /**
  52. * 根据条件查询市场活动的总条数
  53. * @param map
  54. * @return
  55. */
  56. int selectCountOfActivityByCondition(Map<String,Object> map);
  57. }
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
  3. <mapper namespace="com.bjpowernode.crm.workbench.mapper.ActivityMapper" >
  4. <resultMap id="BaseResultMap" type="com.bjpowernode.crm.workbench.domain.Activity" >
  5. <!--
  6. WARNING - @mbggenerated
  7. This element is automatically generated by MyBatis Generator, do not modify.
  8. This element was generated on Thu Sep 15 22:05:10 CST 2022.
  9. -->
  10. <id column="id" property="id" jdbcType="CHAR" />
  11. <result column="owner" property="owner" jdbcType="CHAR" />
  12. <result column="name" property="name" jdbcType="VARCHAR" />
  13. <result column="start_date" property="startDate" jdbcType="CHAR" />
  14. <result column="end_date" property="endDate" jdbcType="CHAR" />
  15. <result column="cost" property="cost" jdbcType="VARCHAR" />
  16. <result column="description" property="description" jdbcType="VARCHAR" />
  17. <result column="create_time" property="createTime" jdbcType="CHAR" />
  18. <result column="create_by" property="createBy" jdbcType="VARCHAR" />
  19. <result column="edit_time" property="editTime" jdbcType="CHAR" />
  20. <result column="edit_by" property="editBy" jdbcType="VARCHAR" />
  21. </resultMap>
  22. <sql id="Base_Column_List" >
  23. <!--
  24. WARNING - @mbggenerated
  25. This element is automatically generated by MyBatis Generator, do not modify.
  26. This element was generated on Thu Sep 15 22:05:10 CST 2022.
  27. -->
  28. id, owner, name, start_date, end_date, cost, description, create_time, create_by,
  29. edit_time, edit_by
  30. </sql>
  31. <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.String" >
  32. <!--
  33. WARNING - @mbggenerated
  34. This element is automatically generated by MyBatis Generator, do not modify.
  35. This element was generated on Thu Sep 15 22:05:10 CST 2022.
  36. -->
  37. select
  38. <include refid="Base_Column_List" />
  39. from tbl_activity
  40. where id = #{id,jdbcType=CHAR}
  41. </select>
  42. <delete id="deleteByPrimaryKey" parameterType="java.lang.String" >
  43. <!--
  44. WARNING - @mbggenerated
  45. This element is automatically generated by MyBatis Generator, do not modify.
  46. This element was generated on Thu Sep 15 22:05:10 CST 2022.
  47. -->
  48. delete from tbl_activity
  49. where id = #{id,jdbcType=CHAR}
  50. </delete>
  51. <insert id="insertActivity" parameterType="com.bjpowernode.crm.workbench.domain.Activity" >
  52. <!--
  53. WARNING - @mbggenerated
  54. This element is automatically generated by MyBatis Generator, do not modify.
  55. This element was generated on Thu Sep 15 22:05:10 CST 2022.
  56. -->
  57. insert into tbl_activity (id, owner, name, start_date,
  58. end_date, cost, description,
  59. create_time, create_by)
  60. values (#{id,jdbcType=CHAR}, #{owner,jdbcType=CHAR}, #{name,jdbcType=VARCHAR}, #{startDate,jdbcType=CHAR},
  61. #{endDate,jdbcType=CHAR}, #{cost,jdbcType=VARCHAR}, #{description,jdbcType=VARCHAR},
  62. #{createTime,jdbcType=CHAR}, #{createBy,jdbcType=VARCHAR})
  63. </insert>
  64. <insert id="insert" parameterType="com.bjpowernode.crm.workbench.domain.Activity" >
  65. <!--
  66. WARNING - @mbggenerated
  67. This element is automatically generated by MyBatis Generator, do not modify.
  68. This element was generated on Thu Sep 15 22:05:10 CST 2022.
  69. -->
  70. insert into tbl_activity
  71. <trim prefix="(" suffix=")" suffixOverrides="," >
  72. <if test="id != null" >
  73. id,
  74. </if>
  75. <if test="owner != null" >
  76. owner,
  77. </if>
  78. <if test="name != null" >
  79. name,
  80. </if>
  81. <if test="startDate != null" >
  82. start_date,
  83. </if>
  84. <if test="endDate != null" >
  85. end_date,
  86. </if>
  87. <if test="cost != null" >
  88. cost,
  89. </if>
  90. <if test="description != null" >
  91. description,
  92. </if>
  93. <if test="createTime != null" >
  94. create_time,
  95. </if>
  96. <if test="createBy != null" >
  97. create_by,
  98. </if>
  99. <if test="editTime != null" >
  100. edit_time,
  101. </if>
  102. <if test="editBy != null" >
  103. edit_by,
  104. </if>
  105. </trim>
  106. <trim prefix="values (" suffix=")" suffixOverrides="," >
  107. <if test="id != null" >
  108. #{id,jdbcType=CHAR},
  109. </if>
  110. <if test="owner != null" >
  111. #{owner,jdbcType=CHAR},
  112. </if>
  113. <if test="name != null" >
  114. #{name,jdbcType=VARCHAR},
  115. </if>
  116. <if test="startDate != null" >
  117. #{startDate,jdbcType=CHAR},
  118. </if>
  119. <if test="endDate != null" >
  120. #{endDate,jdbcType=CHAR},
  121. </if>
  122. <if test="cost != null" >
  123. #{cost,jdbcType=VARCHAR},
  124. </if>
  125. <if test="description != null" >
  126. #{description,jdbcType=VARCHAR},
  127. </if>
  128. <if test="createTime != null" >
  129. #{createTime,jdbcType=CHAR},
  130. </if>
  131. <if test="createBy != null" >
  132. #{createBy,jdbcType=VARCHAR},
  133. </if>
  134. <if test="editTime != null" >
  135. #{editTime,jdbcType=CHAR},
  136. </if>
  137. <if test="editBy != null" >
  138. #{editBy,jdbcType=VARCHAR},
  139. </if>
  140. </trim>
  141. </insert>
  142. <update id="updateByPrimaryKeySelective" parameterType="com.bjpowernode.crm.workbench.domain.Activity" >
  143. <!--
  144. WARNING - @mbggenerated
  145. This element is automatically generated by MyBatis Generator, do not modify.
  146. This element was generated on Thu Sep 15 22:05:10 CST 2022.
  147. -->
  148. update tbl_activity
  149. <set >
  150. <if test="owner != null" >
  151. owner = #{owner,jdbcType=CHAR},
  152. </if>
  153. <if test="name != null" >
  154. name = #{name,jdbcType=VARCHAR},
  155. </if>
  156. <if test="startDate != null" >
  157. start_date = #{startDate,jdbcType=CHAR},
  158. </if>
  159. <if test="endDate != null" >
  160. end_date = #{endDate,jdbcType=CHAR},
  161. </if>
  162. <if test="cost != null" >
  163. cost = #{cost,jdbcType=VARCHAR},
  164. </if>
  165. <if test="description != null" >
  166. description = #{description,jdbcType=VARCHAR},
  167. </if>
  168. <if test="createTime != null" >
  169. create_time = #{createTime,jdbcType=CHAR},
  170. </if>
  171. <if test="createBy != null" >
  172. create_by = #{createBy,jdbcType=VARCHAR},
  173. </if>
  174. <if test="editTime != null" >
  175. edit_time = #{editTime,jdbcType=CHAR},
  176. </if>
  177. <if test="editBy != null" >
  178. edit_by = #{editBy,jdbcType=VARCHAR},
  179. </if>
  180. </set>
  181. where id = #{id,jdbcType=CHAR}
  182. </update>
  183. <update id="updateByPrimaryKey" parameterType="com.bjpowernode.crm.workbench.domain.Activity" >
  184. <!--
  185. WARNING - @mbggenerated
  186. This element is automatically generated by MyBatis Generator, do not modify.
  187. This element was generated on Thu Sep 15 22:05:10 CST 2022.
  188. -->
  189. update tbl_activity
  190. set owner = #{owner,jdbcType=CHAR},
  191. name = #{name,jdbcType=VARCHAR},
  192. start_date = #{startDate,jdbcType=CHAR},
  193. end_date = #{endDate,jdbcType=CHAR},
  194. cost = #{cost,jdbcType=VARCHAR},
  195. description = #{description,jdbcType=VARCHAR},
  196. create_time = #{createTime,jdbcType=CHAR},
  197. create_by = #{createBy,jdbcType=VARCHAR},
  198. edit_time = #{editTime,jdbcType=CHAR},
  199. edit_by = #{editBy,jdbcType=VARCHAR}
  200. where id = #{id,jdbcType=CHAR}
  201. </update>
  202. <select id="selectActivityByConditionForPage" parameterType="map" resultMap="BaseResultMap">
  203. select a.id,u1.name as owner,a.name,a.start_date,a.end_date,a.cost,a.description,a.create_time,
  204. u2.name as create_by,a.edit_time,u3.name as edit_by
  205. from tbl_activity a
  206. join tbl_user u1 on a.owner=u1.id
  207. join tbl_user u2 on a.create_by=u2.id
  208. left join tbl_user u3 on a.edit_by=u3.id
  209. <where>
  210. <if test="name!=null and name!=''">
  211. and a.name like '%' #{name} '%'
  212. </if>
  213. <if test="owner!=null and owner!=''">
  214. and u1.name like '%' #{owner} '%'
  215. </if>
  216. <if test="startDate!=null and startDate!=''">
  217. and a.start_date&gt;=#{startDate}
  218. </if>
  219. <if test="endDate!=null and endDate!=''">
  220. and a.end_date&lt;=#{endDate}
  221. </if>
  222. </where>
  223. order by a.create_time desc
  224. limit #{beginNo},#{pageSize}
  225. </select>
  226. <select id="selectCountOfActivityByCondition" parameterType="map" resultType="int">
  227. select count(*)
  228. from tbl_activity a
  229. join tbl_user u1 on a.owner=u1.id
  230. join tbl_user u2 on a.create_by=u2.id
  231. left join tbl_user u3 on a.edit_by=u3.id
  232. <where>
  233. <if test="name!=null and name!=''">
  234. and a.name like '%' #{name} '%'
  235. </if>
  236. <if test="owner!=null and owner!=''">
  237. and u1.name like '%' #{owner} '%'
  238. </if>
  239. <if test="startDate!=null and startDate!=''">
  240. and a.start_date&gt;=#{startDate}
  241. </if>
  242. <if test="endDate!=null and endDate!=''">
  243. and a.end_date&lt;=#{endDate}
  244. </if>
  245. </where>
  246. </select>
  247. </mapper>

2.service层

image.png

  1. public interface ActivityService {
  2. int saveCreateActivity(Activity activity);
  3. List<Activity> queryActivityByConditionForPage(Map<String,Object> map);
  4. int queryCountOfActivityByCondition(Map<String,Object>map);
  5. }
  1. @Service("activityService")
  2. public class ActivityServiceImpl implements ActivityService {
  3. @Autowired
  4. private ActivityMapper activityMapper;
  5. @Override
  6. public int saveCreateActivity(Activity activity) {
  7. return activityMapper.insertActivity(activity);
  8. }
  9. @Override
  10. public List<Activity> queryActivityByConditionForPage(Map<String, Object> map) {
  11. return activityMapper.selectActivityByConditionForPage(map);
  12. }
  13. @Override
  14. public int queryCountOfActivityByCondition(Map<String, Object> map) {
  15. return activityMapper.selectCountOfActivityByCondition(map);
  16. }
  17. }

3.controller层

image.png

  1. @Controller
  2. public class ActivityController {
  3. @Autowired
  4. private UserService userService;
  5. @Autowired
  6. private ActivityService activityService;
  7. @RequestMapping("/workbench/activity/index.do")
  8. public String index(HttpServletRequest request){
  9. //调用service方法,查询所有的用户
  10. List<User> userList=userService.queryAllUsers();
  11. //把数据保存到request中
  12. request.setAttribute("userList",userList);
  13. //请求转发到市场活动的主页面
  14. return "workbench/activity/index";
  15. }
  16. @RequestMapping("/workbench/activity/saveCreateActivity.do")
  17. @ResponseBody
  18. public Object saveCreateActivity(Activity activity, HttpSession session){
  19. User user=(User) session.getAttribute(Contants.SESSION_USER);
  20. //封装参数
  21. activity.setId(UUIDUtils.getUUID());
  22. activity.setCreateTime(DateUtils.formateDateTime(new Date()));
  23. activity.setCreateBy(user.getId());
  24. ReturnObject returnObject = new ReturnObject();
  25. try{
  26. int ret=activityService.saveCreateActivity(activity);
  27. if(ret>0){
  28. returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
  29. }else {
  30. returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
  31. returnObject.setMessage("系统忙,请稍后重试...");
  32. }
  33. }catch (Exception e){
  34. e.printStackTrace();
  35. returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
  36. returnObject.setMessage("系统忙,请稍后重试...");
  37. }
  38. //调用service层方法,保存创建的市场活动
  39. return returnObject;
  40. }
  41. @RequestMapping("/workbench/activity/queryActivityByConditionForPage.do")
  42. @ResponseBody
  43. public Object queryActivityByConditionForPage(String name,String owner,String startDate,String endDate,
  44. int pageNo,int pageSize){
  45. //封装参数
  46. Map<String,Object> map=new HashMap<>();
  47. map.put("name",name);
  48. map.put("owner",owner);
  49. map.put("startDate",startDate);
  50. map.put("endDate",endDate);
  51. map.put("beginNo",(pageNo-1)*pageSize);
  52. map.put("pageSize",pageSize);
  53. //调用service层方法,查询数据
  54. List<Activity> activityList=activityService.queryActivityByConditionForPage(map);
  55. int totalRows=activityService.queryCountOfActivityByCondition(map);
  56. //根据查询结果结果,生成响应信息
  57. Map<String,Object> retMap=new HashMap<>();
  58. retMap.put("activityList",activityList);
  59. retMap.put("totalRows",totalRows);
  60. return retMap;
  61. }
  62. }

4.前端页面

image.png

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3. <%
  4. String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
  5. %>
  6. <html>
  7. <head>
  8. <base href="<%=basePath%>">
  9. <meta charset="UTF-8">
  10. <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
  11. <link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
  12. <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
  13. <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
  14. <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
  15. <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
  16. <script type="text/javascript">
  17. $(function(){
  18. //给"创建"按钮添加单击事件
  19. $("#createActivityBtn").click(function () {
  20. //初始化工作
  21. //重置表单
  22. $("#createActivityForm").get(0).reset();
  23. //弹出创建市场活动的模态窗口
  24. $("#createActivityModal").modal("show");
  25. });
  26. //给"保存"按钮添加单击事件
  27. $("#saveCreateActivityBtn").click(function () {
  28. //收集参数
  29. var owner=$("#create-marketActivityOwner").val();
  30. var name=$.trim($("#create-marketActivityName").val());
  31. var startDate=$("#create-startDate").val();
  32. var endDate=$("#create-endDate").val();
  33. var cost=$.trim($("#create-cost").val());
  34. var description=$.trim($("#create-description").val());
  35. //表单验证
  36. if(owner==""){
  37. alert("所有者不能为空");
  38. return;
  39. }
  40. if(name==""){
  41. alert("名称不能为空");
  42. return;
  43. }
  44. if(startDate!=""&&endDate!=""){
  45. //使用字符串的大小代替日期的大小
  46. if(endDate<startDate){
  47. alert("结束日期不能比开始日期小");
  48. return;
  49. }
  50. }
  51. /*
  52. 正则表达式:
  53. 1,语言,语法:定义字符串的匹配模式,可以用来判断指定的具体字符串是否符合匹配模式。
  54. 2,语法通则:
  55. 1)//:在js中定义一个正则表达式. var regExp=/...../;
  56. 2)^:匹配字符串的开头位置
  57. $: 匹配字符串的结尾
  58. 3)[]:匹配指定字符集中的一位字符。 var regExp=/^[abc]$/;
  59. var regExp=/^[a-z0-9]$/;
  60. 4){}:匹配次数.var regExp=/^[abc]{5}$/;
  61. {m}:匹配m此
  62. {m,n}:匹配m次到n次
  63. {m,}:匹配m次或者更多次
  64. 5)特殊符号:
  65. \d:匹配一位数字,相当于[0-9]
  66. \D:匹配一位非数字
  67. \w:匹配所有字符,包括字母、数字、下划线。
  68. \W:匹配非字符,除了字母、数字、下划线之外的字符。
  69. *:匹配0次或者多次,相当于{0,}
  70. +:匹配1次或者多次,相当于{1,}
  71. ?:匹配0次或者1次,相当于{0,1}
  72. */
  73. var regExp=/^(([1-9]\d*)|0)$/;
  74. if(!regExp.test(cost)){
  75. alert("成本只能为非负整数");
  76. return;
  77. }
  78. //发送请求
  79. $.ajax({
  80. url:'workbench/activity/saveCreateActivity.do',
  81. data:{
  82. owner:owner,
  83. name:name,
  84. startDate:startDate,
  85. endDate:endDate,
  86. cost:cost,
  87. description:description
  88. },
  89. type:'post',
  90. dataType:'json',
  91. success:function (data) {
  92. if(data.code=="1"){
  93. //关闭模态窗口
  94. $("#createActivityModal").modal("hide");
  95. //刷新市场活动列,显示第一页数据,保持每页显示条数不变(保留)
  96. }else{
  97. //提示信息
  98. alert(data.message);
  99. //模态窗口不关闭
  100. $("#createActivityModal").modal("show");//可以不写。
  101. }
  102. }
  103. });
  104. });
  105. //当容器加载完成之后,对容器调用工具函数
  106. //$("input[name='mydate']").datetimepicker({
  107. $(".mydate").datetimepicker({
  108. language:'zh-CN', //语言
  109. format:'yyyy-mm-dd',//日期的格式
  110. minView:'month', //可以选择的最小视图
  111. initialDate:new Date(),//初始化显示的日期
  112. autoclose:true,//设置选择完日期或者时间之后,日否自动关闭日历
  113. todayBtn:true,//设置是否显示"今天"按钮,默认是false
  114. clearBtn:true//设置是否显示"清空"按钮,默认是false
  115. });
  116. //当市场活动主页面加载完成,查询所有数据的第一页以及所有数据的总条数,默认每页显示10条
  117. queryActivityByConditionForPage();
  118. //给"查询"按钮添加单击事件
  119. $("#queryActivityBtn").click(function () {
  120. //查询所有符合条件数据的第一页以及所有符合条件数据的总条数;
  121. queryActivityByConditionForPage();
  122. });
  123. });
  124. function queryActivityByConditionForPage() {
  125. //收集参数
  126. var name=$("#query-name").val();
  127. var owner=$("#query-owner").val();
  128. var startDate=$("#query-startDate").val();
  129. var endDate=$("#query-endDate").val();
  130. var pageNo=1;
  131. var pageSize=10;
  132. //发送请求
  133. $.ajax({
  134. url:'workbench/activity/queryActivityByConditionForPage.do',
  135. data:{
  136. name:name,
  137. owner:owner,
  138. startDate:startDate,
  139. endDate:endDate,
  140. pageNo:pageNo,
  141. pageSize:pageSize
  142. },
  143. type:'post',
  144. dataType:'json',
  145. success:function (data) {
  146. //显示总条数
  147. $("#totalRowsB").text(data.totalRows);
  148. //显示市场活动的列表
  149. //遍历activityList,拼接所有行数据
  150. var htmlStr="";
  151. $.each(data.activityList,function (index,obj) {
  152. htmlStr+="<tr class=\"active\">";
  153. htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";
  154. htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">"+obj.name+"</a></td>";
  155. htmlStr+="<td>"+obj.owner+"</td>";
  156. htmlStr+="<td>"+obj.startDate+"</td>";
  157. htmlStr+="<td>"+obj.endDate+"</td>";
  158. htmlStr+="</tr>";
  159. });
  160. $("#tBody").html(htmlStr);
  161. }
  162. });
  163. }
  164. </script>
  165. </head>
  166. <body>
  167. <!-- 创建市场活动的模态窗口 -->
  168. <div class="modal fade" id="createActivityModal" role="dialog">
  169. <div class="modal-dialog" role="document" style="width: 85%;">
  170. <div class="modal-content">
  171. <div class="modal-header">
  172. <button type="button" class="close" data-dismiss="modal">
  173. <span aria-hidden="true">×</span>
  174. </button>
  175. <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
  176. </div>
  177. <div class="modal-body">
  178. <form id="createActivityForm" class="form-horizontal" role="form">
  179. <div class="form-group">
  180. <label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
  181. <div class="col-sm-10" style="width: 300px;">
  182. <select class="form-control" id="create-marketActivityOwner">
  183. <c:forEach items="${userList}" var="u">
  184. <option value="${u.id}">${u.name}</option>
  185. </c:forEach>
  186. </select>
  187. </div>
  188. <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
  189. <div class="col-sm-10" style="width: 300px;">
  190. <input type="text" class="form-control" id="create-marketActivityName">
  191. </div>
  192. </div>
  193. <div class="form-group">
  194. <label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
  195. <div class="col-sm-10" style="width: 300px;">
  196. <input type="text" class="form-control mydate" name="mydate" id="create-startDate" readonly>
  197. </div>
  198. <label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
  199. <div class="col-sm-10" style="width: 300px;">
  200. <input type="text" class="form-control mydate" name="mydate" id="create-endDate" readonly>
  201. </div>
  202. </div>
  203. <div class="form-group">
  204. <label for="create-cost" class="col-sm-2 control-label">成本</label>
  205. <div class="col-sm-10" style="width: 300px;">
  206. <input type="text" class="form-control" id="create-cost">
  207. </div>
  208. </div>
  209. <div class="form-group">
  210. <label for="create-description" class="col-sm-2 control-label">描述</label>
  211. <div class="col-sm-10" style="width: 81%;">
  212. <textarea class="form-control" rows="3" id="create-description"></textarea>
  213. </div>
  214. </div>
  215. </form>
  216. </div>
  217. <div class="modal-footer">
  218. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  219. <button type="button" class="btn btn-primary" id="saveCreateActivityBtn">保存</button>
  220. </div>
  221. </div>
  222. </div>
  223. </div>
  224. <!-- 修改市场活动的模态窗口 -->
  225. <div class="modal fade" id="editActivityModal" role="dialog">
  226. <div class="modal-dialog" role="document" style="width: 85%;">
  227. <div class="modal-content">
  228. <div class="modal-header">
  229. <button type="button" class="close" data-dismiss="modal">
  230. <span aria-hidden="true">×</span>
  231. </button>
  232. <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
  233. </div>
  234. <div class="modal-body">
  235. <form class="form-horizontal" role="form">
  236. <div class="form-group">
  237. <label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
  238. <div class="col-sm-10" style="width: 300px;">
  239. <select class="form-control" id="edit-marketActivityOwner">
  240. <c:forEach items="${userList}" var="u">
  241. <option value="${u.id}">${u.name}</option>
  242. </c:forEach>
  243. </select>
  244. </div>
  245. <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
  246. <div class="col-sm-10" style="width: 300px;">
  247. <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
  248. </div>
  249. </div>
  250. <div class="form-group">
  251. <label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
  252. <div class="col-sm-10" style="width: 300px;">
  253. <input type="text" class="form-control" id="edit-startTime" value="2020-10-10">
  254. </div>
  255. <label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
  256. <div class="col-sm-10" style="width: 300px;">
  257. <input type="text" class="form-control" id="edit-endTime" value="2020-10-20">
  258. </div>
  259. </div>
  260. <div class="form-group">
  261. <label for="edit-cost" class="col-sm-2 control-label">成本</label>
  262. <div class="col-sm-10" style="width: 300px;">
  263. <input type="text" class="form-control" id="edit-cost" value="5,000">
  264. </div>
  265. </div>
  266. <div class="form-group">
  267. <label for="edit-describe" class="col-sm-2 control-label">描述</label>
  268. <div class="col-sm-10" style="width: 81%;">
  269. <textarea class="form-control" rows="3" id="edit-describe">市场活动Marketing,是指品牌主办或参与的展览会议与公关市场活动,包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
  270. </div>
  271. </div>
  272. </form>
  273. </div>
  274. <div class="modal-footer">
  275. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  276. <button type="button" class="btn btn-primary" data-dismiss="modal">更新</button>
  277. </div>
  278. </div>
  279. </div>
  280. </div>
  281. <!-- 导入市场活动的模态窗口 -->
  282. <div class="modal fade" id="importActivityModal" role="dialog">
  283. <div class="modal-dialog" role="document" style="width: 85%;">
  284. <div class="modal-content">
  285. <div class="modal-header">
  286. <button type="button" class="close" data-dismiss="modal">
  287. <span aria-hidden="true">×</span>
  288. </button>
  289. <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
  290. </div>
  291. <div class="modal-body" style="height: 350px;">
  292. <div style="position: relative;top: 20px; left: 50px;">
  293. 请选择要上传的文件:<small style="color: gray;">[仅支持.xls]</small>
  294. </div>
  295. <div style="position: relative;top: 40px; left: 50px;">
  296. <input type="file" id="activityFile">
  297. </div>
  298. <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
  299. <h3>重要提示</h3>
  300. <ul>
  301. <li>操作仅针对Excel,仅支持后缀名为XLS的文件。</li>
  302. <li>给定文件的第一行将视为字段名。</li>
  303. <li>请确认您的文件大小不超过5MB。</li>
  304. <li>日期值以文本形式保存,必须符合yyyy-MM-dd格式。</li>
  305. <li>日期时间以文本形式保存,必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
  306. <li>默认情况下,字符编码是UTF-8 (统一码),请确保您导入的文件使用的是正确的字符编码方式。</li>
  307. <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
  308. </ul>
  309. </div>
  310. </div>
  311. <div class="modal-footer">
  312. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  313. <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
  314. </div>
  315. </div>
  316. </div>
  317. </div>
  318. <div>
  319. <div style="position: relative; left: 10px; top: -10px;">
  320. <div class="page-header">
  321. <h3>市场活动列表</h3>
  322. </div>
  323. </div>
  324. </div>
  325. <div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
  326. <div style="width: 100%; position: absolute;top: 5px; left: 10px;">
  327. <div class="btn-toolbar" role="toolbar" style="height: 80px;">
  328. <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
  329. <div class="form-group">
  330. <div class="input-group">
  331. <div class="input-group-addon">名称</div>
  332. <input class="form-control" type="text" id="query-name">
  333. </div>
  334. </div>
  335. <div class="form-group">
  336. <div class="input-group">
  337. <div class="input-group-addon">所有者</div>
  338. <input class="form-control" type="text" id="query-owner">
  339. </div>
  340. </div>
  341. <div class="form-group">
  342. <div class="input-group">
  343. <div class="input-group-addon">开始日期</div>
  344. <input class="form-control" type="text" id="query-startDate" />
  345. </div>
  346. </div>
  347. <div class="form-group">
  348. <div class="input-group">
  349. <div class="input-group-addon">结束日期</div>
  350. <input class="form-control" type="text" id="query-endDate">
  351. </div>
  352. </div>
  353. <button type="button" class="btn btn-default" id="queryActivityBtn">查询</button>
  354. </form>
  355. </div>
  356. <div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
  357. <div class="btn-group" style="position: relative; top: 18%;">
  358. <button type="button" class="btn btn-primary" id="createActivityBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
  359. <button type="button" class="btn btn-default" data-toggle="modal" data-target="#editActivityModal"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
  360. <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
  361. </div>
  362. <div class="btn-group" style="position: relative; top: 18%;">
  363. <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal" ><span class="glyphicon glyphicon-import"></span> 上传列表数据(导入)</button>
  364. <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据(批量导出)</button>
  365. <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据(选择导出)</button>
  366. </div>
  367. </div>
  368. <div style="position: relative;top: 10px;">
  369. <table class="table table-hover">
  370. <thead>
  371. <tr style="color: #B3B3B3;">
  372. <td><input type="checkbox" /></td>
  373. <td>名称</td>
  374. <td>所有者</td>
  375. <td>开始日期</td>
  376. <td>结束日期</td>
  377. </tr>
  378. </thead>
  379. <tbody id="tBody">
  380. <%--<tr class="active">
  381. <td><input type="checkbox" /></td>
  382. <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td>
  383. <td>zhangsan</td>
  384. <td>2020-10-10</td>
  385. <td>2020-10-20</td>
  386. </tr>
  387. <tr class="active">
  388. <td><input type="checkbox" /></td>
  389. <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td>
  390. <td>zhangsan</td>
  391. <td>2020-10-10</td>
  392. <td>2020-10-20</td>
  393. </tr>--%>
  394. </tbody>
  395. </table>
  396. </div>
  397. <div style="height: 50px; position: relative;top: 30px;">
  398. <div>
  399. <button type="button" class="btn btn-default" style="cursor: default;"><b id="totalRowsB">50</b>条记录</button>
  400. </div>
  401. <div class="btn-group" style="position: relative;top: -34px; left: 110px;">
  402. <button type="button" class="btn btn-default" style="cursor: default;">显示</button>
  403. <div class="btn-group">
  404. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  405. 10
  406. <span class="caret"></span>
  407. </button>
  408. <ul class="dropdown-menu" role="menu">
  409. <li><a href="#">20</a></li>
  410. <li><a href="#">30</a></li>
  411. </ul>
  412. </div>
  413. <button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
  414. </div>
  415. <div style="position: relative;top: -88px; left: 285px;">
  416. <nav>
  417. <ul class="pagination">
  418. <li class="disabled"><a href="#">首页</a></li>
  419. <li class="disabled"><a href="#">上一页</a></li>
  420. <li class="active"><a href="#">1</a></li>
  421. <li><a href="#">2</a></li>
  422. <li><a href="#">3</a></li>
  423. <li><a href="#">4</a></li>
  424. <li><a href="#">5</a></li>
  425. <li><a href="#">下一页</a></li>
  426. <li class="disabled"><a href="#">末页</a></li>
  427. </ul>
  428. </nav>
  429. </div>
  430. </div>
  431. </div>
  432. </div>
  433. </body>
  434. </html>

测试页面
image.png

二、实现翻页功能

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

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3. <%
  4. String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
  5. %>
  6. <html>
  7. <head>
  8. <base href="<%=basePath%>">
  9. <meta charset="UTF-8">
  10. <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
  11. <link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
  12. <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
  13. <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
  14. <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
  15. <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
  16. <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
  17. <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
  18. <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
  19. <script type="text/javascript">
  20. $(function(){
  21. //给"创建"按钮添加单击事件
  22. $("#createActivityBtn").click(function () {
  23. //初始化工作
  24. //重置表单
  25. $("#createActivityForm").get(0).reset();
  26. //弹出创建市场活动的模态窗口
  27. $("#createActivityModal").modal("show");
  28. });
  29. //给"保存"按钮添加单击事件
  30. $("#saveCreateActivityBtn").click(function () {
  31. //收集参数
  32. var owner=$("#create-marketActivityOwner").val();
  33. var name=$.trim($("#create-marketActivityName").val());
  34. var startDate=$("#create-startDate").val();
  35. var endDate=$("#create-endDate").val();
  36. var cost=$.trim($("#create-cost").val());
  37. var description=$.trim($("#create-description").val());
  38. //表单验证
  39. if(owner==""){
  40. alert("所有者不能为空");
  41. return;
  42. }
  43. if(name==""){
  44. alert("名称不能为空");
  45. return;
  46. }
  47. if(startDate!=""&&endDate!=""){
  48. //使用字符串的大小代替日期的大小
  49. if(endDate<startDate){
  50. alert("结束日期不能比开始日期小");
  51. return;
  52. }
  53. }
  54. /*
  55. 正则表达式:
  56. 1,语言,语法:定义字符串的匹配模式,可以用来判断指定的具体字符串是否符合匹配模式。
  57. 2,语法通则:
  58. 1)//:在js中定义一个正则表达式. var regExp=/...../;
  59. 2)^:匹配字符串的开头位置
  60. $: 匹配字符串的结尾
  61. 3)[]:匹配指定字符集中的一位字符。 var regExp=/^[abc]$/;
  62. var regExp=/^[a-z0-9]$/;
  63. 4){}:匹配次数.var regExp=/^[abc]{5}$/;
  64. {m}:匹配m此
  65. {m,n}:匹配m次到n次
  66. {m,}:匹配m次或者更多次
  67. 5)特殊符号:
  68. \d:匹配一位数字,相当于[0-9]
  69. \D:匹配一位非数字
  70. \w:匹配所有字符,包括字母、数字、下划线。
  71. \W:匹配非字符,除了字母、数字、下划线之外的字符。
  72. *:匹配0次或者多次,相当于{0,}
  73. +:匹配1次或者多次,相当于{1,}
  74. ?:匹配0次或者1次,相当于{0,1}
  75. */
  76. var regExp=/^(([1-9]\d*)|0)$/;
  77. if(!regExp.test(cost)){
  78. alert("成本只能为非负整数");
  79. return;
  80. }
  81. //发送请求
  82. $.ajax({
  83. url:'workbench/activity/saveCreateActivity.do',
  84. data:{
  85. owner:owner,
  86. name:name,
  87. startDate:startDate,
  88. endDate:endDate,
  89. cost:cost,
  90. description:description
  91. },
  92. type:'post',
  93. dataType:'json',
  94. success:function (data) {
  95. if(data.code=="1"){
  96. //关闭模态窗口
  97. $("#createActivityModal").modal("hide");
  98. //刷新市场活动列,显示第一页数据,保持每页显示条数不变
  99. queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
  100. }else{
  101. //提示信息
  102. alert(data.message);
  103. //模态窗口不关闭
  104. $("#createActivityModal").modal("show");//可以不写。
  105. }
  106. }
  107. });
  108. });
  109. //当容器加载完成之后,对容器调用工具函数
  110. //$("input[name='mydate']").datetimepicker({
  111. $(".mydate").datetimepicker({
  112. language:'zh-CN', //语言
  113. format:'yyyy-mm-dd',//日期的格式
  114. minView:'month', //可以选择的最小视图
  115. initialDate:new Date(),//初始化显示的日期
  116. autoclose:true,//设置选择完日期或者时间之后,日否自动关闭日历
  117. todayBtn:true,//设置是否显示"今天"按钮,默认是false
  118. clearBtn:true//设置是否显示"清空"按钮,默认是false
  119. });
  120. //当市场活动主页面加载完成,查询所有数据的第一页以及所有数据的总条数,默认每页显示10条
  121. queryActivityByConditionForPage(1,10);
  122. //给"查询"按钮添加单击事件
  123. $("#queryActivityBtn").click(function () {
  124. //查询所有符合条件数据的第一页以及所有符合条件数据的总条数;
  125. queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
  126. });
  127. });
  128. function queryActivityByConditionForPage(pageNo,pageSize) {
  129. //收集参数
  130. var name=$("#query-name").val();
  131. var owner=$("#query-owner").val();
  132. var startDate=$("#query-startDate").val();
  133. var endDate=$("#query-endDate").val();
  134. //var pageNo=1;
  135. //var pageSize=10;
  136. //发送请求
  137. $.ajax({
  138. url:'workbench/activity/queryActivityByConditionForPage.do',
  139. data:{
  140. name:name,
  141. owner:owner,
  142. startDate:startDate,
  143. endDate:endDate,
  144. pageNo:pageNo,
  145. pageSize:pageSize
  146. },
  147. type:'post',
  148. dataType:'json',
  149. success:function (data) {
  150. //显示总条数
  151. //$("#totalRowsB").text(data.totalRows);
  152. //显示市场活动的列表
  153. //遍历activityList,拼接所有行数据
  154. var htmlStr="";
  155. $.each(data.activityList,function (index,obj) {
  156. htmlStr+="<tr class=\"active\">";
  157. htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";
  158. htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">"+obj.name+"</a></td>";
  159. htmlStr+="<td>"+obj.owner+"</td>";
  160. htmlStr+="<td>"+obj.startDate+"</td>";
  161. htmlStr+="<td>"+obj.endDate+"</td>";
  162. htmlStr+="</tr>";
  163. });
  164. $("#tBody").html(htmlStr);
  165. //计算总页数
  166. var totalPages=1;
  167. if(data.totalRows%pageSize==0){
  168. totalPages=data.totalRows/pageSize;
  169. }else{
  170. totalPages=parseInt(data.totalRows/pageSize)+1;
  171. }
  172. //对容器调用bs_pagination工具函数,显示翻页信息
  173. $("#demo_pag1").bs_pagination({
  174. currentPage:pageNo,//当前页号,相当于pageNo
  175. rowsPerPage:pageSize,//每页显示条数,相当于pageSize
  176. totalRows:data.totalRows,//总条数
  177. totalPages: totalPages, //总页数,必填参数.
  178. visiblePageLinks:5,//最多可以显示的卡片数
  179. showGoToPage:true,//是否显示"跳转到"部分,默认true--显示
  180. showRowsPerPage:true,//是否显示"每页显示条数"部分。默认true--显示
  181. showRowsInfo:true,//是否显示记录的信息,默认true--显示
  182. //用户每次切换页号,都自动触发本函数;
  183. //每次返回切换页号之后的pageNo和pageSize
  184. onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked
  185. //js代码
  186. //alert(pageObj.currentPage);
  187. //alert(pageObj.rowsPerPage);
  188. queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
  189. }
  190. });
  191. }
  192. });
  193. }
  194. </script>
  195. </head>
  196. <body>
  197. <!-- 创建市场活动的模态窗口 -->
  198. <div class="modal fade" id="createActivityModal" role="dialog">
  199. <div class="modal-dialog" role="document" style="width: 85%;">
  200. <div class="modal-content">
  201. <div class="modal-header">
  202. <button type="button" class="close" data-dismiss="modal">
  203. <span aria-hidden="true">×</span>
  204. </button>
  205. <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
  206. </div>
  207. <div class="modal-body">
  208. <form id="createActivityForm" class="form-horizontal" role="form">
  209. <div class="form-group">
  210. <label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
  211. <div class="col-sm-10" style="width: 300px;">
  212. <select class="form-control" id="create-marketActivityOwner">
  213. <c:forEach items="${userList}" var="u">
  214. <option value="${u.id}">${u.name}</option>
  215. </c:forEach>
  216. </select>
  217. </div>
  218. <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
  219. <div class="col-sm-10" style="width: 300px;">
  220. <input type="text" class="form-control" id="create-marketActivityName">
  221. </div>
  222. </div>
  223. <div class="form-group">
  224. <label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
  225. <div class="col-sm-10" style="width: 300px;">
  226. <input type="text" class="form-control mydate" name="mydate" id="create-startDate" readonly>
  227. </div>
  228. <label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
  229. <div class="col-sm-10" style="width: 300px;">
  230. <input type="text" class="form-control mydate" name="mydate" id="create-endDate" readonly>
  231. </div>
  232. </div>
  233. <div class="form-group">
  234. <label for="create-cost" class="col-sm-2 control-label">成本</label>
  235. <div class="col-sm-10" style="width: 300px;">
  236. <input type="text" class="form-control" id="create-cost">
  237. </div>
  238. </div>
  239. <div class="form-group">
  240. <label for="create-description" class="col-sm-2 control-label">描述</label>
  241. <div class="col-sm-10" style="width: 81%;">
  242. <textarea class="form-control" rows="3" id="create-description"></textarea>
  243. </div>
  244. </div>
  245. </form>
  246. </div>
  247. <div class="modal-footer">
  248. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  249. <button type="button" class="btn btn-primary" id="saveCreateActivityBtn">保存</button>
  250. </div>
  251. </div>
  252. </div>
  253. </div>
  254. <!-- 修改市场活动的模态窗口 -->
  255. <div class="modal fade" id="editActivityModal" role="dialog">
  256. <div class="modal-dialog" role="document" style="width: 85%;">
  257. <div class="modal-content">
  258. <div class="modal-header">
  259. <button type="button" class="close" data-dismiss="modal">
  260. <span aria-hidden="true">×</span>
  261. </button>
  262. <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
  263. </div>
  264. <div class="modal-body">
  265. <form class="form-horizontal" role="form">
  266. <div class="form-group">
  267. <label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
  268. <div class="col-sm-10" style="width: 300px;">
  269. <select class="form-control" id="edit-marketActivityOwner">
  270. <c:forEach items="${userList}" var="u">
  271. <option value="${u.id}">${u.name}</option>
  272. </c:forEach>
  273. </select>
  274. </div>
  275. <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
  276. <div class="col-sm-10" style="width: 300px;">
  277. <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
  278. </div>
  279. </div>
  280. <div class="form-group">
  281. <label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
  282. <div class="col-sm-10" style="width: 300px;">
  283. <input type="text" class="form-control" id="edit-startTime" value="2020-10-10">
  284. </div>
  285. <label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
  286. <div class="col-sm-10" style="width: 300px;">
  287. <input type="text" class="form-control" id="edit-endTime" value="2020-10-20">
  288. </div>
  289. </div>
  290. <div class="form-group">
  291. <label for="edit-cost" class="col-sm-2 control-label">成本</label>
  292. <div class="col-sm-10" style="width: 300px;">
  293. <input type="text" class="form-control" id="edit-cost" value="5,000">
  294. </div>
  295. </div>
  296. <div class="form-group">
  297. <label for="edit-describe" class="col-sm-2 control-label">描述</label>
  298. <div class="col-sm-10" style="width: 81%;">
  299. <textarea class="form-control" rows="3" id="edit-describe">市场活动Marketing,是指品牌主办或参与的展览会议与公关市场活动,包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
  300. </div>
  301. </div>
  302. </form>
  303. </div>
  304. <div class="modal-footer">
  305. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  306. <button type="button" class="btn btn-primary" data-dismiss="modal">更新</button>
  307. </div>
  308. </div>
  309. </div>
  310. </div>
  311. <!-- 导入市场活动的模态窗口 -->
  312. <div class="modal fade" id="importActivityModal" role="dialog">
  313. <div class="modal-dialog" role="document" style="width: 85%;">
  314. <div class="modal-content">
  315. <div class="modal-header">
  316. <button type="button" class="close" data-dismiss="modal">
  317. <span aria-hidden="true">×</span>
  318. </button>
  319. <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
  320. </div>
  321. <div class="modal-body" style="height: 350px;">
  322. <div style="position: relative;top: 20px; left: 50px;">
  323. 请选择要上传的文件:<small style="color: gray;">[仅支持.xls]</small>
  324. </div>
  325. <div style="position: relative;top: 40px; left: 50px;">
  326. <input type="file" id="activityFile">
  327. </div>
  328. <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
  329. <h3>重要提示</h3>
  330. <ul>
  331. <li>操作仅针对Excel,仅支持后缀名为XLS的文件。</li>
  332. <li>给定文件的第一行将视为字段名。</li>
  333. <li>请确认您的文件大小不超过5MB。</li>
  334. <li>日期值以文本形式保存,必须符合yyyy-MM-dd格式。</li>
  335. <li>日期时间以文本形式保存,必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
  336. <li>默认情况下,字符编码是UTF-8 (统一码),请确保您导入的文件使用的是正确的字符编码方式。</li>
  337. <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
  338. </ul>
  339. </div>
  340. </div>
  341. <div class="modal-footer">
  342. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  343. <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
  344. </div>
  345. </div>
  346. </div>
  347. </div>
  348. <div>
  349. <div style="position: relative; left: 10px; top: -10px;">
  350. <div class="page-header">
  351. <h3>市场活动列表</h3>
  352. </div>
  353. </div>
  354. </div>
  355. <div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
  356. <div style="width: 100%; position: absolute;top: 5px; left: 10px;">
  357. <div class="btn-toolbar" role="toolbar" style="height: 80px;">
  358. <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
  359. <div class="form-group">
  360. <div class="input-group">
  361. <div class="input-group-addon">名称</div>
  362. <input class="form-control" type="text" id="query-name">
  363. </div>
  364. </div>
  365. <div class="form-group">
  366. <div class="input-group">
  367. <div class="input-group-addon">所有者</div>
  368. <input class="form-control" type="text" id="query-owner">
  369. </div>
  370. </div>
  371. <div class="form-group">
  372. <div class="input-group">
  373. <div class="input-group-addon">开始日期</div>
  374. <input class="form-control" type="text" id="query-startDate" />
  375. </div>
  376. </div>
  377. <div class="form-group">
  378. <div class="input-group">
  379. <div class="input-group-addon">结束日期</div>
  380. <input class="form-control" type="text" id="query-endDate">
  381. </div>
  382. </div>
  383. <button type="button" class="btn btn-default" id="queryActivityBtn">查询</button>
  384. </form>
  385. </div>
  386. <div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
  387. <div class="btn-group" style="position: relative; top: 18%;">
  388. <button type="button" class="btn btn-primary" id="createActivityBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
  389. <button type="button" class="btn btn-default" data-toggle="modal" data-target="#editActivityModal"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
  390. <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
  391. </div>
  392. <div class="btn-group" style="position: relative; top: 18%;">
  393. <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal" ><span class="glyphicon glyphicon-import"></span> 上传列表数据(导入)</button>
  394. <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据(批量导出)</button>
  395. <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据(选择导出)</button>
  396. </div>
  397. </div>
  398. <div style="position: relative;top: 10px;">
  399. <table class="table table-hover">
  400. <thead>
  401. <tr style="color: #B3B3B3;">
  402. <td><input type="checkbox" id="chckAll"/></td>
  403. <td>名称</td>
  404. <td>所有者</td>
  405. <td>开始日期</td>
  406. <td>结束日期</td>
  407. </tr>
  408. </thead>
  409. <tbody id="tBody">
  410. <%--<tr class="active">
  411. <td><input type="checkbox" /></td>
  412. <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td>
  413. <td>zhangsan</td>
  414. <td>2020-10-10</td>
  415. <td>2020-10-20</td>
  416. </tr>
  417. <tr class="active">
  418. <td><input type="checkbox" /></td>
  419. <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td>
  420. <td>zhangsan</td>
  421. <td>2020-10-10</td>
  422. <td>2020-10-20</td>
  423. </tr>--%>
  424. </tbody>
  425. </table>
  426. <div id="demo_pag1"></div>
  427. </div>
  428. <%--<div style="height: 50px; position: relative;top: 30px;">
  429. <div>
  430. <button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalRowsB">50</b>条记录</button>
  431. </div>
  432. <div class="btn-group" style="position: relative;top: -34px; left: 110px;">
  433. <button type="button" class="btn btn-default" style="cursor: default;">显示</button>
  434. <div class="btn-group">
  435. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  436. 10
  437. <span class="caret"></span>
  438. </button>
  439. <ul class="dropdown-menu" role="menu">
  440. <li><a href="#">20</a></li>
  441. <li><a href="#">30</a></li>
  442. </ul>
  443. </div>
  444. <button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
  445. </div>
  446. <div style="position: relative;top: -88px; left: 285px;">
  447. <nav>
  448. <ul class="pagination">
  449. <li class="disabled"><a href="#">首页</a></li>
  450. <li class="disabled"><a href="#">上一页</a></li>
  451. <li class="active"><a href="#">1</a></li>
  452. <li><a href="#">2</a></li>
  453. <li><a href="#">3</a></li>
  454. <li><a href="#">4</a></li>
  455. <li><a href="#">5</a></li>
  456. <li><a href="#">下一页</a></li>
  457. <li class="disabled"><a href="#">末页</a></li>
  458. </ul>
  459. </nav>
  460. </div>
  461. </div>--%>
  462. </div>
  463. </div>
  464. </body>
  465. </html>

image.png

三、删除市场活动流程图

删除市场活动.png

1.前端全选和取消全选

1,在页面中给元素添加事件语法: 1)使用元素的事件属性:onxxxx=”f()” 2)使用jquery对象:选择器.xxxx(function(){ //js代码 //this }); *只能给固有元素添加事件 固有元素:当调用事件函数给元素添加事件时,如果元素已经生成,则这些元素叫做固有元素; 动态生成的元素:当调用事件函数给元素添加事件时,如果元素还没有生成,后来生成的元素叫做动态生成的元素。 3)使用jquery的on函数:父选择器.on(“事件类型”,子选择器,function(){ //js代码 //this });
父元素:必须是固有元素,可以直接父元素,也可以是间接父元素. 原则固有父元素范围越小越好. 事件类型:跟事件属性和事件函数一一对应。 子选择器:目标元素,跟父选择器构成一个父子选择器 *不但能给固有元素添加事件,还能够给动态生成的元素添加事件。

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3. <%
  4. String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
  5. %>
  6. <html>
  7. <head>
  8. <base href="<%=basePath%>">
  9. <meta charset="UTF-8">
  10. <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
  11. <link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
  12. <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
  13. <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
  14. <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
  15. <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
  16. <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
  17. <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
  18. <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
  19. <script type="text/javascript">
  20. $(function(){
  21. //给"创建"按钮添加单击事件
  22. $("#createActivityBtn").click(function () {
  23. //初始化工作
  24. //重置表单
  25. $("#createActivityForm").get(0).reset();
  26. //弹出创建市场活动的模态窗口
  27. $("#createActivityModal").modal("show");
  28. });
  29. //给"保存"按钮添加单击事件
  30. $("#saveCreateActivityBtn").click(function () {
  31. //收集参数
  32. var owner=$("#create-marketActivityOwner").val();
  33. var name=$.trim($("#create-marketActivityName").val());
  34. var startDate=$("#create-startDate").val();
  35. var endDate=$("#create-endDate").val();
  36. var cost=$.trim($("#create-cost").val());
  37. var description=$.trim($("#create-description").val());
  38. //表单验证
  39. if(owner==""){
  40. alert("所有者不能为空");
  41. return;
  42. }
  43. if(name==""){
  44. alert("名称不能为空");
  45. return;
  46. }
  47. if(startDate!=""&&endDate!=""){
  48. //使用字符串的大小代替日期的大小
  49. if(endDate<startDate){
  50. alert("结束日期不能比开始日期小");
  51. return;
  52. }
  53. }
  54. /*
  55. 正则表达式:
  56. 1,语言,语法:定义字符串的匹配模式,可以用来判断指定的具体字符串是否符合匹配模式。
  57. 2,语法通则:
  58. 1)//:在js中定义一个正则表达式. var regExp=/...../;
  59. 2)^:匹配字符串的开头位置
  60. $: 匹配字符串的结尾
  61. 3)[]:匹配指定字符集中的一位字符。 var regExp=/^[abc]$/;
  62. var regExp=/^[a-z0-9]$/;
  63. 4){}:匹配次数.var regExp=/^[abc]{5}$/;
  64. {m}:匹配m此
  65. {m,n}:匹配m次到n次
  66. {m,}:匹配m次或者更多次
  67. 5)特殊符号:
  68. \d:匹配一位数字,相当于[0-9]
  69. \D:匹配一位非数字
  70. \w:匹配所有字符,包括字母、数字、下划线。
  71. \W:匹配非字符,除了字母、数字、下划线之外的字符。
  72. *:匹配0次或者多次,相当于{0,}
  73. +:匹配1次或者多次,相当于{1,}
  74. ?:匹配0次或者1次,相当于{0,1}
  75. */
  76. var regExp=/^(([1-9]\d*)|0)$/;
  77. if(!regExp.test(cost)){
  78. alert("成本只能为非负整数");
  79. return;
  80. }
  81. //发送请求
  82. $.ajax({
  83. url:'workbench/activity/saveCreateActivity.do',
  84. data:{
  85. owner:owner,
  86. name:name,
  87. startDate:startDate,
  88. endDate:endDate,
  89. cost:cost,
  90. description:description
  91. },
  92. type:'post',
  93. dataType:'json',
  94. success:function (data) {
  95. if(data.code=="1"){
  96. //关闭模态窗口
  97. $("#createActivityModal").modal("hide");
  98. //刷新市场活动列,显示第一页数据,保持每页显示条数不变
  99. queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
  100. }else{
  101. //提示信息
  102. alert(data.message);
  103. //模态窗口不关闭
  104. $("#createActivityModal").modal("show");//可以不写。
  105. }
  106. }
  107. });
  108. });
  109. //当容器加载完成之后,对容器调用工具函数
  110. //$("input[name='mydate']").datetimepicker({
  111. $(".mydate").datetimepicker({
  112. language:'zh-CN', //语言
  113. format:'yyyy-mm-dd',//日期的格式
  114. minView:'month', //可以选择的最小视图
  115. initialDate:new Date(),//初始化显示的日期
  116. autoclose:true,//设置选择完日期或者时间之后,日否自动关闭日历
  117. todayBtn:true,//设置是否显示"今天"按钮,默认是false
  118. clearBtn:true//设置是否显示"清空"按钮,默认是false
  119. });
  120. //当市场活动主页面加载完成,查询所有数据的第一页以及所有数据的总条数,默认每页显示10条
  121. queryActivityByConditionForPage(1,10);
  122. //给"查询"按钮添加单击事件
  123. $("#queryActivityBtn").click(function () {
  124. //查询所有符合条件数据的第一页以及所有符合条件数据的总条数;
  125. queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
  126. });
  127. //给"全选"按钮添加单击事件
  128. $("#chckAll").click(function () {
  129. //如果"全选"按钮是选中状态,则列表中所有checkbox都选中
  130. /*if(this.checked==true){
  131. $("#tBody input[type='checkbox']").prop("checked",true);
  132. }else{
  133. $("#tBody input[type='checkbox']").prop("checked",false);
  134. }*/
  135. $("#tBody input[type='checkbox']").prop("checked",this.checked);
  136. });
  137. /*$("#tBody input[type='checkbox']").click(function () {
  138. //如果列表中的所有checkbox都选中,则"全选"按钮也选中
  139. if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
  140. $("#chckAll").prop("checked",true);
  141. }else{//如果列表中的所有checkbox至少有一个没选中,则"全选"按钮也取消
  142. $("#chckAll").prop("checked",false);
  143. }
  144. });*/
  145. $("#tBody").on("click","input[type='checkbox']",function () {
  146. //如果列表中的所有checkbox都选中,则"全选"按钮也选中
  147. if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
  148. $("#chckAll").prop("checked",true);
  149. }else{//如果列表中的所有checkbox至少有一个没选中,则"全选"按钮也取消
  150. $("#chckAll").prop("checked",false);
  151. }
  152. });
  153. //给"删除"按钮添加单击事件
  154. $("#deleteActivityBtn").click(function () {
  155. //收集参数
  156. //获取列表中所有被选中的checkbox
  157. var chekkedIds=$("#tBody input[type='checkbox']:checked");
  158. if(chekkedIds.size()==0){
  159. alert("请选择要删除的市场活动");
  160. return;
  161. }
  162. if(window.confirm("确定删除吗?")){
  163. var ids="";
  164. $.each(chekkedIds,function () {//id=xxxx&id=xxx&.....&id=xxx&
  165. ids+="id="+this.value+"&";
  166. });
  167. ids=ids.substr(0,ids.length-1);//id=xxxx&id=xxx&.....&id=xxx
  168. //发送请求
  169. $.ajax({
  170. url:'workbench/activity/deleteActivityIds.do',
  171. data:ids,
  172. type:'post',
  173. dataType:'json',
  174. success:function (data) {
  175. if(data.code=="1"){
  176. //刷新市场活动列表,显示第一页数据,保持每页显示条数不变
  177. queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
  178. }else{
  179. //提示信息
  180. alert(data.message);
  181. }
  182. }
  183. });
  184. }
  185. });
  186. //给"修改"按钮添加单击事件
  187. $("#editActivityBtn").click(function () {
  188. //收集参数
  189. //获取列表中被选中的checkbox
  190. var chkedIds=$("#tBody input[type='checkbox']:checked");
  191. if(chkedIds.size()==0){
  192. alert("请选择要修改的市场活动");
  193. return;
  194. }
  195. if(chkedIds.size()>1){
  196. alert("每次只能修改一条市场活动");
  197. return;
  198. }
  199. //var id=chkedIds.val();
  200. //var id=chkedIds.get(0).value;
  201. var id=chkedIds[0].value;
  202. //发送请求
  203. $.ajax({
  204. url:'workbench/activity/queryActivityById.do',
  205. data:{
  206. id:id
  207. },
  208. type:'post',
  209. dataType:'json',
  210. success:function (data) {
  211. //把市场活动的信息显示在修改的模态窗口上
  212. $("#edit-id").val(data.id);
  213. $("#edit-marketActivityOwner").val(data.owner);
  214. $("#edit-marketActivityName").val(data.name);
  215. $("#edit-startTime").val(data.startDate);
  216. $("#edit-endTime").val(data.endDate);
  217. $("#edit-cost").val(data.cost);
  218. $("#edit-description").val(data.description);
  219. //弹出模态窗口
  220. $("#editActivityModal").modal("show");
  221. }
  222. });
  223. });
  224. });
  225. function queryActivityByConditionForPage(pageNo,pageSize) {
  226. //收集参数
  227. var name=$("#query-name").val();
  228. var owner=$("#query-owner").val();
  229. var startDate=$("#query-startDate").val();
  230. var endDate=$("#query-endDate").val();
  231. //var pageNo=1;
  232. //var pageSize=10;
  233. //发送请求
  234. $.ajax({
  235. url:'workbench/activity/queryActivityByConditionForPage.do',
  236. data:{
  237. name:name,
  238. owner:owner,
  239. startDate:startDate,
  240. endDate:endDate,
  241. pageNo:pageNo,
  242. pageSize:pageSize
  243. },
  244. type:'post',
  245. dataType:'json',
  246. success:function (data) {
  247. //显示总条数
  248. //$("#totalRowsB").text(data.totalRows);
  249. //显示市场活动的列表
  250. //遍历activityList,拼接所有行数据
  251. var htmlStr="";
  252. $.each(data.activityList,function (index,obj) {
  253. htmlStr+="<tr class=\"active\">";
  254. htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";
  255. htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">"+obj.name+"</a></td>";
  256. htmlStr+="<td>"+obj.owner+"</td>";
  257. htmlStr+="<td>"+obj.startDate+"</td>";
  258. htmlStr+="<td>"+obj.endDate+"</td>";
  259. htmlStr+="</tr>";
  260. });
  261. $("#tBody").html(htmlStr);
  262. //取消"全选"按钮
  263. $("#chckAll").prop("checked",false);
  264. //计算总页数
  265. var totalPages=1;
  266. if(data.totalRows%pageSize==0){
  267. totalPages=data.totalRows/pageSize;
  268. }else{
  269. totalPages=parseInt(data.totalRows/pageSize)+1;
  270. }
  271. //对容器调用bs_pagination工具函数,显示翻页信息
  272. $("#demo_pag1").bs_pagination({
  273. currentPage:pageNo,//当前页号,相当于pageNo
  274. rowsPerPage:pageSize,//每页显示条数,相当于pageSize
  275. totalRows:data.totalRows,//总条数
  276. totalPages: totalPages, //总页数,必填参数.
  277. visiblePageLinks:5,//最多可以显示的卡片数
  278. showGoToPage:true,//是否显示"跳转到"部分,默认true--显示
  279. showRowsPerPage:true,//是否显示"每页显示条数"部分。默认true--显示
  280. showRowsInfo:true,//是否显示记录的信息,默认true--显示
  281. //用户每次切换页号,都自动触发本函数;
  282. //每次返回切换页号之后的pageNo和pageSize
  283. onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked
  284. //js代码
  285. //alert(pageObj.currentPage);
  286. //alert(pageObj.rowsPerPage);
  287. queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
  288. }
  289. });
  290. }
  291. });
  292. }
  293. </script>
  294. </head>
  295. <body>
  296. <!-- 创建市场活动的模态窗口 -->
  297. <div class="modal fade" id="createActivityModal" role="dialog">
  298. <div class="modal-dialog" role="document" style="width: 85%;">
  299. <div class="modal-content">
  300. <div class="modal-header">
  301. <button type="button" class="close" data-dismiss="modal">
  302. <span aria-hidden="true">×</span>
  303. </button>
  304. <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
  305. </div>
  306. <div class="modal-body">
  307. <form id="createActivityForm" class="form-horizontal" role="form">
  308. <div class="form-group">
  309. <label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
  310. <div class="col-sm-10" style="width: 300px;">
  311. <select class="form-control" id="create-marketActivityOwner">
  312. <c:forEach items="${userList}" var="u">
  313. <option value="${u.id}">${u.name}</option>
  314. </c:forEach>
  315. </select>
  316. </div>
  317. <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
  318. <div class="col-sm-10" style="width: 300px;">
  319. <input type="text" class="form-control" id="create-marketActivityName">
  320. </div>
  321. </div>
  322. <div class="form-group">
  323. <label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
  324. <div class="col-sm-10" style="width: 300px;">
  325. <input type="text" class="form-control mydate" name="mydate" id="create-startDate" readonly>
  326. </div>
  327. <label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
  328. <div class="col-sm-10" style="width: 300px;">
  329. <input type="text" class="form-control mydate" name="mydate" id="create-endDate" readonly>
  330. </div>
  331. </div>
  332. <div class="form-group">
  333. <label for="create-cost" class="col-sm-2 control-label">成本</label>
  334. <div class="col-sm-10" style="width: 300px;">
  335. <input type="text" class="form-control" id="create-cost">
  336. </div>
  337. </div>
  338. <div class="form-group">
  339. <label for="create-description" class="col-sm-2 control-label">描述</label>
  340. <div class="col-sm-10" style="width: 81%;">
  341. <textarea class="form-control" rows="3" id="create-description"></textarea>
  342. </div>
  343. </div>
  344. </form>
  345. </div>
  346. <div class="modal-footer">
  347. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  348. <button type="button" class="btn btn-primary" id="saveCreateActivityBtn">保存</button>
  349. </div>
  350. </div>
  351. </div>
  352. </div>
  353. <!-- 修改市场活动的模态窗口 -->
  354. <div class="modal fade" id="editActivityModal" role="dialog">
  355. <div class="modal-dialog" role="document" style="width: 85%;">
  356. <div class="modal-content">
  357. <div class="modal-header">
  358. <button type="button" class="close" data-dismiss="modal">
  359. <span aria-hidden="true">×</span>
  360. </button>
  361. <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
  362. </div>
  363. <div class="modal-body">
  364. <form class="form-horizontal" role="form">
  365. <input type="hidden" id="edit-id">
  366. <div class="form-group">
  367. <label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
  368. <div class="col-sm-10" style="width: 300px;">
  369. <select class="form-control" id="edit-marketActivityOwner">
  370. <c:forEach items="${userList}" var="u">
  371. <option value="${u.id}">${u.name}</option>
  372. </c:forEach>
  373. </select>
  374. </div>
  375. <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
  376. <div class="col-sm-10" style="width: 300px;">
  377. <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
  378. </div>
  379. </div>
  380. <div class="form-group">
  381. <label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
  382. <div class="col-sm-10" style="width: 300px;">
  383. <input type="text" class="form-control" id="edit-startTime" value="2020-10-10">
  384. </div>
  385. <label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
  386. <div class="col-sm-10" style="width: 300px;">
  387. <input type="text" class="form-control" id="edit-endTime" value="2020-10-20">
  388. </div>
  389. </div>
  390. <div class="form-group">
  391. <label for="edit-cost" class="col-sm-2 control-label">成本</label>
  392. <div class="col-sm-10" style="width: 300px;">
  393. <input type="text" class="form-control" id="edit-cost" value="5,000">
  394. </div>
  395. </div>
  396. <div class="form-group">
  397. <label for="edit-description" class="col-sm-2 control-label">描述</label>
  398. <div class="col-sm-10" style="width: 81%;">
  399. <textarea class="form-control" rows="3" id="edit-description">市场活动Marketing,是指品牌主办或参与的展览会议与公关市场活动,包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
  400. </div>
  401. </div>
  402. </form>
  403. </div>
  404. <div class="modal-footer">
  405. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  406. <button type="button" class="btn btn-primary" data-dismiss="modal">更新</button>
  407. </div>
  408. </div>
  409. </div>
  410. </div>
  411. <!-- 导入市场活动的模态窗口 -->
  412. <div class="modal fade" id="importActivityModal" role="dialog">
  413. <div class="modal-dialog" role="document" style="width: 85%;">
  414. <div class="modal-content">
  415. <div class="modal-header">
  416. <button type="button" class="close" data-dismiss="modal">
  417. <span aria-hidden="true">×</span>
  418. </button>
  419. <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
  420. </div>
  421. <div class="modal-body" style="height: 350px;">
  422. <div style="position: relative;top: 20px; left: 50px;">
  423. 请选择要上传的文件:<small style="color: gray;">[仅支持.xls]</small>
  424. </div>
  425. <div style="position: relative;top: 40px; left: 50px;">
  426. <input type="file" id="activityFile">
  427. </div>
  428. <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
  429. <h3>重要提示</h3>
  430. <ul>
  431. <li>操作仅针对Excel,仅支持后缀名为XLS的文件。</li>
  432. <li>给定文件的第一行将视为字段名。</li>
  433. <li>请确认您的文件大小不超过5MB。</li>
  434. <li>日期值以文本形式保存,必须符合yyyy-MM-dd格式。</li>
  435. <li>日期时间以文本形式保存,必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
  436. <li>默认情况下,字符编码是UTF-8 (统一码),请确保您导入的文件使用的是正确的字符编码方式。</li>
  437. <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
  438. </ul>
  439. </div>
  440. </div>
  441. <div class="modal-footer">
  442. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  443. <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
  444. </div>
  445. </div>
  446. </div>
  447. </div>
  448. <div>
  449. <div style="position: relative; left: 10px; top: -10px;">
  450. <div class="page-header">
  451. <h3>市场活动列表</h3>
  452. </div>
  453. </div>
  454. </div>
  455. <div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
  456. <div style="width: 100%; position: absolute;top: 5px; left: 10px;">
  457. <div class="btn-toolbar" role="toolbar" style="height: 80px;">
  458. <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
  459. <div class="form-group">
  460. <div class="input-group">
  461. <div class="input-group-addon">名称</div>
  462. <input class="form-control" type="text" id="query-name">
  463. </div>
  464. </div>
  465. <div class="form-group">
  466. <div class="input-group">
  467. <div class="input-group-addon">所有者</div>
  468. <input class="form-control" type="text" id="query-owner">
  469. </div>
  470. </div>
  471. <div class="form-group">
  472. <div class="input-group">
  473. <div class="input-group-addon">开始日期</div>
  474. <input class="form-control" type="text" id="query-startDate" />
  475. </div>
  476. </div>
  477. <div class="form-group">
  478. <div class="input-group">
  479. <div class="input-group-addon">结束日期</div>
  480. <input class="form-control" type="text" id="query-endDate">
  481. </div>
  482. </div>
  483. <button type="button" class="btn btn-default" id="queryActivityBtn">查询</button>
  484. </form>
  485. </div>
  486. <div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
  487. <div class="btn-group" style="position: relative; top: 18%;">
  488. <button type="button" class="btn btn-primary" id="createActivityBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
  489. <button type="button" class="btn btn-default" id="editActivityBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
  490. <button type="button" class="btn btn-danger" id="deleteActivityBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
  491. </div>
  492. <div class="btn-group" style="position: relative; top: 18%;">
  493. <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal" ><span class="glyphicon glyphicon-import"></span> 上传列表数据(导入)</button>
  494. <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据(批量导出)</button>
  495. <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据(选择导出)</button>
  496. </div>
  497. </div>
  498. <div style="position: relative;top: 10px;">
  499. <table class="table table-hover">
  500. <thead>
  501. <tr style="color: #B3B3B3;">
  502. <td><input type="checkbox" id="chckAll"/></td>
  503. <td>名称</td>
  504. <td>所有者</td>
  505. <td>开始日期</td>
  506. <td>结束日期</td>
  507. </tr>
  508. </thead>
  509. <tbody id="tBody">
  510. <%--<tr class="active">
  511. <td><input type="checkbox" /></td>
  512. <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td>
  513. <td>zhangsan</td>
  514. <td>2020-10-10</td>
  515. <td>2020-10-20</td>
  516. </tr>
  517. <tr class="active">
  518. <td><input type="checkbox" /></td>
  519. <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td>
  520. <td>zhangsan</td>
  521. <td>2020-10-10</td>
  522. <td>2020-10-20</td>
  523. </tr>--%>
  524. </tbody>
  525. </table>
  526. <div id="demo_pag1"></div>
  527. </div>
  528. <%--<div style="height: 50px; position: relative;top: 30px;">
  529. <div>
  530. <button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalRowsB">50</b>条记录</button>
  531. </div>
  532. <div class="btn-group" style="position: relative;top: -34px; left: 110px;">
  533. <button type="button" class="btn btn-default" style="cursor: default;">显示</button>
  534. <div class="btn-group">
  535. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  536. 10
  537. <span class="caret"></span>
  538. </button>
  539. <ul class="dropdown-menu" role="menu">
  540. <li><a href="#">20</a></li>
  541. <li><a href="#">30</a></li>
  542. </ul>
  543. </div>
  544. <button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
  545. </div>
  546. <div style="position: relative;top: -88px; left: 285px;">
  547. <nav>
  548. <ul class="pagination">
  549. <li class="disabled"><a href="#">首页</a></li>
  550. <li class="disabled"><a href="#">上一页</a></li>
  551. <li class="active"><a href="#">1</a></li>
  552. <li><a href="#">2</a></li>
  553. <li><a href="#">3</a></li>
  554. <li><a href="#">4</a></li>
  555. <li><a href="#">5</a></li>
  556. <li><a href="#">下一页</a></li>
  557. <li class="disabled"><a href="#">末页</a></li>
  558. </ul>
  559. </nav>
  560. </div>
  561. </div>--%>
  562. </div>
  563. </div>
  564. </body>
  565. </html>

2.mapper层

image.png

  1. /**
  2. * 根据id删除市场活动
  3. */
  4. int deleteActivityByIds(String[] ids);
  1. <delete id="deleteActivityByIds" parameterType="string">
  2. delete from tbl_activity where id in <!--(xxx,xxx,xxx)-->
  3. <foreach collection="array" item="id" separator="," open="(" close=")">
  4. #{id}
  5. </foreach>
  6. </delete>

3.service层

image.png

  1. int deleteActivityByIds(String[] ids);
  1. @Override
  2. public int deleteActivityByIds(String[] ids) {
  3. return activityMapper.deleteActivityByIds(ids);
  4. }

4.controller层

image.png

  1. @RequestMapping("/workbench/activity/deleteActivityIds.do")
  2. @ResponseBody
  3. public Object deleteActivityIds(String[] id) {
  4. ReturnObject returnObject = new ReturnObject();
  5. try {
  6. //调用service方法,删除市场活动
  7. int ret = activityService.deleteActivityByIds(id);
  8. if (ret > 0) {
  9. returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
  10. } else {
  11. returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
  12. returnObject.setMessage("系统忙,请稍后重试。");
  13. }
  14. } catch (Exception e) {
  15. e.printStackTrace();
  16. }
  17. return returnObject;
  18. }
  19. }

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对象 优势:不但能提交字符串数据, 还能提交二进制数据 劣势:操作更复杂

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3. <%
  4. String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
  5. %>
  6. <html>
  7. <head>
  8. <base href="<%=basePath%>">
  9. <meta charset="UTF-8">
  10. <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
  11. <link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
  12. <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
  13. <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
  14. <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
  15. <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
  16. <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
  17. <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
  18. <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
  19. <script type="text/javascript">
  20. $(function(){
  21. //给"创建"按钮添加单击事件
  22. $("#createActivityBtn").click(function () {
  23. //初始化工作
  24. //重置表单
  25. $("#createActivityForm").get(0).reset();
  26. //弹出创建市场活动的模态窗口
  27. $("#createActivityModal").modal("show");
  28. });
  29. //给"保存"按钮添加单击事件
  30. $("#saveCreateActivityBtn").click(function () {
  31. //收集参数
  32. var owner=$("#create-marketActivityOwner").val();
  33. var name=$.trim($("#create-marketActivityName").val());
  34. var startDate=$("#create-startDate").val();
  35. var endDate=$("#create-endDate").val();
  36. var cost=$.trim($("#create-cost").val());
  37. var description=$.trim($("#create-description").val());
  38. //表单验证
  39. if(owner==""){
  40. alert("所有者不能为空");
  41. return;
  42. }
  43. if(name==""){
  44. alert("名称不能为空");
  45. return;
  46. }
  47. if(startDate!=""&&endDate!=""){
  48. //使用字符串的大小代替日期的大小
  49. if(endDate<startDate){
  50. alert("结束日期不能比开始日期小");
  51. return;
  52. }
  53. }
  54. /*
  55. 正则表达式:
  56. 1,语言,语法:定义字符串的匹配模式,可以用来判断指定的具体字符串是否符合匹配模式。
  57. 2,语法通则:
  58. 1)//:在js中定义一个正则表达式. var regExp=/...../;
  59. 2)^:匹配字符串的开头位置
  60. $: 匹配字符串的结尾
  61. 3)[]:匹配指定字符集中的一位字符。 var regExp=/^[abc]$/;
  62. var regExp=/^[a-z0-9]$/;
  63. 4){}:匹配次数.var regExp=/^[abc]{5}$/;
  64. {m}:匹配m此
  65. {m,n}:匹配m次到n次
  66. {m,}:匹配m次或者更多次
  67. 5)特殊符号:
  68. \d:匹配一位数字,相当于[0-9]
  69. \D:匹配一位非数字
  70. \w:匹配所有字符,包括字母、数字、下划线。
  71. \W:匹配非字符,除了字母、数字、下划线之外的字符。
  72. *:匹配0次或者多次,相当于{0,}
  73. +:匹配1次或者多次,相当于{1,}
  74. ?:匹配0次或者1次,相当于{0,1}
  75. */
  76. var regExp=/^(([1-9]\d*)|0)$/;
  77. if(!regExp.test(cost)){
  78. alert("成本只能为非负整数");
  79. return;
  80. }
  81. //发送请求
  82. $.ajax({
  83. url:'workbench/activity/saveCreateActivity.do',
  84. data:{
  85. owner:owner,
  86. name:name,
  87. startDate:startDate,
  88. endDate:endDate,
  89. cost:cost,
  90. description:description
  91. },
  92. type:'post',
  93. dataType:'json',
  94. success:function (data) {
  95. if(data.code=="1"){
  96. //关闭模态窗口
  97. $("#createActivityModal").modal("hide");
  98. //刷新市场活动列,显示第一页数据,保持每页显示条数不变
  99. queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
  100. }else{
  101. //提示信息
  102. alert(data.message);
  103. //模态窗口不关闭
  104. $("#createActivityModal").modal("show");//可以不写。
  105. }
  106. }
  107. });
  108. });
  109. //当容器加载完成之后,对容器调用工具函数
  110. //$("input[name='mydate']").datetimepicker({
  111. $(".mydate").datetimepicker({
  112. language:'zh-CN', //语言
  113. format:'yyyy-mm-dd',//日期的格式
  114. minView:'month', //可以选择的最小视图
  115. initialDate:new Date(),//初始化显示的日期
  116. autoclose:true,//设置选择完日期或者时间之后,日否自动关闭日历
  117. todayBtn:true,//设置是否显示"今天"按钮,默认是false
  118. clearBtn:true//设置是否显示"清空"按钮,默认是false
  119. });
  120. //当市场活动主页面加载完成,查询所有数据的第一页以及所有数据的总条数,默认每页显示10条
  121. queryActivityByConditionForPage(1,10);
  122. //给"查询"按钮添加单击事件
  123. $("#queryActivityBtn").click(function () {
  124. //查询所有符合条件数据的第一页以及所有符合条件数据的总条数;
  125. queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
  126. });
  127. });
  128. function queryActivityByConditionForPage(pageNo,pageSize) {
  129. //收集参数
  130. var name = $("#query-name").val();
  131. var owner = $("#query-owner").val();
  132. var startDate = $("#query-startDate").val();
  133. var endDate = $("#query-endDate").val();
  134. //var pageNo=1;
  135. //var pageSize=10;
  136. //发送请求
  137. $.ajax({
  138. url: 'workbench/activity/queryActivityByConditionForPage.do',
  139. data: {
  140. name: name,
  141. owner: owner,
  142. startDate: startDate,
  143. endDate: endDate,
  144. pageNo: pageNo,
  145. pageSize: pageSize
  146. },
  147. type: 'post',
  148. dataType: 'json',
  149. success: function (data) {
  150. //显示总条数
  151. //$("#totalRowsB").text(data.totalRows);
  152. //显示市场活动的列表
  153. //遍历activityList,拼接所有行数据
  154. var htmlStr = "";
  155. $.each(data.activityList, function (index, obj) {
  156. htmlStr += "<tr class=\"active\">";
  157. htmlStr += "<td><input type=\"checkbox\" value=\"" + obj.id + "\"/></td>";
  158. htmlStr += "<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">" + obj.name + "</a></td>";
  159. htmlStr += "<td>" + obj.owner + "</td>";
  160. htmlStr += "<td>" + obj.startDate + "</td>";
  161. htmlStr += "<td>" + obj.endDate + "</td>";
  162. htmlStr += "</tr>";
  163. });
  164. $("#tBody").html(htmlStr);
  165. //计算总页数
  166. var totalPages = 1;
  167. if (data.totalRows % pageSize == 0) {
  168. totalPages = data.totalRows / pageSize;
  169. } else {
  170. totalPages = parseInt(data.totalRows / pageSize) + 1;
  171. }
  172. //对容器调用bs_pagination工具函数,显示翻页信息
  173. $("#demo_pag1").bs_pagination({
  174. currentPage: pageNo,//当前页号,相当于pageNo
  175. rowsPerPage: pageSize,//每页显示条数,相当于pageSize
  176. totalRows: data.totalRows,//总条数
  177. totalPages: totalPages, //总页数,必填参数.
  178. visiblePageLinks: 5,//最多可以显示的卡片数
  179. showGoToPage: true,//是否显示"跳转到"部分,默认true--显示
  180. showRowsPerPage: true,//是否显示"每页显示条数"部分。默认true--显示
  181. showRowsInfo: true,//是否显示记录的信息,默认true--显示
  182. //用户每次切换页号,都自动触发本函数;
  183. //每次返回切换页号之后的pageNo和pageSize
  184. onChangePage: function (event, pageObj) { // returns page_num and rows_per_page after a link has clicked
  185. //js代码
  186. //alert(pageObj.currentPage);
  187. //alert(pageObj.rowsPerPage);
  188. queryActivityByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage);
  189. }
  190. });
  191. }
  192. });
  193. //给"删除"按钮添加单击事件
  194. $("#deleteActivityBtn").click(function () {
  195. //收集参数
  196. //获取列表中所有被选中的checkbox
  197. var chekkedIds = $("#tBody input[type='checkbox']:checked");
  198. if (chekkedIds.size() == 0) {
  199. alert("请选择要删除的市场活动");
  200. return;
  201. }
  202. if (window.confirm("确定删除吗?")) {
  203. var ids = "";
  204. $.each(chekkedIds, function () {//id=xxxx&id=xxx&.....&id=xxx&
  205. ids += "id=" + this.value + "&";
  206. });
  207. ids = ids.substr(0, ids.length - 1);//id=xxxx&id=xxx&.....&id=xxx
  208. //发送请求
  209. $.ajax({
  210. url: 'workbench/activity/deleteActivityIds.do',
  211. data: ids,
  212. type: 'post',
  213. dataType: 'json',
  214. success: function (data) {
  215. if (data.code == "1") {
  216. //刷新市场活动列表,显示第一页数据,保持每页显示条数不变
  217. queryActivityByConditionForPage(1, $("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
  218. } else {
  219. //提示信息
  220. alert(data.message);
  221. }
  222. }
  223. });
  224. }
  225. });
  226. }
  227. </script>
  228. </head>
  229. <body>
  230. <!-- 创建市场活动的模态窗口 -->
  231. <div class="modal fade" id="createActivityModal" role="dialog">
  232. <div class="modal-dialog" role="document" style="width: 85%;">
  233. <div class="modal-content">
  234. <div class="modal-header">
  235. <button type="button" class="close" data-dismiss="modal">
  236. <span aria-hidden="true">×</span>
  237. </button>
  238. <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
  239. </div>
  240. <div class="modal-body">
  241. <form id="createActivityForm" class="form-horizontal" role="form">
  242. <div class="form-group">
  243. <label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
  244. <div class="col-sm-10" style="width: 300px;">
  245. <select class="form-control" id="create-marketActivityOwner">
  246. <c:forEach items="${userList}" var="u">
  247. <option value="${u.id}">${u.name}</option>
  248. </c:forEach>
  249. </select>
  250. </div>
  251. <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
  252. <div class="col-sm-10" style="width: 300px;">
  253. <input type="text" class="form-control" id="create-marketActivityName">
  254. </div>
  255. </div>
  256. <div class="form-group">
  257. <label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
  258. <div class="col-sm-10" style="width: 300px;">
  259. <input type="text" class="form-control mydate" name="mydate" id="create-startDate" readonly>
  260. </div>
  261. <label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
  262. <div class="col-sm-10" style="width: 300px;">
  263. <input type="text" class="form-control mydate" name="mydate" id="create-endDate" readonly>
  264. </div>
  265. </div>
  266. <div class="form-group">
  267. <label for="create-cost" class="col-sm-2 control-label">成本</label>
  268. <div class="col-sm-10" style="width: 300px;">
  269. <input type="text" class="form-control" id="create-cost">
  270. </div>
  271. </div>
  272. <div class="form-group">
  273. <label for="create-description" class="col-sm-2 control-label">描述</label>
  274. <div class="col-sm-10" style="width: 81%;">
  275. <textarea class="form-control" rows="3" id="create-description"></textarea>
  276. </div>
  277. </div>
  278. </form>
  279. </div>
  280. <div class="modal-footer">
  281. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  282. <button type="button" class="btn btn-primary" id="saveCreateActivityBtn">保存</button>
  283. </div>
  284. </div>
  285. </div>
  286. </div>
  287. <!-- 修改市场活动的模态窗口 -->
  288. <div class="modal fade" id="editActivityModal" role="dialog">
  289. <div class="modal-dialog" role="document" style="width: 85%;">
  290. <div class="modal-content">
  291. <div class="modal-header">
  292. <button type="button" class="close" data-dismiss="modal">
  293. <span aria-hidden="true">×</span>
  294. </button>
  295. <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
  296. </div>
  297. <div class="modal-body">
  298. <form class="form-horizontal" role="form">
  299. <div class="form-group">
  300. <label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
  301. <div class="col-sm-10" style="width: 300px;">
  302. <select class="form-control" id="edit-marketActivityOwner">
  303. <c:forEach items="${userList}" var="u">
  304. <option value="${u.id}">${u.name}</option>
  305. </c:forEach>
  306. </select>
  307. </div>
  308. <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
  309. <div class="col-sm-10" style="width: 300px;">
  310. <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
  311. </div>
  312. </div>
  313. <div class="form-group">
  314. <label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
  315. <div class="col-sm-10" style="width: 300px;">
  316. <input type="text" class="form-control" id="edit-startTime" value="2020-10-10">
  317. </div>
  318. <label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
  319. <div class="col-sm-10" style="width: 300px;">
  320. <input type="text" class="form-control" id="edit-endTime" value="2020-10-20">
  321. </div>
  322. </div>
  323. <div class="form-group">
  324. <label for="edit-cost" class="col-sm-2 control-label">成本</label>
  325. <div class="col-sm-10" style="width: 300px;">
  326. <input type="text" class="form-control" id="edit-cost" value="5,000">
  327. </div>
  328. </div>
  329. <div class="form-group">
  330. <label for="edit-describe" class="col-sm-2 control-label">描述</label>
  331. <div class="col-sm-10" style="width: 81%;">
  332. <textarea class="form-control" rows="3" id="edit-describe">市场活动Marketing,是指品牌主办或参与的展览会议与公关市场活动,包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
  333. </div>
  334. </div>
  335. </form>
  336. </div>
  337. <div class="modal-footer">
  338. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  339. <button type="button" class="btn btn-primary" data-dismiss="modal">更新</button>
  340. </div>
  341. </div>
  342. </div>
  343. </div>
  344. <!-- 导入市场活动的模态窗口 -->
  345. <div class="modal fade" id="importActivityModal" role="dialog">
  346. <div class="modal-dialog" role="document" style="width: 85%;">
  347. <div class="modal-content">
  348. <div class="modal-header">
  349. <button type="button" class="close" data-dismiss="modal">
  350. <span aria-hidden="true">×</span>
  351. </button>
  352. <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
  353. </div>
  354. <div class="modal-body" style="height: 350px;">
  355. <div style="position: relative;top: 20px; left: 50px;">
  356. 请选择要上传的文件:<small style="color: gray;">[仅支持.xls]</small>
  357. </div>
  358. <div style="position: relative;top: 40px; left: 50px;">
  359. <input type="file" id="activityFile">
  360. </div>
  361. <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
  362. <h3>重要提示</h3>
  363. <ul>
  364. <li>操作仅针对Excel,仅支持后缀名为XLS的文件。</li>
  365. <li>给定文件的第一行将视为字段名。</li>
  366. <li>请确认您的文件大小不超过5MB。</li>
  367. <li>日期值以文本形式保存,必须符合yyyy-MM-dd格式。</li>
  368. <li>日期时间以文本形式保存,必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
  369. <li>默认情况下,字符编码是UTF-8 (统一码),请确保您导入的文件使用的是正确的字符编码方式。</li>
  370. <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
  371. </ul>
  372. </div>
  373. </div>
  374. <div class="modal-footer">
  375. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  376. <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
  377. </div>
  378. </div>
  379. </div>
  380. </div>
  381. <div>
  382. <div style="position: relative; left: 10px; top: -10px;">
  383. <div class="page-header">
  384. <h3>市场活动列表</h3>
  385. </div>
  386. </div>
  387. </div>
  388. <div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
  389. <div style="width: 100%; position: absolute;top: 5px; left: 10px;">
  390. <div class="btn-toolbar" role="toolbar" style="height: 80px;">
  391. <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
  392. <div class="form-group">
  393. <div class="input-group">
  394. <div class="input-group-addon">名称</div>
  395. <input class="form-control" type="text" id="query-name">
  396. </div>
  397. </div>
  398. <div class="form-group">
  399. <div class="input-group">
  400. <div class="input-group-addon">所有者</div>
  401. <input class="form-control" type="text" id="query-owner">
  402. </div>
  403. </div>
  404. <div class="form-group">
  405. <div class="input-group">
  406. <div class="input-group-addon">开始日期</div>
  407. <input class="form-control" type="text" id="query-startDate" />
  408. </div>
  409. </div>
  410. <div class="form-group">
  411. <div class="input-group">
  412. <div class="input-group-addon">结束日期</div>
  413. <input class="form-control" type="text" id="query-endDate">
  414. </div>
  415. </div>
  416. <button type="button" class="btn btn-default" id="queryActivityBtn">查询</button>
  417. </form>
  418. </div>
  419. <div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
  420. <div class="btn-group" style="position: relative; top: 18%;">
  421. <button type="button" class="btn btn-primary" id="createActivityBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
  422. <button type="button" class="btn btn-default" data-toggle="modal" data-target="#editActivityModal"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
  423. <button type="button" class="btn btn-danger" id="deleteActivityBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
  424. </div>
  425. <div class="btn-group" style="position: relative; top: 18%;">
  426. <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal" ><span class="glyphicon glyphicon-import"></span> 上传列表数据(导入)</button>
  427. <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据(批量导出)</button>
  428. <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据(选择导出)</button>
  429. </div>
  430. </div>
  431. <div style="position: relative;top: 10px;">
  432. <table class="table table-hover">
  433. <thead>
  434. <tr style="color: #B3B3B3;">
  435. <td><input type="checkbox" id="chckAll"/></td>
  436. <td>名称</td>
  437. <td>所有者</td>
  438. <td>开始日期</td>
  439. <td>结束日期</td>
  440. </tr>
  441. </thead>
  442. <tbody id="tBody">
  443. <%--<tr class="active">
  444. <td><input type="checkbox" /></td>
  445. <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td>
  446. <td>zhangsan</td>
  447. <td>2020-10-10</td>
  448. <td>2020-10-20</td>
  449. </tr>
  450. <tr class="active">
  451. <td><input type="checkbox" /></td>
  452. <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td>
  453. <td>zhangsan</td>
  454. <td>2020-10-10</td>
  455. <td>2020-10-20</td>
  456. </tr>--%>
  457. </tbody>
  458. </table>
  459. <div id="demo_pag1"></div>
  460. </div>
  461. <%--<div style="height: 50px; position: relative;top: 30px;">
  462. <div>
  463. <button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalRowsB">50</b>条记录</button>
  464. </div>
  465. <div class="btn-group" style="position: relative;top: -34px; left: 110px;">
  466. <button type="button" class="btn btn-default" style="cursor: default;">显示</button>
  467. <div class="btn-group">
  468. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  469. 10
  470. <span class="caret"></span>
  471. </button>
  472. <ul class="dropdown-menu" role="menu">
  473. <li><a href="#">20</a></li>
  474. <li><a href="#">30</a></li>
  475. </ul>
  476. </div>
  477. <button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
  478. </div>
  479. <div style="position: relative;top: -88px; left: 285px;">
  480. <nav>
  481. <ul class="pagination">
  482. <li class="disabled"><a href="#">首页</a></li>
  483. <li class="disabled"><a href="#">上一页</a></li>
  484. <li class="active"><a href="#">1</a></li>
  485. <li><a href="#">2</a></li>
  486. <li><a href="#">3</a></li>
  487. <li><a href="#">4</a></li>
  488. <li><a href="#">5</a></li>
  489. <li><a href="#">下一页</a></li>
  490. <li class="disabled"><a href="#">末页</a></li>
  491. </ul>
  492. </nav>
  493. </div>
  494. </div>--%>
  495. </div>
  496. </div>
  497. </body>
  498. </html>

四、修改市场活动流程图

修改市场活动.png

1.mapper层

image.png

  1. /**
  2. * 根据id来查询市场活动的信息
  3. */
  4. Activity selectActivityById(String id);
  1. <select id="selectActivityById" parameterType="string" resultMap="BaseResultMap">
  2. select
  3. <include refid="Base_Column_List">
  4. from tbl_activity
  5. where id=#{id}
  6. </select>

2.service层

image.png

  1. Activity queryActivityById(String id);
  1. @Override
  2. public Activity queryActivityById(String id) {
  3. return activityMapper.selectActivityById(id);
  4. }

3.controller层

image.png

  1. @RequestMapping("/workbench/activity/queryActivityById.do")
  2. @ResponseBody
  3. public Object queryActivityById(String id){
  4. //调用service层方法,查询市场活动
  5. Activity activity = activityService.queryActivityById(id);
  6. return activity;
  7. }

6.修改activity下的index.jsp

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3. <%
  4. String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
  5. %>
  6. <html>
  7. <head>
  8. <base href="<%=basePath%>">
  9. <meta charset="UTF-8">
  10. <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
  11. <link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
  12. <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
  13. <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
  14. <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
  15. <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
  16. <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
  17. <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
  18. <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
  19. <script type="text/javascript">
  20. $(function(){
  21. //给"创建"按钮添加单击事件
  22. $("#createActivityBtn").click(function () {
  23. //初始化工作
  24. //重置表单
  25. $("#createActivityForm").get(0).reset();
  26. //弹出创建市场活动的模态窗口
  27. $("#createActivityModal").modal("show");
  28. });
  29. //给"保存"按钮添加单击事件
  30. $("#saveCreateActivityBtn").click(function () {
  31. //收集参数
  32. var owner=$("#create-marketActivityOwner").val();
  33. var name=$.trim($("#create-marketActivityName").val());
  34. var startDate=$("#create-startDate").val();
  35. var endDate=$("#create-endDate").val();
  36. var cost=$.trim($("#create-cost").val());
  37. var description=$.trim($("#create-description").val());
  38. //表单验证
  39. if(owner==""){
  40. alert("所有者不能为空");
  41. return;
  42. }
  43. if(name==""){
  44. alert("名称不能为空");
  45. return;
  46. }
  47. if(startDate!=""&&endDate!=""){
  48. //使用字符串的大小代替日期的大小
  49. if(endDate<startDate){
  50. alert("结束日期不能比开始日期小");
  51. return;
  52. }
  53. }
  54. /*
  55. 正则表达式:
  56. 1,语言,语法:定义字符串的匹配模式,可以用来判断指定的具体字符串是否符合匹配模式。
  57. 2,语法通则:
  58. 1)//:在js中定义一个正则表达式. var regExp=/...../;
  59. 2)^:匹配字符串的开头位置
  60. $: 匹配字符串的结尾
  61. 3)[]:匹配指定字符集中的一位字符。 var regExp=/^[abc]$/;
  62. var regExp=/^[a-z0-9]$/;
  63. 4){}:匹配次数.var regExp=/^[abc]{5}$/;
  64. {m}:匹配m此
  65. {m,n}:匹配m次到n次
  66. {m,}:匹配m次或者更多次
  67. 5)特殊符号:
  68. \d:匹配一位数字,相当于[0-9]
  69. \D:匹配一位非数字
  70. \w:匹配所有字符,包括字母、数字、下划线。
  71. \W:匹配非字符,除了字母、数字、下划线之外的字符。
  72. *:匹配0次或者多次,相当于{0,}
  73. +:匹配1次或者多次,相当于{1,}
  74. ?:匹配0次或者1次,相当于{0,1}
  75. */
  76. var regExp=/^(([1-9]\d*)|0)$/;
  77. if(!regExp.test(cost)){
  78. alert("成本只能为非负整数");
  79. return;
  80. }
  81. //发送请求
  82. $.ajax({
  83. url:'workbench/activity/saveCreateActivity.do',
  84. data:{
  85. owner:owner,
  86. name:name,
  87. startDate:startDate,
  88. endDate:endDate,
  89. cost:cost,
  90. description:description
  91. },
  92. type:'post',
  93. dataType:'json',
  94. success:function (data) {
  95. if(data.code=="1"){
  96. //关闭模态窗口
  97. $("#createActivityModal").modal("hide");
  98. //刷新市场活动列,显示第一页数据,保持每页显示条数不变
  99. queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
  100. }else{
  101. //提示信息
  102. alert(data.message);
  103. //模态窗口不关闭
  104. $("#createActivityModal").modal("show");//可以不写。
  105. }
  106. }
  107. });
  108. });
  109. //当容器加载完成之后,对容器调用工具函数
  110. //$("input[name='mydate']").datetimepicker({
  111. $(".mydate").datetimepicker({
  112. language:'zh-CN', //语言
  113. format:'yyyy-mm-dd',//日期的格式
  114. minView:'month', //可以选择的最小视图
  115. initialDate:new Date(),//初始化显示的日期
  116. autoclose:true,//设置选择完日期或者时间之后,日否自动关闭日历
  117. todayBtn:true,//设置是否显示"今天"按钮,默认是false
  118. clearBtn:true//设置是否显示"清空"按钮,默认是false
  119. });
  120. //当市场活动主页面加载完成,查询所有数据的第一页以及所有数据的总条数,默认每页显示10条
  121. queryActivityByConditionForPage(1,10);
  122. //给"查询"按钮添加单击事件
  123. $("#queryActivityBtn").click(function () {
  124. //查询所有符合条件数据的第一页以及所有符合条件数据的总条数;
  125. queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
  126. });
  127. //给"全选"按钮添加单击事件
  128. $("#chckAll").click(function () {
  129. //如果"全选"按钮是选中状态,则列表中所有checkbox都选中
  130. /*if(this.checked==true){
  131. $("#tBody input[type='checkbox']").prop("checked",true);
  132. }else{
  133. $("#tBody input[type='checkbox']").prop("checked",false);
  134. }*/
  135. $("#tBody input[type='checkbox']").prop("checked",this.checked);
  136. });
  137. /*$("#tBody input[type='checkbox']").click(function () {
  138. //如果列表中的所有checkbox都选中,则"全选"按钮也选中
  139. if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
  140. $("#chckAll").prop("checked",true);
  141. }else{//如果列表中的所有checkbox至少有一个没选中,则"全选"按钮也取消
  142. $("#chckAll").prop("checked",false);
  143. }
  144. });*/
  145. $("#tBody").on("click","input[type='checkbox']",function () {
  146. //如果列表中的所有checkbox都选中,则"全选"按钮也选中
  147. if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
  148. $("#chckAll").prop("checked",true);
  149. }else{//如果列表中的所有checkbox至少有一个没选中,则"全选"按钮也取消
  150. $("#chckAll").prop("checked",false);
  151. }
  152. });
  153. //给"删除"按钮添加单击事件
  154. $("#deleteActivityBtn").click(function () {
  155. //收集参数
  156. //获取列表中所有被选中的checkbox
  157. var chekkedIds=$("#tBody input[type='checkbox']:checked");
  158. if(chekkedIds.size()==0){
  159. alert("请选择要删除的市场活动");
  160. return;
  161. }
  162. if(window.confirm("确定删除吗?")){
  163. var ids="";
  164. $.each(chekkedIds,function () {//id=xxxx&id=xxx&.....&id=xxx&
  165. ids+="id="+this.value+"&";
  166. });
  167. ids=ids.substr(0,ids.length-1);//id=xxxx&id=xxx&.....&id=xxx
  168. //发送请求
  169. $.ajax({
  170. url:'workbench/activity/deleteActivityIds.do',
  171. data:ids,
  172. type:'post',
  173. dataType:'json',
  174. success:function (data) {
  175. if(data.code=="1"){
  176. //刷新市场活动列表,显示第一页数据,保持每页显示条数不变
  177. queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
  178. }else{
  179. //提示信息
  180. alert(data.message);
  181. }
  182. }
  183. });
  184. }
  185. });
  186. //给"修改"按钮添加单击事件
  187. $("#editActivityBtn").click(function () {
  188. //收集参数
  189. //获取列表中被选中的checkbox
  190. var chkedIds=$("#tBody input[type='checkbox']:checked");
  191. if(chkedIds.size()==0){
  192. alert("请选择要修改的市场活动");
  193. return;
  194. }
  195. if(chkedIds.size()>1){
  196. alert("每次只能修改一条市场活动");
  197. return;
  198. }
  199. //var id=chkedIds.val();
  200. //var id=chkedIds.get(0).value;
  201. var id=chkedIds[0].value;
  202. //发送请求
  203. $.ajax({
  204. url:'workbench/activity/queryActivityById.do',
  205. data:{
  206. id:id
  207. },
  208. type:'post',
  209. dataType:'json',
  210. success:function (data) {
  211. //把市场活动的信息显示在修改的模态窗口上
  212. $("#edit-id").val(data.id);
  213. $("#edit-marketActivityOwner").val(data.owner);
  214. $("#edit-marketActivityName").val(data.name);
  215. $("#edit-startTime").val(data.startDate);
  216. $("#edit-endTime").val(data.endDate);
  217. $("#edit-cost").val(data.cost);
  218. $("#edit-description").val(data.description);
  219. //弹出模态窗口
  220. $("#editActivityModal").modal("show");
  221. }
  222. });
  223. });
  224. });
  225. function queryActivityByConditionForPage(pageNo,pageSize) {
  226. //收集参数
  227. var name=$("#query-name").val();
  228. var owner=$("#query-owner").val();
  229. var startDate=$("#query-startDate").val();
  230. var endDate=$("#query-endDate").val();
  231. //var pageNo=1;
  232. //var pageSize=10;
  233. //发送请求
  234. $.ajax({
  235. url:'workbench/activity/queryActivityByConditionForPage.do',
  236. data:{
  237. name:name,
  238. owner:owner,
  239. startDate:startDate,
  240. endDate:endDate,
  241. pageNo:pageNo,
  242. pageSize:pageSize
  243. },
  244. type:'post',
  245. dataType:'json',
  246. success:function (data) {
  247. //显示总条数
  248. //$("#totalRowsB").text(data.totalRows);
  249. //显示市场活动的列表
  250. //遍历activityList,拼接所有行数据
  251. var htmlStr="";
  252. $.each(data.activityList,function (index,obj) {
  253. htmlStr+="<tr class=\"active\">";
  254. htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";
  255. htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">"+obj.name+"</a></td>";
  256. htmlStr+="<td>"+obj.owner+"</td>";
  257. htmlStr+="<td>"+obj.startDate+"</td>";
  258. htmlStr+="<td>"+obj.endDate+"</td>";
  259. htmlStr+="</tr>";
  260. });
  261. $("#tBody").html(htmlStr);
  262. //取消"全选"按钮
  263. $("#chckAll").prop("checked",false);
  264. //计算总页数
  265. var totalPages=1;
  266. if(data.totalRows%pageSize==0){
  267. totalPages=data.totalRows/pageSize;
  268. }else{
  269. totalPages=parseInt(data.totalRows/pageSize)+1;
  270. }
  271. //对容器调用bs_pagination工具函数,显示翻页信息
  272. $("#demo_pag1").bs_pagination({
  273. currentPage:pageNo,//当前页号,相当于pageNo
  274. rowsPerPage:pageSize,//每页显示条数,相当于pageSize
  275. totalRows:data.totalRows,//总条数
  276. totalPages: totalPages, //总页数,必填参数.
  277. visiblePageLinks:5,//最多可以显示的卡片数
  278. showGoToPage:true,//是否显示"跳转到"部分,默认true--显示
  279. showRowsPerPage:true,//是否显示"每页显示条数"部分。默认true--显示
  280. showRowsInfo:true,//是否显示记录的信息,默认true--显示
  281. //用户每次切换页号,都自动触发本函数;
  282. //每次返回切换页号之后的pageNo和pageSize
  283. onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked
  284. //js代码
  285. //alert(pageObj.currentPage);
  286. //alert(pageObj.rowsPerPage);
  287. queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
  288. }
  289. });
  290. }
  291. });
  292. }
  293. </script>
  294. </head>
  295. <body>
  296. <!-- 创建市场活动的模态窗口 -->
  297. <div class="modal fade" id="createActivityModal" role="dialog">
  298. <div class="modal-dialog" role="document" style="width: 85%;">
  299. <div class="modal-content">
  300. <div class="modal-header">
  301. <button type="button" class="close" data-dismiss="modal">
  302. <span aria-hidden="true">×</span>
  303. </button>
  304. <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
  305. </div>
  306. <div class="modal-body">
  307. <form id="createActivityForm" class="form-horizontal" role="form">
  308. <div class="form-group">
  309. <label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
  310. <div class="col-sm-10" style="width: 300px;">
  311. <select class="form-control" id="create-marketActivityOwner">
  312. <c:forEach items="${userList}" var="u">
  313. <option value="${u.id}">${u.name}</option>
  314. </c:forEach>
  315. </select>
  316. </div>
  317. <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
  318. <div class="col-sm-10" style="width: 300px;">
  319. <input type="text" class="form-control" id="create-marketActivityName">
  320. </div>
  321. </div>
  322. <div class="form-group">
  323. <label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
  324. <div class="col-sm-10" style="width: 300px;">
  325. <input type="text" class="form-control mydate" name="mydate" id="create-startDate" readonly>
  326. </div>
  327. <label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
  328. <div class="col-sm-10" style="width: 300px;">
  329. <input type="text" class="form-control mydate" name="mydate" id="create-endDate" readonly>
  330. </div>
  331. </div>
  332. <div class="form-group">
  333. <label for="create-cost" class="col-sm-2 control-label">成本</label>
  334. <div class="col-sm-10" style="width: 300px;">
  335. <input type="text" class="form-control" id="create-cost">
  336. </div>
  337. </div>
  338. <div class="form-group">
  339. <label for="create-description" class="col-sm-2 control-label">描述</label>
  340. <div class="col-sm-10" style="width: 81%;">
  341. <textarea class="form-control" rows="3" id="create-description"></textarea>
  342. </div>
  343. </div>
  344. </form>
  345. </div>
  346. <div class="modal-footer">
  347. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  348. <button type="button" class="btn btn-primary" id="saveCreateActivityBtn">保存</button>
  349. </div>
  350. </div>
  351. </div>
  352. </div>
  353. <!-- 修改市场活动的模态窗口 -->
  354. <div class="modal fade" id="editActivityModal" role="dialog">
  355. <div class="modal-dialog" role="document" style="width: 85%;">
  356. <div class="modal-content">
  357. <div class="modal-header">
  358. <button type="button" class="close" data-dismiss="modal">
  359. <span aria-hidden="true">×</span>
  360. </button>
  361. <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
  362. </div>
  363. <div class="modal-body">
  364. <form class="form-horizontal" role="form">
  365. <input type="hidden" id="edit-id">
  366. <div class="form-group">
  367. <label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
  368. <div class="col-sm-10" style="width: 300px;">
  369. <select class="form-control" id="edit-marketActivityOwner">
  370. <c:forEach items="${userList}" var="u">
  371. <option value="${u.id}">${u.name}</option>
  372. </c:forEach>
  373. </select>
  374. </div>
  375. <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
  376. <div class="col-sm-10" style="width: 300px;">
  377. <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
  378. </div>
  379. </div>
  380. <div class="form-group">
  381. <label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
  382. <div class="col-sm-10" style="width: 300px;">
  383. <input type="text" class="form-control" id="edit-startTime" value="2020-10-10">
  384. </div>
  385. <label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
  386. <div class="col-sm-10" style="width: 300px;">
  387. <input type="text" class="form-control" id="edit-endTime" value="2020-10-20">
  388. </div>
  389. </div>
  390. <div class="form-group">
  391. <label for="edit-cost" class="col-sm-2 control-label">成本</label>
  392. <div class="col-sm-10" style="width: 300px;">
  393. <input type="text" class="form-control" id="edit-cost" value="5,000">
  394. </div>
  395. </div>
  396. <div class="form-group">
  397. <label for="edit-description" class="col-sm-2 control-label">描述</label>
  398. <div class="col-sm-10" style="width: 81%;">
  399. <textarea class="form-control" rows="3" id="edit-description">市场活动Marketing,是指品牌主办或参与的展览会议与公关市场活动,包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
  400. </div>
  401. </div>
  402. </form>
  403. </div>
  404. <div class="modal-footer">
  405. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  406. <button type="button" class="btn btn-primary" data-dismiss="modal">更新</button>
  407. </div>
  408. </div>
  409. </div>
  410. </div>
  411. <!-- 导入市场活动的模态窗口 -->
  412. <div class="modal fade" id="importActivityModal" role="dialog">
  413. <div class="modal-dialog" role="document" style="width: 85%;">
  414. <div class="modal-content">
  415. <div class="modal-header">
  416. <button type="button" class="close" data-dismiss="modal">
  417. <span aria-hidden="true">×</span>
  418. </button>
  419. <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
  420. </div>
  421. <div class="modal-body" style="height: 350px;">
  422. <div style="position: relative;top: 20px; left: 50px;">
  423. 请选择要上传的文件:<small style="color: gray;">[仅支持.xls]</small>
  424. </div>
  425. <div style="position: relative;top: 40px; left: 50px;">
  426. <input type="file" id="activityFile">
  427. </div>
  428. <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
  429. <h3>重要提示</h3>
  430. <ul>
  431. <li>操作仅针对Excel,仅支持后缀名为XLS的文件。</li>
  432. <li>给定文件的第一行将视为字段名。</li>
  433. <li>请确认您的文件大小不超过5MB。</li>
  434. <li>日期值以文本形式保存,必须符合yyyy-MM-dd格式。</li>
  435. <li>日期时间以文本形式保存,必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
  436. <li>默认情况下,字符编码是UTF-8 (统一码),请确保您导入的文件使用的是正确的字符编码方式。</li>
  437. <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
  438. </ul>
  439. </div>
  440. </div>
  441. <div class="modal-footer">
  442. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  443. <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
  444. </div>
  445. </div>
  446. </div>
  447. </div>
  448. <div>
  449. <div style="position: relative; left: 10px; top: -10px;">
  450. <div class="page-header">
  451. <h3>市场活动列表</h3>
  452. </div>
  453. </div>
  454. </div>
  455. <div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
  456. <div style="width: 100%; position: absolute;top: 5px; left: 10px;">
  457. <div class="btn-toolbar" role="toolbar" style="height: 80px;">
  458. <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
  459. <div class="form-group">
  460. <div class="input-group">
  461. <div class="input-group-addon">名称</div>
  462. <input class="form-control" type="text" id="query-name">
  463. </div>
  464. </div>
  465. <div class="form-group">
  466. <div class="input-group">
  467. <div class="input-group-addon">所有者</div>
  468. <input class="form-control" type="text" id="query-owner">
  469. </div>
  470. </div>
  471. <div class="form-group">
  472. <div class="input-group">
  473. <div class="input-group-addon">开始日期</div>
  474. <input class="form-control" type="text" id="query-startDate" />
  475. </div>
  476. </div>
  477. <div class="form-group">
  478. <div class="input-group">
  479. <div class="input-group-addon">结束日期</div>
  480. <input class="form-control" type="text" id="query-endDate">
  481. </div>
  482. </div>
  483. <button type="button" class="btn btn-default" id="queryActivityBtn">查询</button>
  484. </form>
  485. </div>
  486. <div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
  487. <div class="btn-group" style="position: relative; top: 18%;">
  488. <button type="button" class="btn btn-primary" id="createActivityBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
  489. <button type="button" class="btn btn-default" id="editActivityBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
  490. <button type="button" class="btn btn-danger" id="deleteActivityBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
  491. </div>
  492. <div class="btn-group" style="position: relative; top: 18%;">
  493. <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal" ><span class="glyphicon glyphicon-import"></span> 上传列表数据(导入)</button>
  494. <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据(批量导出)</button>
  495. <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据(选择导出)</button>
  496. </div>
  497. </div>
  498. <div style="position: relative;top: 10px;">
  499. <table class="table table-hover">
  500. <thead>
  501. <tr style="color: #B3B3B3;">
  502. <td><input type="checkbox" id="chckAll"/></td>
  503. <td>名称</td>
  504. <td>所有者</td>
  505. <td>开始日期</td>
  506. <td>结束日期</td>
  507. </tr>
  508. </thead>
  509. <tbody id="tBody">
  510. <%--<tr class="active">
  511. <td><input type="checkbox" /></td>
  512. <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td>
  513. <td>zhangsan</td>
  514. <td>2020-10-10</td>
  515. <td>2020-10-20</td>
  516. </tr>
  517. <tr class="active">
  518. <td><input type="checkbox" /></td>
  519. <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td>
  520. <td>zhangsan</td>
  521. <td>2020-10-10</td>
  522. <td>2020-10-20</td>
  523. </tr>--%>
  524. </tbody>
  525. </table>
  526. <div id="demo_pag1"></div>
  527. </div>
  528. <%--<div style="height: 50px; position: relative;top: 30px;">
  529. <div>
  530. <button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalRowsB">50</b>条记录</button>
  531. </div>
  532. <div class="btn-group" style="position: relative;top: -34px; left: 110px;">
  533. <button type="button" class="btn btn-default" style="cursor: default;">显示</button>
  534. <div class="btn-group">
  535. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  536. 10
  537. <span class="caret"></span>
  538. </button>
  539. <ul class="dropdown-menu" role="menu">
  540. <li><a href="#">20</a></li>
  541. <li><a href="#">30</a></li>
  542. </ul>
  543. </div>
  544. <button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
  545. </div>
  546. <div style="position: relative;top: -88px; left: 285px;">
  547. <nav>
  548. <ul class="pagination">
  549. <li class="disabled"><a href="#">首页</a></li>
  550. <li class="disabled"><a href="#">上一页</a></li>
  551. <li class="active"><a href="#">1</a></li>
  552. <li><a href="#">2</a></li>
  553. <li><a href="#">3</a></li>
  554. <li><a href="#">4</a></li>
  555. <li><a href="#">5</a></li>
  556. <li><a href="#">下一页</a></li>
  557. <li class="disabled"><a href="#">末页</a></li>
  558. </ul>
  559. </nav>
  560. </div>
  561. </div>--%>
  562. </div>
  563. </div>
  564. </body>
  565. </html>

image.png

2.1设计保存修改的市场活动

image.png
image.png

2.2mapper层

image.png

  /**
     * 保存修改的市场活动
     */
    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层

image.png

int saveEditActivity(Activity activity);
@Override
    public int saveEditActivity(Activity activity) {
            return activityMapper.updateActivity(activity);
}

2.4controller层

image.png

   @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>