JavaEE项目实战（OA系统）之十一_部门管理之五

最新推荐文章于 2022-10-26 21:45:20 发布

hanhf

最新推荐文章于 2022-10-26 21:45:20 发布

阅读量1.8k

点赞数 1

分类专栏： ssh框架文章标签： java ee spring hibernate struts

本文链接：https://blog.csdn.net/hanhf/article/details/52493346

版权

ssh框架专栏收录该内容

22 篇文章 9 订阅

订阅专栏

　　JavaEE项目实战（OA系统）之十一_部门管理之五

　　五、web页面

　　共有三个页面，页面结构如下：

　　首页index.jsp直接放在WebRoot下，然后在WebRoot下创建manage目录，用于放oa系统的整个网页，将oa系统的网页放在一个目录里，方便以后保护这个目录。

　　manage目录下，再按照模块建目录，例如基础信息管理就创建basic目录。

　　index.jsp内容：

<body>
<a href="toDeptList.action">部门管理</a>
</body>

　　deptList.jsp内容：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OA系统-部门管理</title>
</head>
<body>
	<input type="button" value="新增部门"
		οnclick="javascript:window.location.href='toDeptAdd.action';" />
	<table border="1">
		<tr>
			<td>部门编号</td>
			<td>部门名称</td>
			<td>上级部门编号</td>
			<td>备注</td>
			<td>操作</td>
		</tr>
		<c:forEach items="${deptList}" var="dept">
			<tr>
				<td>${dept.id}</td>
				<td>${dept.name}</td>
				<td>${dept.pId}</td>
				<td>${dept.remark}</td>
				<td><a href="deptDel.action?deptId=${dept.id}">删除</a> <a
					href="toDeptEdit.action?deptId=${dept.id}">修改</a></td>
			</tr>
		</c:forEach>
	</table>
</body>
</html>

　　在页面中对列表执行遍历，使用了jstl+el表达式的技术。

　　点击按钮要执行跳转，需要调用javascript，并设置window.location.href属性。

deptAddEdit.jsp内容：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OA系统-部门管理</title>
<script>
	function saveDept() {
		var oper = form1.oper.value;
		if (oper == "add") {
			form1.action = "deptAdd.action";
		} else if (oper == "edit") {
			form1.action = "deptUpdate.action";
		}
		form1.submit();
	}
</script>
</head>
<body>
	<form id="form1" name="form1" method="post">
		<input id="oper" name="oper" type="hidden" value="${oper}" /> <input
			name="dept.id" type="hidden" value="${dept.id}" />
		<table>
			<tr>
				<td>上级部门编号：</td>
				<td><input name="dept.pId" type="text" value="${dept.pId}" /></td>
			</tr>
			<tr>
				<td>部门名称：</td>
				<td><input name="dept.name" type="text" value="${dept.name}" /></td>
			</tr>
			<tr>
				<td>说明：</td>
				<td><input name="dept.remark" type="text"
					value="${dept.remark}" /></td>
			</tr>
			<tr>
				<td> </td>
				<td><input type="button" value="保存" οnclick="saveDept();" /> <input
					type="button" value="返回"
					οnclick="javascript:window.location.href='toDeptList.action';" /></td>
			</tr>
		</table>
	</form>
</body>
</html>

　　我们把新增和编辑做在一个页面里，这时，需要有一个变量区分是新增还是编辑。这里使用了隐藏域。

　　在提交时，调用了一个javascript函数，在函数中判断该变量是新增还是编辑，提交给不同的action。