您的位置：首页 > Web前端 > JavaScript

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

2015-09-19 00:00 661 查看

模块一般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="新增模块" onclick="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 }"  onclick="updateModel(this)">编辑</a>   <a
href="javascript:void(0);" id="${l.id }"
onclick="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" onclick="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" onclick="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;

}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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