当前位置：网站首页>修改市场活动表
修改市场活动表
2022-06-09 08:33:00 【素心如月娅】
接上一篇：SSM实现选中删除
1. 要实现的功能
- 选中某一行数据，点击修改按钮，弹出模态框，模态框中显示的是当前被选中行的信息
- 弹出模态框，并显示被选中行的数据，注意所有者是下拉列表，默认显示当前行的所有者
3. 修改并保存
4. 保存修改前有验证
5. 数据正确后点击保存，弹出提示：修改成功，点击确定，关闭弹出框和模态框，重新刷新页面
2. 分析
- body页面写个修改市场活动的模态框
- script写js代码，选择器.click(function(){})，为修改按钮添加事件
- 点击修改按钮弹出模态框，先判断是否选中checkbox
- 如果选中了，在弹出模态框前获取checkbox的value，即activityId，把id通过$.ajax({})的data：{id：id}传给Controller层的方法，返回的数据通过：选择器.val(“xxx”)，显示到模态框的input标签中
- 点击保存：选择器.click(function(){})，为模态框的保存按钮添加事件
- 先获取所有input的value值，通过$.ajax({})的data：{}传给Controller层的方法
- 在ActivityController.java中定义两个方法:（1）根据id查市场活动表，参数为String类型，返回值为Activity类型；（2）修改市场活动表，参数为Activity类型，返回值为int类型
- 下面从Service+Dao实现这两个方法
3. Dao
3.1 ActivityMapper.java
在使用mybatis-generator时自动生成的方法里有Activity selectByPrimaryKey(String activityId);
：搭建Mybatis逆向工程
代码如下：
Activity selectByPrimaryKey(String activityId);
3.2 ActivityMapper.xml
<select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="string">
select
<include refid="Base_Column_List"/>
from tbl_activity
where activity_id = #{
id}
</select>
4. Service层
4.1 ActivityService.java接口
写一个selectActivityById()方法
//id查市场活动
Activity selectActivityById(String id);
4.2 ActivityServiceImpl.xml
@Override
public Activity selectActivityById(String id) {
return activityMapper.selectByPrimaryKey(id);
}
5. Controller层
@RequestMapping("/workbench/activity/selectActivityById.do")
public @ResponseBody Object selectActivityById(String id) {
Activity activity = activityService.selectActivityById(id);
return activity;
}
6. jsp页面
6.1 html-body
修改市场活动的模态框：
input标签都写在form表单中
所有者：
名称：
开始日期和结束日期
成本和描述
6.2 html-script
6.2.1 点击修改按钮，弹出模态框
- 先判断checkbox是否被选中 ，也就是判断size(）是否大于或等于0；如果不是，则.get(0).value获取一个dom对象的value值
- $.ajax({})发送请求，如果成功，则为模态框的元素赋值并弹出模态窗口：
$("#edit-ActivityModal").modal("show");
6.2.2 点击模态框的保存按钮，保存修改
获取input内容
判断用户输入的参数是否正确
$.ajax({})发送数据，运行成功，关闭模态窗口，并重新查询一遍数据
data的参数格式为：
7. 完整代码
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<base href="<%=basePath%>">
<title>市场活动主页面</title>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/sample in bootstrap v3/jquery/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/sample in bootstrap v3/bootstrap/css/bootstrap.css">
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/sample in bootstrap v3/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<!-- PAGINATION plugin -->
<link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/bs_pagination-master/jquery.bs_pagination.min.css">
<script type="text/javascript" src="jquery/bs_pagination-master/bs_pagination-master/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/bs_pagination-master/localization/en.min.js"></script>
<script type="text/javascript"> $(function () {
//给“创建”按钮添加单击事件 $("#createActivityBtn").click(function () {
//初始化,每次点击创建按钮，清空上次填写的数据 $("#create-ActivityForm").get(0).reset(); //弹出创建市场活动的模态窗口 $("#create-ActivityModel").modal("show"); }); //创建市场活动的模态窗口"保存"按钮的单击事件 $("#saveActivityBtn").click(function () {
var owner = $("#create-activityOwner").val(); var name = $.trim($("#create-activityName").val()); var startDate = $("#create-activityStartDate").val(); var endDate = $("#create-activityEndDate").val(); var cost = $.trim($("#create-activityCost").val()); var description = $.trim($("#create-activityDescription").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/save.do", data: {
activityOwner: owner, activityName: name, activityStartDate: startDate, activityEndDate: endDate, activityCost: cost, activityDescription: description }, type: "post", success: function (ret) {
if (ret.code == "1") {
alert("保存成功"); $("#create-ActivityModel").modal("hide"); queryActivityByConditionForPage(1, $("#demo_page1").bs_pagination('getOption', 'rowsPerPage')); } else {
alert(ret.message); $("#create-ActivityModel").modal("show"); } } }); }); //日历插件 $("#create-activityStartDate").datetimepicker({
language: 'zh-CN', format: 'yyyy-mm-dd', minView: 'month', initialDate: new Date(), autoclose: true, todayBtn: true, clearBtn: true }); $("#create-activityEndDate").datetimepicker({
language: 'zh-CN', format: 'yyyy-mm-dd', minView: 'month', initialDate: new Date(), autoclose: true, todayBtn: true, clearBtn: true }); $("#query_startDate").datetimepicker({
language: 'zh-CN', format: 'yyyy-mm-dd', minView: 'month', initialDate: new Date(), autoclose: true, todayBtn: true, clearBtn: true }); $("#query_endDate").datetimepicker({
language: 'zh-CN', format: 'yyyy-mm-dd', minView: 'month', initialDate: new Date(), autoclose: true, todayBtn: true, clearBtn: true }); $("#edit-startDate").datetimepicker({
language:'zh-CN', format:'yyyy-mm-dd', minView:'month', initialDate:new Date(), autoclose:true, todayBtn:true, clearBtn:true }) $("#edit-endDate").datetimepicker({
language:'zh-CN', format:'yyyy-mm-dd', minView:'month', initialDate:new Date(), autoclose:true, todayBtn:true, clearBtn:true }) //当市场活动主页面加载完成，查询所有数据的第一页集街所有数据的总条数 queryActivityByConditionForPage(1, 5); //给查询按钮添加单击事件 $("#queryActivityBtn").click(function () {
//查询所有符合条件的数据 queryActivityByConditionForPage(1, $("#demo_page1").bs_pagination('getOption', 'rowsPerPage')); }); //给全选按钮添加单击事件 $("#checkAll").click(function () {
//如果“全选”按钮是选中状态，则列表中所有checkbox都选中 $("#tbodyId input[type='checkbox']").prop("checked", this.checked); }); //给动态元素添加单击事件 $("#tbodyId").on("click", "input[type='checkbox']", function () {
//如果列表中的所有checkbox都选中，则全选按钮也选中 if ($("#tbodyId input[type='checkbox']").size() == $("#tbodyId input[type='checkbox']:checked").size()){
$("#checkAll").prop("checked", true); } else {
//如果列表中的所有checkbox至少一个没选中，则全选按钮取消选中 $("#checkAll").prop("checked", false); } }); //删除市场活动 $("#deleteActivityBtn").click(function () {
var ids = $("#tbodyId input[type='checkbox']:checked"); if (ids.size() == 0) {
alert("请选中要删除的市场活动"); return; } if (window.confirm("确定删除吗？")) {
var myids = ""; $.each(ids, function () {
myids += "id=" + this.value + "&"; }) myids = myids.substr(0, myids.length - 1); $.ajax({
url: "/workbench/activity/delete.do", data: myids, type: "post", dataType: "json", success: function (ret) {
if (ret.code == 1) {
alert("删除成功!"); queryActivityByConditionForPage(1, $("#demo_page1").bs_pagination('getOption', 'rowsPerPage')); } else {
alert(ret.message); } } }) } }); //点击“修改”市场活动弹出窗口 $("#editActivityBtn").click(function () {
//获取列表中被选中的checkbox var checkerIds = $("#tbodyId input[type='checkbox']:checked"); if (checkerIds.size() == 0) {
alert("请选择要修改的市场活动"); return; } if (checkerIds.size() > 1) {
alert("每次只能选中一条数据修改"); return; } // var id = checkerIds.val(); //get(0)获得的是一个DOM对象 var id = checkerIds.get(0).value; $.ajax({
url: "/workbench/activity/selectActivityById.do", data: {
id: id}, type: "post", dataType: "json", success: function (ret) {
$("#edit-id").val(ret.activityId); $("#edit-ActivityOwner").val(ret.activityOwner); $("#edit-ActivityName").val(ret.activityName); $("#edit-startDate").val(ret.activityStartDate); $("#edit-endDate").val(ret.activityEndDate); $("#edit-cost").val(ret.activityCost); $("#edit-describe").val(ret.activityDescription); //弹出模态窗口 $("#edit-ActivityModel").modal("show"); } }) }); //点击“保存”按钮，保存修改 $("#edit-saveBtn").click(function () {
//1.获取内容 var aId = $("#edit-id").val(); var aOwner = $("#edit-ActivityOwner").val(); var aName = $("#edit-ActivityName").val(); var aStartDate = $("#edit-startDate").val(); var aEndDate = $("#edit-endDate").val(); var aCost = $("#edit-cost").val(); var aDescribe = $("#edit-describe").val(); if (aOwner == null || aOwner == "") {
alert("名称和所有者不能为空"); return; } if (aStartDate > aEndDate) {
alert("开始日期必须小于结束日期"); return; } var regExp = /^[1-9][0-9]*$/; if (!regExp.test(aCost)) {
alert("成本必须是正整数"); return; } $.ajax({
url: "/workbench/activity/updateActivity.do", data: {
activityId: aId, activityOwner: aOwner, activityName: aName, activityStartDate: aStartDate, activityEndDate: aEndDate, activityCost: aCost, activityDescription: aDescribe }, type:"post", dataType:"json", success :function (ret) {
if(ret.code==1){
alert("修改成功！"); $("#edit-ActivityModel").modal("hide"); queryActivityByConditionForPage(1,$("#demo_page1").bs_pagination("getOption","rowsPerPage")); }else {
alert(ret.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/search.do", data: {
name: name, owner: owner, startDate: startDate, endDate: endDate, pageNo: pageNo, pageSize: pageSize }, type: 'post', dataType: 'json', success: function (ret) {
//显示总条数 $("#totalRowsId").text(ret.totalRows); //显示市场活动的列表,遍历activityList,拼接所有行数据 var htmlStr = ""; $.each(ret.activities, function (index, object) {
htmlStr += "<tr>"; htmlStr += "<td><input type=\"checkbox\" value=\"" + object.activityId + "\"></td>"; htmlStr += "<td><a style=\"text-decoration: none;cursor:pointer;\" οnclick=\"window.location.href='#'\">" + object.activityName + "</a></td>"; htmlStr += "<td>" + object.activityOwner + "</td>"; htmlStr += "<td>" + object.activityStartDate + "</td>"; htmlStr += "<td>" + object.activityEndDate + "</td>"; htmlStr += "</tr>"; }); //$("#tbodyId").html(htmlStr);覆盖追加 //$("#tbodyId").append(jsp页面片段的字符串);追加显示 $("#tbodyId").html(htmlStr); //由于只更新了tbody的内容，所以全选按钮没有更新，如果第一页选中，则第二页也会显示 $("#checkAll").prop("checked", false); var totalPages = ret.totalRows % pageSize == 0 ? ret.totalRows / pageSize : ret.totalRows / pageSize + 1; $("#demo_page1").bs_pagination({
currentPage: pageNo,//当前页号,相当于pageNo rowsPerPage: pageSize,//每页显示条数，相当于pageSize totalRows: ret.totalRows,//总条数 totalPages: totalPages,//总页数 visiblePageLinks: 5,//最多可以显示的卡片数 showGoToPage: true,//是否显示“跳转到”部分，默认true--显示 showRowsPerPate: true,//是否显示“每页显示条数”部分，默认true--显示 showRowsInfo: true,//是否显示记录的信息，默认true--显示 onChangePage: function (event, pageObj) {
queryActivityByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage); } }); } }); } </script>
</head>
<body>
<!--创建市场活动的模态框-->
<div class="modal fade" id="create-ActivityModel" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">创建市场活动</h4>
</div>
<form class="form-inline" id="create-ActivityForm">
<div class="modal-body col-md-12">
<div class="form-group">
<label class="col-md-2 control-label">所有者<span style="color: red;">*</span></label>
<div class="col-md-10">
<select class="form-control" id="create-activityOwner">
<c:forEach items="${requestScope.users}" var="u">
<option value="${u.userId}">${u.uLoginAct}</option>
</c:forEach>
</select>
</div>
<label class="col-md-2 control-label">名称<span style="color:red">*</span></label>
<div class="col-md-10"><input type="text" id="create-activityName" class="form-control"/></div>
</div>
<div class="form-group col-md-12">
<label>开始日期</label>
<input type="text" class="form-control" id="create-activityStartDate" readonly/>
<label>结束日期</label>
<input type="text" class="form-control" id="create-activityEndDate" readonly/>
</div>
<div class="form-group col-md-12">
<label>成本</label>
<input type="text" class="form-control" id="create-activityCost"/>
<label>描述</label>
<textarea class="form-control" rows="3" id="create-activityDescription"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="saveActivityBtn">保存</button>
</div>
</form>
</div>
</div>
</div>
<!--修改市场活动的模态框-->
<div class="modal fade" id="edit-ActivityModel" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">修改市场活动</h4>
</div>
<form class="form-inline">
<input type="hidden" id="edit-id">
<div class="modal-body col-md-12">
<div class="form-group">
<label class="col-md-2 control-label">所有者<span style="color: red;">*</span></label>
<div class="col-md-10">
<select class="form-control" id="edit-ActivityOwner">
<c:forEach items="${requestScope.users}" var="u">
<option value="${u.userId}">${u.uLoginAct}</option>
</c:forEach>
</select>
</div>
<label class="col-md-2 control-label">名称<span style="color:red">*</span></label>
<div class="col-md-10"><input type="text" class="form-control" id="edit-ActivityName"/></div>
</div>
<div class="form-group col-md-12">
<label>开始日期</label>
<input type="text" class="form-control" id="edit-startDate" readonly/>
<label>结束日期</label>
<input type="text" class="form-control" id="edit-endDate" readonly/>
</div>
<div class="form-group col-md-12">
<label>成本</label>
<input type="text" class="form-control" id="edit-cost"/>
</div>
<div class="form-group col-md-12">
<label>描述</label>
<textarea class="form-control" rows="3" id="edit-describe"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="edit-saveBtn">保存</button>
</div>
</form>
</div>
</div>
</div>
<!--主页面-->
<div>
<!--搜索-->
<div>
<h2>市场活动列表</h2>
<hr/>
<div>
<div class="row">
<div class="col-xs-3">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">名称</button>
</span>
<input type="text" class="form-control" id="query_name">
</div><!-- 名称 -->
</div>
<div class="col-xs-3">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">所有者</button>
</span>
<input type="text" class="form-control" id="query_owner">
</div><!-- 所有者 -->
</div>
<div class="col-xs-3">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">开始日期</button>
</span>
<input type="text" class="form-control" id="query_startDate">
</div><!-- 开始日期-->
</div>
<div class="col-xs-3">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">结束日期</button>
</span>
<input type="text" class="form-control" id="query_endDate">
</div><!-- 结束日期-->
</div>
<div class="col-xs-3">
<button id="queryActivityBtn" type="button" class="btn btn-success">查询</button>
</div>
</div>
</div>
</div>
<br/><br/>
<!--操作按钮-->
<div class="btn-group" role="group">
<button type="button" style="pointer-events:auto" class="btn btn-primary" id="createActivityBtn">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
创建
</button>
<button type="button" class="btn btn-default" id="editActivityBtn">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
修改
</button>
<button type="button" class="btn btn-warning" id="deleteActivityBtn">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>删除
</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-import" aria-hidden="true"></span>上次到列表数据（导入）
</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-export" aria-hidden="true"></span>下载戴列表数据（批量导入）
</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-export" aria-hidden="true"></span>下载列表数据（选择导出）
</button>
</div>
</div>
<!--表格-->
<table class="table table-striped text-left">
<thead>
<tr>
<th><input type="checkbox" id="checkAll"></th>
<th>名称</th>
<th>所有者</th>
<th>开始日期</th>
<th>结束日期</th>
</tr>
</thead>
<tbody id="tbodyId">
</tbody>
</table>
<!--分页查询-->
<div class="col-md-12" id="demo_page1">
</div>
</div>
</body>
</html>
边栏推荐
- GC学习笔记
- 阿裏雲ack免密拉取企業版acr鏡像
- English语法_地点副词
- JS 实现三级联动
- SQL：体育馆的人流量（连续日期案例通用解决方案）
- Clickhouse distributed table & local table & Clickhouse realize time series data management and mining
- Do you really know tcp/ip
- Could not find artifact com. retail. stock:retail-stock-center:pom:1.0-SNAPSHOT in snapshots
- Excerpt of a verse of compassion and gladness
- RMAN备份概念_关于RMAN备份的多个拷贝
猜你喜欢
whatweb
关于＃oracle＃的问题：为啥按照晚上教程链接DBMS还是无法输出结果
【天线】【2】一些名词和简单概念的解释，仍然
SQL: 员工薪水中位数
About Eigendecomposition
![[pat (basic level) practice] - [sort] 1077 mutual evaluation score calculation](/img/0c/f9deb9b02936e1fc2a53ef3e44c6bf.jpg)
[pat (basic level) practice] - [sort] 1077 mutual evaluation score calculation
Leetcode basic programming: Search
![[reading point paper] ghostnet: more features from cheapoperations convolution operation is still expensive, and feature graph redundancy can be obtained by linear transformation](/img/9c/24efb72fadf0b3b69f2bb3908e6521.png)
[reading point paper] ghostnet: more features from cheapoperations convolution operation is still expensive, and feature graph redundancy can be obtained by linear transformation
Compilation_ Basic concepts
Compilation_ Common instructions
随机推荐
Compilation_ Common instructions
SQL：体育馆的人流量（连续日期案例通用解决方案）
系统运维系列 之Clickhouse数据类型整理
华云数据入选IDC《工业软件与工业互联网发展趋势》云基础设施代表厂商
Do you really know tcp/ip
阿里云ack免密拉取企业版acr镜像
2022-2028 global Supplementary Cementitious Materials (SCM) industry research and trend analysis report
flyWay管理数据库
阿里云IOT
Sql: median employee salary
2022-2028 global anti UAV (c-uas) technology industry research and trend analysis report
SQL: 超过经理收入的员工
SQL: 查找重复的电子邮箱
Oracle本地管理的表空间
[paper introduction] clip: image and natural language pairing pre training transferable visual models from natural language supervision
MySQL adds a string after the field
[pat (basic level) practice] - [sort] 1077 mutual evaluation score calculation
Apple wins judge dismisses iPhone Security Fraud Class Action
Nodejs使用Net模块创建TCP服务器和客户端
whatweb