第3章业务功能开发（删除市场活动）

最新推荐文章于 2024-07-25 01:42:07 发布

做一道光

最新推荐文章于 2024-07-25 01:42:07 发布

阅读量178

点赞数 2

分类专栏： CRM项目实战（SSM版）文章标签： spring mvc java 数据库服务器

本文链接：https://blog.csdn.net/weixin_59334478/article/details/125740003

版权

CRM项目实战（SSM版）专栏收录该内容

48 篇文章 10 订阅

订阅专栏

客户需求：

用户在市场活动主页面,选择要删除的市场活动,点击"删除"按钮,弹出确认窗口;

用户点击"确定"按钮,完成删除市场活动的功能.

*每次至少删除一条市场活动

*可以批量删除市场活动

*删除成功之后,刷新市场活动列表,显示第一页数据,保持每页显示条数不变

*删除失败,提示信息,列表不刷新

功能开发涉及到的知识点

1,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
2,ajax向后台发送请求时，可以通过data提交参数,data的数据格式有三种格式：
1)data:{
       k1:v1,
       k2:v2,
       ....
    }
    *劣势：只能向后台提交一个参数名对应一个参数值的数据，
           不能向后台提交一个参数名对应多个参数值的数据。
       只能向后台提交字符串数据
     优势：操作简单
2)data:k1=v1&k2:v2&....
    *优势：不但能够向后台提交一个参数名对应一个参数值的数据，
           还能向后台提交一个参数名对应多个参数值的数据。
     劣势：操作麻烦
           只能向后台提交字符串数据
3)data:FormData对象
     优势：不但能提交字符串数据，
            还能提交二进制数据
     劣势：操作更复杂

功能开发

1.首先根据客户需求画出UML时序图

2.编码与实现部分，mapper层

ActivityMapper接口

package com.it.crm.workbench.mapper;

import com.it.crm.workbench.entity.Activity;

import java.util.List;
import java.util.Map;

public interface ActivityMapper {
    /**
     * This method was generated by MyBatis Generator.
     * This method corresponds to the database table tbl_activity
     *
     * @mbggenerated Sat Jul 09 16:41:08 CST 2022
     */
    int deleteByPrimaryKey(String id);


    /**
     * This method was generated by MyBatis Generator.
     * This method corresponds to the database table tbl_activity
     *
     * @mbggenerated Sat Jul 09 16:41:08 CST 2022
     */
    int insertSelective(Activity record);

    /**
     * This method was generated by MyBatis Generator.
     * This method corresponds to the database table tbl_activity
     *
     * @mbggenerated Sat Jul 09 16:41:08 CST 2022
     */
    Activity selectByPrimaryKey(String id);

    /**
     * This method was generated by MyBatis Generator.
     * This method corresponds to the database table tbl_activity
     *
     * @mbggenerated Sat Jul 09 16:41:08 CST 2022
     */
    int updateByPrimaryKeySelective(Activity record);

    /**
     * This method was generated by MyBatis Generator.
     * This method corresponds to the database table tbl_activity
     *
     * @mbggenerated Sat Jul 09 16:41:08 CST 2022
     */
    int updateByPrimaryKey(Activity record);
    /**
     * 保存创建的市场活动
     */
    int insertActivity(Activity activity);

    /**
     *根据条件分页查询市场活动列表
     * @param map
     * @return
     */
    List<Activity> selectActivityByConditionForPage(Map<String,Object> map);

    /**
     * 根据条件查询市场活动的总条数
     * @param map
     * @return
     */
    int selectCountOfActivityByCondition(Map<String,Object> map);

    /**
     * 根据ids批量删除市场活动
     * @param ids
     * @return
     */
    int deleteActivityByIds(String[] ids);
}

ActivityMapper.xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.it.crm.workbench.mapper.ActivityMapper" >
  <resultMap id="BaseResultMap" type="com.it.crm.workbench.entity.Activity" >
    <!--
      WARNING - @mbggenerated
      This element is automatically generated by MyBatis Generator, do not modify.
      This element was generated on Sat Jul 09 16:41:08 CST 2022.
    -->
    <id column="id" property="id" jdbcType="CHAR" />
    <result column="owner" property="owner" jdbcType="CHAR" />
    <result column="name" property="name" jdbcType="VARCHAR" />
    <result column="start_date" property="startDate" jdbcType="CHAR" />
    <result column="end_date" property="endDate" jdbcType="CHAR" />
    <result column="cost" property="cost" jdbcType="VARCHAR" />
    <result column="description" property="description" jdbcType="VARCHAR" />
    <result column="create_time" property="createTime" jdbcType="CHAR" />
    <result column="create_by" property="createBy" jdbcType="VARCHAR" />
    <result column="edit_time" property="editTime" jdbcType="CHAR" />
    <result column="edit_by" property="editBy" jdbcType="VARCHAR" />
  </resultMap>
  <sql id="Base_Column_List" >
    <!--
      WARNING - @mbggenerated
      This element is automatically generated by MyBatis Generator, do not modify.
      This element was generated on Sat Jul 09 16:41:08 CST 2022.
    -->
    id, owner, name, start_date, end_date, cost, description, create_time, create_by, 
    edit_time, edit_by
  </sql>
  <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.String" >
    <!--
      WARNING - @mbggenerated
      This element is automatically generated by MyBatis Generator, do not modify.
      This element was generated on Sat Jul 09 16:41:08 CST 2022.
    -->
    select 
    <include refid="Base_Column_List" />
    from tbl_activity
    where id = #{id,jdbcType=CHAR}
  </select>
  <delete id="deleteByPrimaryKey" parameterType="java.lang.String" >
    <!--
      WARNING - @mbggenerated
      This element is automatically generated by MyBatis Generator, do not modify.
      This element was generated on Sat Jul 09 16:41:08 CST 2022.
    -->
    delete from tbl_activity
    where id = #{id,jdbcType=CHAR}
  </delete>

  <insert id="insertSelective" parameterType="com.it.crm.workbench.entity.Activity" >
    <!--
      WARNING - @mbggenerated
      This element is automatically generated by MyBatis Generator, do not modify.
      This element was generated on Sat Jul 09 16:41:08 CST 2022.
    -->
    insert into tbl_activity
    <trim prefix="(" suffix=")" suffixOverrides="," >
      <if test="id != null" >
        id,
      </if>
      <if test="owner != null" >
        owner,
      </if>
      <if test="name != null" >
        name,
      </if>
      <if test="startDate != null" >
        start_date,
      </if>
      <if test="endDate != null" >
        end_date,
      </if>
      <if test="cost != null" >
        cost,
      </if>
      <if test="description != null" >
        description,
      </if>
      <if test="createTime != null" >
        create_time,
      </if>
      <if test="createBy != null" >
        create_by,
      </if>
      <if test="editTime != null" >
        edit_time,
      </if>
      <if test="editBy != null" >
        edit_by,
      </if>
    </trim>
    <trim prefix="values (" suffix=")" suffixOverrides="," >
      <if test="id != null" >
        #{id,jdbcType=CHAR},
      </if>
      <if test="owner != null" >
        #{owner,jdbcType=CHAR},
      </if>
      <if test="name != null" >
        #{name,jdbcType=VARCHAR},
      </if>
      <if test="startDate != null" >
        #{startDate,jdbcType=CHAR},
      </if>
      <if test="endDate != null" >
        #{endDate,jdbcType=CHAR},
      </if>
      <if test="cost != null" >
        #{cost,jdbcType=VARCHAR},
      </if>
      <if test="description != null" >
        #{description,jdbcType=VARCHAR},
      </if>
      <if test="createTime != null" >
        #{createTime,jdbcType=CHAR},
      </if>
      <if test="createBy != null" >
        #{createBy,jdbcType=VARCHAR},
      </if>
      <if test="editTime != null" >
        #{editTime,jdbcType=CHAR},
      </if>
      <if test="editBy != null" >
        #{editBy,jdbcType=VARCHAR},
      </if>
    </trim>
  </insert>
  <update id="updateByPrimaryKeySelective" parameterType="com.it.crm.workbench.entity.Activity" >
    <!--
      WARNING - @mbggenerated
      This element is automatically generated by MyBatis Generator, do not modify.
      This element was generated on Sat Jul 09 16:41:08 CST 2022.
    -->
    update tbl_activity
    <set >
      <if test="owner != null" >
        owner = #{owner,jdbcType=CHAR},
      </if>
      <if test="name != null" >
        name = #{name,jdbcType=VARCHAR},
      </if>
      <if test="startDate != null" >
        start_date = #{startDate,jdbcType=CHAR},
      </if>
      <if test="endDate != null" >
        end_date = #{endDate,jdbcType=CHAR},
      </if>
      <if test="cost != null" >
        cost = #{cost,jdbcType=VARCHAR},
      </if>
      <if test="description != null" >
        description = #{description,jdbcType=VARCHAR},
      </if>
      <if test="createTime != null" >
        create_time = #{createTime,jdbcType=CHAR},
      </if>
      <if test="createBy != null" >
        create_by = #{createBy,jdbcType=VARCHAR},
      </if>
      <if test="editTime != null" >
        edit_time = #{editTime,jdbcType=CHAR},
      </if>
      <if test="editBy != null" >
        edit_by = #{editBy,jdbcType=VARCHAR},
      </if>
    </set>
    where id = #{id,jdbcType=CHAR}
  </update>
  <update id="updateByPrimaryKey" parameterType="com.it.crm.workbench.entity.Activity" >
    <!--
      WARNING - @mbggenerated
      This element is automatically generated by MyBatis Generator, do not modify.
      This element was generated on Sat Jul 09 16:41:08 CST 2022.
    -->
    update tbl_activity
    set owner = #{owner,jdbcType=CHAR},
      name = #{name,jdbcType=VARCHAR},
      start_date = #{startDate,jdbcType=CHAR},
      end_date = #{endDate,jdbcType=CHAR},
      cost = #{cost,jdbcType=VARCHAR},
      description = #{description,jdbcType=VARCHAR},
      create_time = #{createTime,jdbcType=CHAR},
      create_by = #{createBy,jdbcType=VARCHAR},
      edit_time = #{editTime,jdbcType=CHAR},
      edit_by = #{editBy,jdbcType=VARCHAR}
    where id = #{id,jdbcType=CHAR}
  </update>
  <insert id="insertActivity" parameterType="com.it.crm.workbench.entity.Activity" >
    <!--
      WARNING - @mbggenerated
      This element is automatically generated by MyBatis Generator, do not modify.
      This element was generated on Sat Jul 09 16:41:08 CST 2022.
    -->
    insert into tbl_activity (id, owner, name, start_date,
    end_date, cost, description,
    create_time, create_by)
    values (#{id,jdbcType=CHAR}, #{owner,jdbcType=CHAR}, #{name,jdbcType=VARCHAR}, #{startDate,jdbcType=CHAR},
    #{endDate,jdbcType=CHAR}, #{cost,jdbcType=VARCHAR}, #{description,jdbcType=VARCHAR},
    #{createTime,jdbcType=CHAR}, #{createBy,jdbcType=VARCHAR})
  </insert>
  
  <select id="selectActivityByConditionForPage" parameterType="map" resultMap="BaseResultMap">
    select a.id,u1.name as owner,a.name,a.start_date,a.end_date,a.cost,a.description,
    a.create_time,u2.name as create_by,a.edit_time,u3.name as edit_by
    from tbl_activity a
    join tbl_user u1 on a.owner=u1.id
    join tbl_user u2 on a.create_by=u2.id
    left join tbl_user u3 on a.edit_by=u3.id
    <where>
      <if test="name!=null and name!=''">
        and a.name like '%' #{name} '%'
      </if>
      <if test="owner!=null and owner!=''">
        and u1.name like '%' #{owner} '%'
      </if>
      <if test="startDate!=null and startDate!=''">
        and a.start_date&gt;=#{startDate}
      </if>
      <if test="endDate!=null and endDate!=''">
        and a.end_date&lt;=#{endDate}
      </if>
    </where>
    order by a.create_time desc
    limit #{pageNo},#{pageSize}
  </select>
  
  <select id="selectCountOfActivityByCondition" parameterType="map" resultType="int">
select count(*)
    from tbl_activity a
    join tbl_user u1 on a.owner=u1.id
    join tbl_user u2 on a.create_by=u2.id
    left join tbl_user u3 on a.edit_by=u3.id
    <where>
      <if test="name!=null and name!=''">
        and a.name like '%' #{name} '%'
      </if>
      <if test="owner!=null and owner!=''">
        and u1.name like '%' #{owner} '%'
      </if>
      <if test="startDate!=null and startDate!=''">
        and a.start_date&gt;=#{startDate}
      </if>
      <if test="endDate!=null and endDate!=''">
        and a.end_date&lt;=#{endDate}
      </if>
    </where>
  </select>

  <delete id="deleteActivityByIds" parameterType="string">
    delete from tbl_activity where id in
    <foreach collection="array" item="id" separator="," open="(" close=")">
      #{id}
    </foreach>
  </delete>
</mapper>

3.service层

ActivityService接口

package com.it.crm.workbench.service;

import com.it.crm.workbench.entity.Activity;

import java.util.List;
import java.util.Map;

public interface ActivityService {
    int saveCreateActivity(Activity activity);
    List<Activity> queryActivityByConditionForPage(Map<String,Object> map);
    int queryCountOfActivityByCondition(Map<String,Object> map);
    int removeActivityByIds(String[] ids);
}

ActivityServiceImpl类

package com.it.crm.workbench.service.impl;

import com.it.crm.workbench.entity.Activity;
import com.it.crm.workbench.mapper.ActivityMapper;
import com.it.crm.workbench.service.ActivityService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.Map;

@Service("activityService")
public class ActivityServiceImpl implements ActivityService {

    @Autowired
    private ActivityMapper activityMapper;
    @Override
    public int saveCreateActivity(Activity activity) {
        return activityMapper.insertActivity(activity);
    }

    @Override
    public List<Activity> queryActivityByConditionForPage(Map<String, Object> map) {
        return activityMapper.selectActivityByConditionForPage(map);
    }

    @Override
    public int queryCountOfActivityByCondition(Map<String, Object> map) {
        return activityMapper.selectCountOfActivityByCondition(map);
    }

    @Override
    public int removeActivityByIds(String[] ids) {
        return activityMapper.deleteActivityByIds(ids);
    }
}

4.controller层

ActivityController类

package com.it.crm.workbench.web.controller;

import com.it.crm.commons.contants.Contants;
import com.it.crm.commons.entity.ReturnObject;
import com.it.crm.commons.utils.DateUtils;
import com.it.crm.commons.utils.UUIDUtils;
import com.it.crm.settings.entity.User;
import com.it.crm.settings.service.UserService;
import com.it.crm.workbench.entity.Activity;
import com.it.crm.workbench.service.ActivityService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
public class ActivityController {

    @Autowired
    private UserService userService;
    @Autowired
    private ActivityService activityService;

    @RequestMapping(value = "/workbench/activity/index.do")
    public String index(HttpServletRequest request){
        //调用service层方法，查询所有的用户
        List<User> userList = userService.queryAllUsers();
        //把数据保存到request中
        request.setAttribute("userList",userList);
        //请求转发到市场活动主页面
        return "workbench/activity/index";
    }

    @RequestMapping(value = "/workbench/activity/saveCreateActivity.do")
    @ResponseBody
    public ReturnObject saveCreateActivity(Activity activity, HttpSession session){
        User user = (User) session.getAttribute(Contants.SESSION_USER);
        //封装参数
        activity.setId(UUIDUtils.getUUID());
        activity.setCreateTime(DateUtils.formateDateTime(new Date()));
        activity.setCreateBy(user.getId());
        ReturnObject returnObject=new ReturnObject();
        try{
            //调用service层方法，保存创建的市场活动
            int i = activityService.saveCreateActivity(activity);
            if (i>0){
                returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
            }else {
                returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
                returnObject.setMessage("系统忙，请稍后重试.....");
            }
        }catch (Exception e){
            e.printStackTrace();
            returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
            returnObject.setMessage("系统忙，请稍后重试.....");
        }
        return returnObject;
    }

    @RequestMapping(value = "/workbench/activity/queryActivityByConditionForPage.do")
    @ResponseBody
    public Object queryActivityByConditionForPage(String name,String owner,String startDate,String endDate,
                                                  int pageNo,int pageSize){
        //封装参数
        Map<String,Object> map=new HashMap<>();
        map.put("name",name);
        map.put("owner",owner);
        map.put("startDate",startDate);
        map.put("endDate",endDate);
        map.put("pageNo",(pageNo-1)*pageSize);
        map.put("pageSize",pageSize);
        //调用service层方法，查询数据
        List<Activity> activityList = activityService.queryActivityByConditionForPage(map);
        int totalRows = activityService.queryCountOfActivityByCondition(map);
        //根据查询结果生成响应信息
        Map<String,Object> retMap=new HashMap<>();
        retMap.put("activityList",activityList);
        retMap.put("totalRows",totalRows);
        return retMap;
    }

    @RequestMapping(value = "/workbench/activity/removeActivityByIds.do")
    @ResponseBody
    public Object removeActivityByIds(String[] id){
        ReturnObject returnObject=new ReturnObject();
        try{
            //调用service层的方法，删除市场活动
            int ret = activityService.removeActivityByIds(id);
            if (ret>0){
                returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
            }else {
                returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
                returnObject.setMessage("系统忙，请稍后重试...");
            }
        }catch (Exception e){
            e.printStackTrace();
            returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
            returnObject.setMessage("系统忙，请稍后重试...");
        }
        return returnObject;
    }

}

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()+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<base href="<%=basePath%>">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
<link 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-startTime").val();
			var endDate=$("#create-endTime").val();
			var cost=$.trim($("#create-cost").val());
			var description=$.trim($("#create-describe").val());
			//表单验证
			if (owner==""){
				alert("所有者不能为空!");
				return;
			}
			if (name==""){
			    alert("名称不能为空!");
				return;
			}
			if (startDate!="" && endDate!=""){
				//使用字符串的大小代替日期大小
				if (endDate<startDate){
					alert("结束日期不能比开始日期小!");
					return;
				}
			}
			var regExp=/^(([1-9]\d*)|0)$/;
			if (!regExp.test(cost)){
			    alert("成本只能是非负整数！");
			    return;
            }
			//发送请求
            $.ajax({
                url:"workbench/activity/saveCreateActivity.do",
                type:'post',
                data:{
                    owner:owner,
                    name:name,
                    startDate:startDate,
                    endDate:endDate,
                    cost:cost,
                    description:description
                },
                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");
                    }
                }
            });
		});

		//当容器加载完成之后，对容器调用工具函数
        $(".mydate").datetimepicker({
           language:'zh-CN',//语言
            format:'yyyy-mm-dd',//日期的格式
            minView:'month',//可以选择的最小视图
            initialDate:new Date(),//初始化显示的日期
            autoclose:true,//选择完日期后自动关闭日历
            todayBtn:true,//设置是否显示今天的按钮
            clearBtn:true//设置是否显示清空按钮
        });

		//当市场活动主页面加载完成后，查询所有数据的第一页，以及所有数据的总条数,默认每页显示10条
		queryActivityByConditionForPage(1,10);
        //给查询按钮添加单击事件
		$("#queryActivityBtn").click(function () {
			//查询所有符合条件数据的第一页以及所有符合条件数据的总条数
			queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination("getOption","rowsPerPage"));
		});

		//给"全选"按钮添加单击事件
        $("#checkAll").click(function () {
            //如果“全选”按钮是选中状态，那么列表中的所有checkbox都是选中状态
            $("#tBody input[type='checkbox']").prop("checked",this.checked);
        });
        //给数据项的多选框添加单击事件
     $("#tBody").on("click","input[type='checkbox']",function () {
         //如果列表中的所有checkbox都选中，则“全选”按钮也选中
         if ($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
             $("#checkAll").prop("checked",true);
         }else {//如果列表中的所有checkbox有一个没有选中，则“全选”按钮也不选中
             $("#checkAll").prop("checked",false);
         }
     });

     //给删除按钮添加单击事件
		$("#removeActivityBtn").click(function () {
			//收集参数
			//获取列表中所有被选中的checkbox
			var checkedIds=$("#tBody input[type='checkbox']:checked");
			if (checkedIds.size()==0){
				alert("请选择要删除的市场活动！");
				return;
			}
			var ids=""
			$.each(checkedIds,function () {//id=xxx&id=xxx&....id=xxx&
				ids+="id="+this.value+"&";
			});
			ids=ids.substr(0,ids.length-1);
		if (window.confirm("确定删除吗？")){
			//发送请求
			$.ajax({
				url:"workbench/activity/removeActivityByIds.do",
				type:'post',
				data:ids,
				dataType:'json',
				success:function (data) {
					if (data.code==1) {
						//刷新市场活动列表，显示第一页数据，保持每页显示的数据条数不变
						queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination("getOption","rowsPerPage"));
					}else {
						//提示信息
						alert(data.message);
					}
				}
			});
		}
		});

	});
	function queryActivityByConditionForPage(pageNo,pageSize){
		//收集参数
		var name=$("#query-name").val();
		var owner =$("#query-owner").val();
		var startDate=$("#query-startDate").val();
		var endDate=$("#query-endDate").val();
		//发送请求
		$.ajax({
			url:'workbench/activity/queryActivityByConditionForPage.do',
			type: 'post',
			data: {
				name:name,
				owner:owner,
				startDate:startDate,
				endDate:endDate,
				pageNo:pageNo,
				pageSize:pageSize
			},
			dataType: 'json',
			success:function (data) {
				//显示总条数
				// $("#totalRowsB").html(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);

				//取消全选按钮
                $("#checkAll").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:10,//最多可以显示的卡片数

					onChangePage:function (event,pageObj) {
						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="${requestScope.userList}" var="user">
										<option value=${user.id}>${user.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-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control mydate" id="create-startTime" readonly>
							</div>
							<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control mydate" id="create-endTime" 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-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-describe"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="saveCreateActivityBtn">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-marketActivityOwner">
									<c:forEach items="${requestScope.userList}" var="user">
										<option value="user.id">${user.name}</option>
									</c:forEach>
								</select>
							</div>
                            <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
                            </div>
						</div>

						<div class="form-group">
							<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-startTime" value="2020-10-10">
							</div>
							<label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-endTime" value="2020-10-20">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-cost" value="5,000">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-describe">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal">更新</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 导入市场活动的模态窗口 -->
    <div class="modal fade" id="importActivityModal" role="dialog">
        <div class="modal-dialog" role="document" style="width: 85%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
                </div>
                <div class="modal-body" style="height: 350px;">
                    <div style="position: relative;top: 20px; left: 50px;">
                        请选择要上传的文件：<small style="color: gray;">[仅支持.xls]</small>
                    </div>
                    <div style="position: relative;top: 40px; left: 50px;">
                        <input type="file" id="activityFile">
                    </div>
                    <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
                        <h3>重要提示</h3>
                        <ul>
                            <li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
                            <li>给定文件的第一行将视为字段名。</li>
                            <li>请确认您的文件大小不超过5MB。</li>
                            <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
                            <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
                            <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
                            <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
                </div>
            </div>
        </div>
    </div>
	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="query-name">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="query-owner">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control" type="text" id="query-startDate">
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control" type="text" id="query-endDate">
				    </div>
				  </div>
				  
				  <button type="button" class="btn btn-default" id="queryActivityBtn">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" id="createActivityBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#editActivityModal"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger" id="removeActivityBtn"><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="checkAll" /></td>
							<td>名称</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody id="tBody">

					</tbody>
				</table>
				<div id="demo_pag1"></div>
			</div>

			
		</div>
		
	</div>
</body>
</html>

功能测试：

进入市场活动页面，不选择市场活动数据项，直接点击删除时,弹出请选择市场活动提示

设置市场活动每页显示两条数据，当删除一条数据后，,刷新市场活动列表,显示第一页数据,保持每页显示条数不变

市场活动10成功删除，列表中不再显示市场活动10

做一道光

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
第3章业务功能开发（删除市场活动）

客户需求：用户在市场活动主页面,选择要删除的市场活动,点击"删除"按钮,弹出确认窗口;用户点击"确定"按钮,完成删除市场活动的功能.*每次至少删除一条市场活动*可以批量删除市场活动*删除成功之后,刷新市场活动列表,显示第一页数据,保持每页显示条数不变*删除失败,提示信息,列表不刷新功能开发涉及到的知识点1,js中截取字符串： str.substr(startIndex,length);//从下标为startIndex的字符开始截取，截取length个字符 str.substring(startInd
复制链接

扫一扫