毕业设计(十九)---文章模块管理 div弹出层的应用简单js操作

本文链接：https://blog.csdn.net/mamba10/article/details/8545723

模块一般10个，不会增加减少，但是也做了管理功能。

点击新增模块弹出新增模块弹出层，

点击编辑，弹出编辑模块弹出层

点击删除，询问确定删除，点击确定，删除

直接贴代码，有简单注释。

jsp页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath + "admin/"%>">
<script type='text/javascript' src="../dwr/util.js"></script>
<script type='text/javascript' src="../dwr/engine.js"></script>
<script type='text/javascript' src="../dwr/interface/manager.js"></script>
<script type="text/javascript">
	function tanchuAdd() {
		document.getElementById('add').style.display = 'block';
		document.getElementById('fade').style.display = 'block';
	}
	function guanbiAdd() {
		document.getElementById('add').style.display = 'none';
		document.getElementById('fade').style.display = 'none';
	}
	function tanchuUpdate() {
		document.getElementById('update').style.display = 'block';
		document.getElementById('fade').style.display = 'block';
	}
	function guanbiUpdate() {
		document.getElementById('update').style.display = 'none';
		document.getElementById('fade').style.display = 'none';
	}

	function updateModel(m) {
		document.getElementById("modelname").value=m.name;
		document.getElementById("modelid").value=m.id;
		tanchuUpdate();
	}
	function deleteModel(m){
		if(confirm("确定删除此模块?"))
			{
			manager.deleteModel(m.id,callback);
			}else{
				alert("已经取消删除");
			}
	}
	function callback() {
		document.getElementById("form1").submit();
	}
	//删除操作另外有一种方法. 就是在action里面写删除代码,提交到里面需要删除的Model的id就行
	//这里使用dwr动态先删除,然后再重新查询一下, form1 表单只是起到重新定位action的作用.
</script>
<style type="text/css">
/* 重要的css, 覆盖全部浏览器*/
.black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1001;
	-moz-opacity: 0.5;
	opacity: .50;
	filter: alpha(opacity = 80);
}

.white_content {
	display: none;
	position: fixed;
	top: 15%;
	left: 25%;
	width: 40%;
	height: 30%;
	padding: 1px;
	border: 10px solid orange;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}
</style>
</head>
<body>
	<jsp:include page="headnav.jsp"></jsp:include>
	<form id="form1" action="managermodel.action" method="post"></form>
	<div id="ding">
		<input type="button" value="新增模块" οnclick="tanchuAdd();" />
		<table width="100%" border="0" cellpadding="0" cellspacing="1"
			bgcolor="#a8c7ce">
			<tr>
				<td width="20%" height="20" bgcolor="d3eaef" class="STYLE6"><div
						align="center">
						<span class="STYLE10">序号</span>
					</div></td>
				<td width="40%" height="20" bgcolor="d3eaef" class="STYLE6"><div
						align="center">
						<span class="STYLE10">用户名</span>
					</div></td>
				<td width="50%" height="20" bgcolor="d3eaef" class="STYLE6"><div
						align="center">
						<span class="STYLE10">基本操作</span>
					</div></td>
			</tr>

			<s:iterator value="list" var="l" status="st">
				<tr>
					<td height="15" bgcolor="#FFFFFF" class="STYLE19"><div
							align="center">
							<s:property value="#st.index + 1" />
						</div></td>
					<td height="15" bgcolor="#FFFFFF" class="STYLE19">
						<div align="center">${ l.name }</div></td>
					<td height="15" bgcolor="#FFFFFF">
						<div align="center">
							<span class="STYLE21"> <a href="javascript:void(0);"
								id="${l.id }" name="${ l.name }"  οnclick="updateModel(this)">编辑</a>   <a
								href="javascript:void(0);" id="${l.id }" 
								οnclick="deleteModel(this)">删除</a> </span>
						</div></td>
				</tr>
			</s:iterator>
		</table>
	</div>

<!-- 增加模块的弹出层  -->
	<div id="add" class="white_content">
		<div>
			<div style="float:left">增加模块</div>
			<div style="float:right;">
				<img style="cursor:pointer" width="20px" height="20px"
					src="images1/cha.png" οnclick="guanbiAdd();" />
			</div>
		</div>
		<br> <br>
		<form action="managermodel!addModel.action" method="post">
			<div style="position: relative;">
				输入模块名称：<input type="text" name="modelname" />
							
			</div>
			<br>  <input type="submit" value="确定添加" />
		</form>
	</div>
	
	
	<!-- 编辑模块的弹出曾. -->
	<div id="update" class="white_content">
		<div>
			<div style="float:left">编辑模块</div>
			<div style="float:right;">
				<img style="cursor:pointer" width="20px" height="20px"
					src="images1/cha.png" οnclick="guanbiUpdate();" />
			</div>
		</div>
		<br> <br>
		<!-- 因为编辑模块向服务器提交修改后的modelname和不能修改的modelid.所以modelid使用隐藏域 -->
		<form action="managermodel!updateModel.action" method="post">
			<div style="position: relative;">
				修改模块名称：<input type="text" name="modelname" id="modelname"  />
							<input type="hidden" name="modelid" id="modelid" />
			</div>
			<br>  <input type="submit" value="确定修改" />
		</form>
	</div>
	<!-- 覆盖全屏的div层, -->
	<div id="fade" class="black_overlay"></div>

</body>
</html>

action处理代码：

@Component("ActionManagerModel")
@Scope("prototype")
public class ActionManagerModel extends ActionSupport {
	

	private Manager manager;
	private List<Model> list ;
	private String modelname;
	private int modelid;
	//省略  set  get 方法。。
	@Resource
	public void setManager(Manager manager) {
		this.manager = manager;
	}
	@Override
	public String execute() throws Exception {

		list = manager.showAllModel();
		return SUCCESS;
	}
	
	public String addModel() throws Exception{
		
		Model m = new Model();
		m.setName(modelname);
		
		manager.addModel(m);
		list = manager.showAllModel();
		return SUCCESS;
	}
	
public String updateModel() throws Exception{
		
		Model m = new Model();
		m.setId(modelid);
		m.setName(modelname);
		
		manager.updateModel(m);
		list = manager.showAllModel();
		return SUCCESS;
		
	}
	
}