这一版本会将市场活动这个模块完成。主要包括：市场活动的删除操作；修改市场活动；查看市场活动明细，跳转到详细信息页；市场活动备注的增删改查等。
1.删除市场活动
因为市场活动表关联到了市场活动备注表，所以在执行删除操作的时候，要先删除子表中的内容(备注表)，再删除主表(市场表)内容。另外，几个注意的点：
1)删除的时候至少选中一条记录，也可以一次删除多条。
2)删除之前要提示用户是否确定要删除（删除数据是比较危险的动作，必须提示！）
If(confirm(“确定删除吗？”)){
Ajax请求扔里边。
}
3)删除市场活动的关联删除市场活动的备注。(要先删除备注表，再删除市场活动)
因为可能多条记录被选中，所以传递参数就不能使用以前那种方式了，因为现在id可能对应多个值，需要使用拼接的方式，拼好之后再传。
//为删除按钮绑定事件
$("#deleteBtn").click(function (){
//拿到打钩的复选框
var $xuanze = $("input[name=xuanze]:checked"); //这是一个jQuery数组
if ($xuanze.length==0){
alert("请选择你要删除的市场活动~");
}else {
//可能选中的是多条记录，向后台发送请求，传递的id可能是多个，所以参数要使用拼接的方式
var param = "";
//遍历复选框，拿到里面的value，然后拼接
for (var i=0; i<$xuanze.length; i++){
param += "id="+$($xuanze[i]).val();
if (i<$xuanze.length-1){
param += "&";
}
}
if (confirm("确认要删除吗？删除了就没有了哦~")){
$.ajax({
url:"workbench/activity/deleteActivityByIds.do",
data:param,
type:"POST",
dataType:"json", //预期服务器返回的数据类型
success:function (data){
//data: 成功或失败？
if (data){
//刷列表
//pageList(1,2);
pageList(1,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
}else {
alert("删除成功");
}
}
})
}
}
})
在后台，controller里面使用request取得数组就行，在service里面，应该分多步进行。查看共需要删除多少条备注，和实际删除的备注信息条数进行对比。查看共删除了多少条市场活动，和需要删除多少条进行对比。
@Override
public Boolean deleteActivityByIds(String[] ids) {
boolean flag = true;
//获取要删除的备注的条数
int count1= activityRemarkDao.getTotalByAids(ids);
//删除市场活动备注
int count2 = activityRemarkDao.deleteActivityRemarkByAids(ids);
if (count1 != count2) {
flag = false;
}
//删除市场活动
int count3 = activityDao.deleteActivityByIds(ids);
if (count3 != ids.length) {
flag = false;
}
return flag;
}
在sql的mapper文件里面，注意使用拼接字符串，如：
<select id="getTotalByAids" resultType="int">
select count(*)
from tbl_activity_remark
where activityId in
<foreach collection="array" item="aid" open="(" separator="," close=")">
#{aid}
</foreach>
</select>
以上操作都不算太难。注意的点：
在每次执行删除操作后，应将全选按钮的√去除，这个也可以放在每次调用pageList()方法的时候去完成。
2.修改市场活动
一次只能修改一个。点击修改的时候，发送ajax get请求，提交市场活动id，根据id获取市场活动信息（需要activity对象和userList对象），展示modal。（所以要把id放到隐藏域中）
在实际的项目开发中，一定是按照先做添加，再做修改的这种顺序进行的。所以，为了节省开始时间，修改的操作一般直接copy添加的操作。
直接复制添加操作的就行，适当改改。
3.查看市场活动明细
点击某一条市场活动，会跳转到市场活动明细表，这个市场活动是我们拼接出来的。因为是跳转到一张全新的页面，肯定是全局刷新，即使这样，也可以有两种处理方式。
第一种是：直接跳转到那个页面，然后在那个页面自动发起ajax请求局部刷新，铺上那些数据。(传统的方式)
第二种是：先过一把后台，然后在后台把需要的数据取出来，扔到request域中，搭一个请求转发，跳转到新页面。这样处理，就可以在那个页面使用el表达式进行取值，非常的方便。所以使用第二种方式。
前端：
html += '<td><a style="text-decoration: none; cursor: pointer;" οnclick="window.location.href=\'workbench/activity/detail.do?id='+n.id+'\';">'+n.name+'</a></td>';
在controller里面，因为既需要数据也需要视图，所以返回一个ModelAndView对象，这个对象不用加@ResponseBody注解。
@RequestMapping("/workbench/activity/detail.do") //返回ModelAndView不需要加 @ResponseBody 注解
public ModelAndView detail(HttpServletRequest request, String id){
System.out.println("========市场活动控制器，执行跳转到市场活动详细信息页操作======");
Activity activity = activityService.detail(id);
ModelAndView mv = new ModelAndView();
mv.addObject("activity",activity);
mv.setViewName("/workbench/activity/detail.jsp");
return mv;
}
其他内容正常去取就行，还是比较简单。在前端（即：detail.jsp），使用el表达式把需要的值铺上即可。然后下面其他的内容，就是一张全新的前端页面了。不过很多内容还是重复的。
4.市场活动的编辑和删除操作
在这个页面也可以对市场活动进行修改和删除操作，可以直接使用前面已经做过的代码。
修改操作，因为永远只能修改一条，所以这个可以直接使用前面的代码，不用这里处理之后，是需要返回修改后的市场活动对象的，而之前则是去调用pageList()方法刷新列表。然后下面是我的思路，应该是可行的，看了后面的课，我更加坚信了我的观点，就是要修改的内容太多，处理起来有点麻烦，我就没做：
//应该刷新关闭页面后的市场活动的信息---但是这些值都是使用el表达式进行取值的，怎么更新呢？？？
//我的思路就是给下面这些内容都取一个id，然后修改里面的内容，如果这样的话，数据库返回的就应该是更新后的市场活动了
//上面说的办法应该是可行的。
关于删除操作，和前面不同的是，这里的删除操作只能删除一条，前面的代码就不能复用了，需要重新写，重新写也就是代码复制过来，删除一部门就行了，因为之前的是针对多条信息进行操作的。还有删除成功之后，应该跳转回之前的index页面。这个部分还是比较简单，内容重复了。
5.自动刷新备注信息
1)详细信息页是包含这条市场活动关联的备注信息的。我们这里是页面加载完毕后，自动发起ajax请求去处理、拼接处这部分内容，和之前的pageList()方法差不多。
2)生成的备注信息，以before的形式添加在备注输入框的上方。(也可以和以前一样，自己在那里建一个div，取id，但是前面做过很多了，所以不用这种方式了)
3)使用editFlag来操控显示的创建/修改时间创建/修改人。这是拼接的内容里面的具体的处理
4)在拼接的内容上，还要使用 on操控动态生成的备注的修改和删除按钮，鼠标划入划出操作。
找到那个div，把id加上，原来是没有的。
(在页面信息加载完毕后，执行了备注信息自动刷新操作后，的下方加)
$("#remarkBody").on("mouseover",".remarkDiv",function(){
$(this).children("div").children("div").show();
})
$("#remarkBody").on("mouseout",".remarkDiv",function(){
$(this).children("div").children("div").hide();
})
前端：
//根据市场活动id查询市场活动备注集合
function showRemarkList(){
$.ajax({
url:"workbench/activity/getActivityRemarkListByAid.do",
data:{"id":"${activity.id}"},
type:"GET",
dataType:"json", //预期服务器返回的数据类型
success:function (data){
//data: [{备注1},{备注2},{备注3}...]
var html = "";
$.each(data,function (i,n){
html += '<div id="'+n.id+'" class="remarkDiv" style="height: 60px;">';
html += '<img title="zhangsan" src="image/user-thumbnail.png" style="width: 30px; height:30px;">';
html += '<div style="position: relative; top: -40px; left: 40px;" >';
html += '<h5 id="h'+n.id+'">'+n.noteContent+'</h5>';
html += '<font color="gray">市场活动</font> <font color="gray">-</font> <b>${activity.name}</b> <small style="color: gray;" id="s'+n.id+'"> '+(n.editFlag==0?n.createTime:n.editTime)+' 由'+(n.editFlag==0?n.createBy:n.editBy)+'</small>';
html += '<div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">';
html += '<a class="myHref" href="javascript:void(0);" οnclick="editRemark(\''+n.id+'\')"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #FF0000;"></span></a>';
html += ' ';
html += '<a class="myHref" href="javascript:void(0);" οnclick="deleteRemark(\''+n.id+'\')"><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #FF0000;"></span></a>';
html += '</div>';
html += '</div>';
html += '</div>';
})
//铺上备注
$("#remarkDiv").before(html);
}
})
}
后台去查就行了，比较简单。
6.删除备注操作
因为删除和修改都是前端的bootstrap插件来的，要触发事件，使用的是：删除信息直接在动态生成信息的删除图片超链接上触发事件，可以查看上面的代码，onclick()方法，在下面也给出
html += '<a class="myHref" href="javascript:void(0);" οnclick="deleteRemark(\''+n.id+'\')"><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #FF0000;"></span></a>';
注意上面拼方法里面id的方式，必须要这样拼，规定是这样的。
在后台，根据id删除备注就行了，比较简单。删除之后，需要将该备注信息相关div组件移除，我们使用的方式是给相关的div取一个id，然后使用remove()方法删除，注意，这里的div是拼出来的，别找错地方了。
7.添加备注操作
1)添加前验证备注信息不能为空。
2)发送ajax post请求添加备注。
3)添加备注成功之后前端页面动态添加一个div
和之前一样，使用before进行追加
4)添加备注成功之后清空用户填写的备注信息。
8.修改备注操作
里面修改和上面的删除一样，是图片来的，也是使用图片超链接进行处理。
1)点击修改按钮之后，弹出修改备注的modal窗口。
2)修改备注的modal窗口上显示备注信息。(正常情况下，需要过后台，但是这里使用不过后台的方式，起id的方式拿到内容)。这里一个注意的点是，因为我们需要对多个地方起id，如果id重复，就可以在n.id前面加入一个字母，这样可以解决问题。
3)点击更新之后，前端的页面也是局部刷的，这也是将需要刷的地方起id，给里面的内容赋值。
//修改市场活动备注信息====此处的id为备注的id
function editRemark(id){
//拿到修改前的备注信息
var noteContent = $("#h"+id).html();
//铺上信息
$("#noteContent").val(noteContent);
$("#remarkId").val(id);
//打开备注模态窗口
$("#editRemarkModal").modal("show");
}
//为更新按钮绑定事件，更新市场活动备注
$("#updateRemarkBtn").click(function (){
var noteContent = $("#noteContent").val();
var id = $("#remarkId").val();
$.ajax({
url:"workbench/activity/updateActivityRemarkById.do",
data:{"noteContent":noteContent,"id":id},
type:"POST",
dataType:"json",
success:function (data){
//data: 成功或失败； 更新后的备注信息ar
if (data.success){
//关闭窗口
$("#editRemarkModal").modal("hide");
//局部刷新备注信息，修改人和修改时间
$("#h"+id).html(data.ar.noteContent);
$("#s"+id).html(data.ar.editTime+" 由"+data.ar.editBy);
}else {
alert("更新备注失败~");
}
}
})
})
后端正常操作就行了。
以上就是市场活动的全部内容了。下面一个版本是一个全新的模块。
最后挺多烦心事的=======================AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
加油吧~
过两天2021了，一切顺利啊~
4003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
