客户需求：
用户在市场活动主页面,点击市场活动名称超级链接,跳转到明细页面,完成查看市场活动明细的功能.
*在市场活动明细页面,展示:
-市场活动的基本信息
-该市场活动下所有的备注信息
功能开发知识点
1.市场活动和市场活动备注为一对多的关系
查看市场活动明细：
tbl_activity tbl_activity_remark
id name id note_content activity_id
1001 act1 111 remark1 1001
1002 act2 222 remark2 1001
333 remark3 1002
//查询act1下所有的备注
select *
from tbl_activity_remark
where activity_id=1001
2.使用标签保存数据，以便在需要的时候能够获取到这些数据:
给标签添加属性：
如果是表单组件标签，优先使用value属性，只有value不方便使用时，使用自定义属性;
如果不是表单组件标签，不推荐使用value，推荐使用自定义属性。
获取属性值时：
如果获取表单组件标签的value属性值：dom对象.value
jquery对象.val()
如果自定义的属性，不管是什么标签，只能用：jquery对象.attr("属性名");
<a style="text-decoration: none; cursor: pointer;" οnclick="">ii测试03_2</a>
window.location.href='workbench/activity/detailActivity.do?id=74f60cc6f64c452fbf02c1aaa3b7e2fb
功能开发:
1.根据客户需求画出查看市场活动明细的UML时序图
2.activityMapper接口
/**
* 根据id查询市场活动的明细信息
* @param id
* @return
*/
Activity selectActivityForDetailById(String id);activityMapper.xml文件
<select id="selectActivityForDetailById" parameterType="string" 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 a.id=#{id}
</select>3.activityService接口
activityServiceImpl类
4.activityController类
@RequestMapping(value = "/workbench/activity/detailActivity.do")
public String detailActivity(String id,HttpServletRequest request){
//调用service层
Activity activity = activityService.queryActivityForDetailById(id);
List<ActivityRemark> remarkList = activityRemarkService.queryActivityRemarkForDetailByActivityId(id);
//把数据保存到request中
request.setAttribute("activity",activity);
request.setAttribute("remarkList",remarkList);
//请求转发
return "workbench/activity/detail";
}5.activity的index.jsp页面
$.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='workbench/activity/detailActivity.do?id="+obj.id+"'\">"+obj.name+"</a></td>";
htmlStr+="<td>"+obj.owner+"</td>";
htmlStr+="<td>"+obj.startDate+"</td>";
htmlStr+="<td>"+obj.endDate+"</td>";
htmlStr+="</tr>";
});6.activityRemarkMapper接口
/**
* 根据activityId查询市场活动下所有备注的明细信息
* @param activityId
* @return
*/
List<ActivityRemark> selectActivityRemarkForDetailByActivityId(String activityId);activityRemarkMapper.xml文件
<select id="selectActivityRemarkForDetailByActivityId" parameterType="string" resultMap="BaseResultMap">
select ar.id,ar.note_content,ar.create_time,u1.name as create_by,ar.edit_time,u2.name as edit_by,ar.edit_flag
from tbl_activity_remark ar
join tbl_user u1 on ar.create_by=u1.id
left join tbl_user u2 on ar.edit_by=u2.id
where ar.activity_id=#{activityId}
</select>7.activityRemarkService接口
activityRemarkServiceImpl类
package com.it.crm.workbench.service.impl;
import com.it.crm.settings.mapper.UserMapper;
import com.it.crm.workbench.entity.ActivityRemark;
import com.it.crm.workbench.mapper.ActivityRemarkMapper;
import com.it.crm.workbench.service.ActivityRemarkService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service("activityRemarkService")
public class ActivityRemarkServiceImpl implements ActivityRemarkService {
@Autowired
private ActivityRemarkMapper activityRemarkMapper;
@Override
public List<ActivityRemark> queryActivityRemarkForDetailByActivityId(String activityId) {
return activityRemarkMapper.selectActivityRemarkForDetailByActivityId(activityId);
}
}
9.activity的detail.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>
<meta charset="UTF-8">
<base href="<%=basePath%>">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<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">
//默认情况下取消和保存按钮是隐藏的
var cancelAndSaveBtnDefault = true;
$(function(){
$("#remark").focus(function(){
if(cancelAndSaveBtnDefault){
//设置remarkDiv的高度为130px
$("#remarkDiv").css("height","130px");
//显示
$("#cancelAndSaveBtn").show("2000");
cancelAndSaveBtnDefault = false;
}
});
$("#cancelBtn").click(function(){
//显示
$("#cancelAndSaveBtn").hide();
//设置remarkDiv的高度为130px
$("#remarkDiv").css("height","90px");
cancelAndSaveBtnDefault = true;
});
$(".remarkDiv").mouseover(function(){
$(this).children("div").children("div").show();
});
$(".remarkDiv").mouseout(function(){
$(this).children("div").children("div").hide();
});
$(".myHref").mouseover(function(){
$(this).children("span").css("color","red");
});
$(".myHref").mouseout(function(){
$(this).children("span").css("color","#E6E6E6");
});
});
</script>
</head>
<body>
<!-- 修改市场活动备注的模态窗口 -->
<div class="modal fade" id="editRemarkModal" role="dialog">
<%-- 备注的id --%>
<input type="hidden" id="remarkId">
<div class="modal-dialog" role="document" style="width: 40%;">
<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">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="noteContent" class="col-sm-2 control-label">内容</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="noteContent"></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="updateRemarkBtn">更新</button>
</div>
</div>
</div>
</div>
<!-- 返回按钮 -->
<div style="position: relative; top: 35px; left: 10px;">
<a href="javascript:void(0);" onclick="window.history.back();"><span class="glyphicon glyphicon-arrow-left" style="font-size: 20px; color: #DDDDDD"></span></a>
</div>
<!-- 大标题 -->
<div style="position: relative; left: 40px; top: -30px;">
<div class="page-header">
<h3>市场活动-${requestScope.activity.name} <small>${requestScope.activity.startDate} ~ ${requestScope.activity.endDate}</small></h3>
</div>
</div>
<br/>
<br/>
<br/>
<!-- 详细信息 -->
<div style="position: relative; top: -70px;">
<div style="position: relative; left: 40px; height: 30px;">
<div style="width: 300px; color: gray;">所有者</div>
<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${requestScope.activity.owner}</b></div>
<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">名称</div>
<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${requestScope.activity.name}</b></div>
<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
</div>
<div style="position: relative; left: 40px; height: 30px; top: 10px;">
<div style="width: 300px; color: gray;">开始日期</div>
<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${requestScope.activity.startDate}</b></div>
<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">结束日期</div>
<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${requestScope.activity.endDate}</b></div>
<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
</div>
<div style="position: relative; left: 40px; height: 30px; top: 20px;">
<div style="width: 300px; color: gray;">成本</div>
<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${requestScope.activity.cost}</b></div>
<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -20px;"></div>
</div>
<div style="position: relative; left: 40px; height: 30px; top: 30px;">
<div style="width: 300px; color: gray;">创建者</div>
<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>${requestScope.activity.createBy} </b><small style="font-size: 10px; color: gray;">${requestScope.activity.createTime}</small></div>
<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
</div>
<div style="position: relative; left: 40px; height: 30px; top: 40px;">
<div style="width: 300px; color: gray;">修改者</div>
<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>${requestScope.activity.editBy} </b><small style="font-size: 10px; color: gray;">${requestScope.activity.editTime}</small></div>
<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
</div>
<div style="position: relative; left: 40px; height: 30px; top: 50px;">
<div style="width: 300px; color: gray;">描述</div>
<div style="width: 630px;position: relative; left: 200px; top: -20px;">
<b>
${requestScope.activity.description}
</b>
</div>
<div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
</div>
</div>
<!-- 备注 -->
<div style="position: relative; top: 30px; left: 40px;">
<div class="page-header">
<h4>备注</h4>
</div>
<%--遍历remarkList,显示所有的备注--%>
<c:forEach items="${remarkList}" var="remark">
<div class="remarkDiv" style="height: 60px;">
<img title="${remark.createBy}" src="image/user-thumbnail.png" style="width: 30px; height:30px;">
<div style="position: relative; top: -40px; left: 40px;" >
<h5>${remark.noteContent}</h5>
<font color="gray">市场活动</font> <font color="gray">-</font> <b>${activity.name}</b> <small style="color: gray;">
<c:if test="${remark.editFlag=='1'}">${remark.editTime}</c:if>
<c:if test="${remark.editFlag!='1'}">${remark.createTime}</c:if>
由
${remark.editFlag=='1'?remark.editBy:remark.createBy}
${remark.editFlag=='1'?'修改':"创建"}
</small>
<div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">
<a class="myHref" remarkId="${remark.id}" href="javascript:void(0);"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #E6E6E6;"></span></a>
<a class="myHref" remarkId="${remark.id}" href="javascript:void(0);"><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #E6E6E6;"></span></a>
</div>
</div>
</div>
</c:forEach>
<div id="remarkDiv" style="background-color: #E6E6E6; width: 870px; height: 90px;">
<form role="form" style="position: relative;top: 10px; left: 10px;">
<textarea id="remark" class="form-control" style="width: 850px; resize : none;" rows="2" placeholder="添加备注..."></textarea>
<p id="cancelAndSaveBtn" style="position: relative;left: 737px; top: 10px; display: none;">
<button id="cancelBtn" type="button" class="btn btn-default">取消</button>
<button type="button" class="btn btn-primary">保存</button>
</p>
</form>
</div>
</div>
<div style="height: 200px;"></div>
</body>
</html>功能测试：
进入市场活动列表，任意点击一条市场活动数据的名称
扫一扫
177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
