接上一篇：CRM-拦截器
1、要实现的页面
点击创建和修改弹出模态框
2、市场活动主页面index.jsp
1. 路径
在src/main/webapp/WEB-INF/pages/workbench/activity/index.jsp
2. <head>标签
- 导入bootstrap的css和js
- bootstrap是基于jquery的，所以还有导入jquery的js文件
- base标签
3. <body>标签
由要实现的页面可以看出：
- 需要查询相关的button按钮和input
- 创建修改等操作相关的button按钮
- table表格
- 分页查询
- 2个模态框
具体代码在最后
3、点击导航跳转到市场活动主页面
点击市场活动，这里显示刚刚写的市场活动主页面
3.1 如何显示在当前页面？
- 上面图片显示的业务主页面代码如下
- 左侧导航栏宽度为18%，右侧工作区用一个iframe标签来显示其他页面，宽度为83%，left为18%
- iframe的name为workAreaFrame
3.1.1第一种方法显示
直接在导航栏里市场活动的a标签中href改为要访问的controller路径，并提交target属性
值为iframe标签的name值
3.1.2 第二种方法显示
- 我们在script标签中定义js代码，实现iframe标签显示市场活动主页面index.jsp
- 如上图，为导航栏里市场活动的li标签添加id为“activityId"
,为其添加点击事件 - 在当前页面name为workAreaFrame的iframe标签打开，
- 路径为什么是/workbench/activity/toIndex.do，
- 我们要显示的是在WEB-INF目录下的资源，不能直接访问，所以要先写一个controller再跳转，把方法的访问路径给上面window.open()的url
- 下面写这个controller
3.2 ActivityController
- 路径为com.lyx.workbench.web.controller
- 代码如下
@Controller
public class ActivityController {
@Autowired
private UserService userService;
@RequestMapping("/workbench/activity/toIndex.do")
public String toIndex(HttpServletRequest request){
List<User> users = userService.queryAllUsers();
request.setAttribute("users",users);
return "workbench/activity/index";
}
}
- 方法返回值给workbench/activity/index，视图解析器会自动添加前缀/WEB-INF/pages/和后缀.jsp
- 代码里调用了service层的方法，这里是查tbl_user表的全部数据，查询结果保存再request作用域中，通过jstl的<c:foreach>标签把user的uLoginAct登录名显示在模态框的下拉列表中
- 下面来写dao和service层的代码以及模态框的下拉列表
4. dao和service层的代码
4.1 UserMapper.java
打开UserMapper接口类，并直接添加一个selectAllUsers()方法，返回值为List<User>
4.2 UserMapper.xml
打开UserMapper.xml映射文件，并直接添加一个select标签，id为上面定义的方法名
<select id="selectAllUsers" resultMap="BaseResultMap">
select
<include refid="Base_Column_List"/>
from tbl_user
where u_lock_state = '1'
</select>
4.3 UserService.java
打开UserService.java接口类，并直接添加一个queryAllUsers()方法，返回值为List<User>
4.4 UserServiceImpl.java
打开UserServiceImpl.java类，该类implements UserService
@Override重写上面定义的queryAllUsers()方法
@Override
public List<User> queryAllUsers() {
return userMapper.selectAllUsers();
}
5. 模态框的下拉列表
- 如下代码所示，select标签
2. <c:forEach>标签循环显示保存在request作用域中的数据，jstl不要忘了添加
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
5. 完整代码
5.1 业务主页面index.jsp
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="jquery/bootstrap-3.4.1/dist/css/bootstrap.min.css">
<script type="text/javascript" src="jquery/jquery-3.5.1.js"></script>
<script type="text/javascript" src="jquery/bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
function logout() {
window.location.href = "settings/qx/user/logout.do";
}
function closeModal() {
$("#closeBtn").click();
}
$("#activityId").click(function () {
window.open("/workbench/activity/toIndex.do", "workAreaFrame")
})
window.open("/workbench/main/index.do", "workAreaFrame")
});
window.onload = function () {
var ps = document.getElementById("navigation").getElementsByTagName("li");
for (var i in ps) {
ps[i].onmouseover = function () {
this.setAttribute("class", "active");
}
ps[i].onmouseout = function () {
this.removeAttribute("class");
}
}
}
</script>
</head>
<body>
<div>
<%--提示框，默认隐藏--%>
<div id="isLogout" class="modal fade" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button id="closeBtn" type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">提示框</h4>
</div>
<div class="modal-body"><p>确定退出吗？</p></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="logout();">退出</button>
<button type="button" class="btn btn-primary" onclick="closeModal();">取消</button>
</div>
</div><!-- /.modal-content -->
</div>
</div>
<%--顶部--%>
<div style="background-color: #3c3c3c;width: 100%;height: 50px;margin-top: -20px">
<div class="page-header" style="color: wheat;margin-top: 0px;">
<h3>客户信息管理系统<small>@xmq</small></h3>
<%--下拉列表--%>
<div class="btn-group" style="float: right;right:60px; top: -30px;width: 20px;">
<button type="button" style="width: 70px;text-align: left;" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
${sessionScope.sessionUser.uLoginAct}<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a>Action</a></li>
<li><a>hhh</a></li>
<li><a>登录</a></li>
<li id="logout" data-target="#isLogout" data-toggle="modal"
style="text-align:left;left: 5px;"><a><span class="glyphicon glyphicon-off"
aria-hidden="true"></span>
退出</a></li>
</ul>
</div>
</div>
</div>
<%--中间--%>
<div style="position: absolute;top:50px;bottom: 30px;left:0px;right: 0px;">
<%--左侧导航栏--%>
<div style="left:0px;width: 18%;height: 100%;position: relative;overflow: auto">
<ul id="navigation" class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
工作台</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
动态</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
审批</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
客户公海</a></li>
<li role="presentation" id="activityId"><a>
<span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span>
市场活动</a></li>
<li role="presentation"><a>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
线索（潜在客户）</a></li>
<li role="presentation"><a>
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
客户</a></li>
<li role="presentation"><a>
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
联系人</a></li>
<li role="presentation"><a>
<span class="glyphicon glyphicon-yen" aria-hidden="true"></span>
交易</a></li>
<li role="presentation"><a>
<span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span>
售后回访</a></li>
<li role="presentation"><a>
<span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
统计图表</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-file" aria-hidden="true"></span>
报表</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
销售订单</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-send" aria-hidden="true"></span>
发货单</a></li>
</ul>
</div>
<%--右侧工作区--%>
<div id="workArea" style="position:absolute;top:0px;left:18%;width:82%;height:100%;">
<iframe style="border-width:0px;width:100%;height:100%;" name="workAreaFrame">
</iframe>
</div>
</div> </div>
</body>
</html>
5.2 市场活动主页面index.jsp
<%
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</title>
<link rel="stylesheet" href="jquery/bootstrap-3.4.1/dist/css/bootstrap.min.css">
<script type="text/javascript" src="jquery/jquery-3.5.1.js"></script>
<script type="text/javascript" src="jquery/bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
<script type="text/javascript"></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">
<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">
<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"/></div>
</div>
<div class="form-group col-md-12">
<label>开始日期</label>
<input type="text" class="form-control"/>
<label>结束日期</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group col-md-12">
<label>成本</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group col-md-12">
<label>描述</label>
<textarea class="form-control" rows="3"></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">保存</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">
<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">
<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"/></div>
</div>
<div class="form-group col-md-12">
<label>开始日期</label>
<input type="text" class="form-control"/>
<label>结束日期</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group col-md-12">
<label>成本</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group col-md-12">
<label>描述</label>
<textarea class="form-control" rows="3"></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">保存</button>
</div>
</form>
</div>
</div>
</div>
<!--主页面-->
<div>
<!--搜索-->
<div>
<h2>市场活动列表</h2>
<hr/>
<div>
<div class="row">
<div class="col-xs-2">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">名称</button>
</span>
<input type="text" class="form-control">
</div><!-- 名称 -->
</div><!-- /.col-lg-2 -->
<div class="col-xs-2">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">所有者</button>
</span>
<input type="text" class="form-control">
</div><!-- 所有者 -->
</div><!-- /.col-lg-2 -->
<div class="col-xs-2">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">开始日期</button>
</span>
<input type="text" class="form-control">
</div><!-- 开始日期-->
</div><!-- /.col-lg-2 -->
<div class="col-xs-2">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">结束日期</button>
</span>
<input type="text" class="form-control">
</div><!-- 结束日期-->
</div><!-- /.col-lg-2 -->
<div class="col-xs-2">
<button type="button" class="btn btn-sm btn-success">查询</button>
</div>
</div><!-- /.row -->
</div>
</div>
<br/><br/>
<!--操作按钮-->
<div class="btn-group" role="group">
<button type="button" style="pointer-events:auto" class="btn btn-primary" data-toggle="modal"
data-target="#create-ActivityModel">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
创建
</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#edit-ActivityModel">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
修改
</button>
<button type="button" class="btn btn-warning">
<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"></th>
<th>名称</th>
<th>所有者</th>
<th>开始日期</th>
<th>结束日期</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>hhh</td>
<td>hhh</td>
<td>hhh</td>
<td>hhh</td>
</tr>
</tbody>
</table>
<!--分页查询-->
<div class="col-md-12">
<button class="btn btn-default col-md-1">共xx条数据</button>
<div class="btn-group col-md-4" role="group" aria-label="...">
<button class="btn btn-default">显示</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
10
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">10</a></li>
<li><a href="#">20</a></li>
</ul>
</div>
<button class="btn btn-default">条/页</button>
</div>
<div class="col-md-4">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
