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

SSH系列：（17）角色-权限管理(前台JSP)

2016-08-19 01:37 381 查看
1、listUI.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="/struts-tags" prefix="s" %>
<html>
<head>
<%@include file="/common/header.jsp"%>
<title>角色管理</title>
<script type="text/javascript">
//全选、全反选
function doSelectAll(){
// jquery 1.6 前
//$("input[name=selectedRow]").attr("checked", $("#selAll").is(":checked"));
//prop jquery 1.6+建议使用
$("input[name=selectedRow]").prop("checked", $("#selAll").is(":checked"));
}
//新增角色
function doAdd(){
document.forms[0].action = "${basePath}/tax/role_addUI.action";
document.forms[0].submit();
}
//编辑角色
function doEdit(id){
document.forms[0].action = "${basePath}/tax/role_editUI.action?role.roleId="+id;
document.forms[0].submit();
}
//删除角色
function doDelete(id){
document.forms[0].action = "${basePath}/tax/role_delete.action?role.roleId="+id;
document.forms[0].submit();
}
//批量删除
function doDeleteAll(){
document.forms[0].action = "${basePath}/tax/role_deleteSelected.action";
document.forms[0].submit();
}
</script>
</head>
<body class="rightBody">
<form name="form1" action="" method="post">
<div class="p_d_1">
<div class="p_d_1_1">
<div class="content_info">
<div class="c_crumbs"><div><b></b><strong>角色管理 </strong></div> </div>
<div class="search_art">
<li>
角色名称：<s:textfield name="role.name" cssClass="s_text" id="roleName"  cssStyle="width:160px;"/>
</li>
<li><input type="button" class="s_button" value="搜 索" onclick="doSearch()"/></li>
<li style="float:right;">
<input type="button" value="新增" class="s_button" onclick="doAdd()"/> 
<input type="button" value="删除" class="s_button" onclick="doDeleteAll()"/> 
</li>
</div>

<div class="t_list" style="margin:0px; border:0px none;">
<table width="100%" border="0">
<tr class="t_tit">
<td width="30" align="center"><input type="checkbox" id="selAll" onclick="doSelectAll()" /></td>
<td width="120" align="center">角色名称</td>
<td align="center">权限</td>
<td width="80" align="center">状态</td>
<td width="120" align="center">操作</td>
</tr>
<s:iterator value="roleList" status="vs">
<tr <s:if test="#vs.odd">bgcolor="f8f8f8"</s:if> >
<td align="center"><input type="checkbox" name="selectedRow" value="<s:property value="roleId"/>"/></td>
<td align="center"><s:property value="name"/></td>
<td align="center">
<s:iterator value="rolePrivileges">
<s:property value="#privilegeMap[id.code]"/>  
</s:iterator>
</td>
<td align="center"> <s:if test="state == 1">有效</s:if><s:else>无效</s:else> </td>
<td align="center">
<a href="javascript:doEdit('<s:property value="roleId"/>')">编辑</a>
<a href="javascript:doDelete('<s:property value="roleId"/>')">删除</a>
</td>
</tr>
</s:iterator>
</table>
</div>
</div>
<div class="c_pate" style="margin-top: 5px;">
<table width="100%" class="pageDown" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td align="right">
总共1条记录，当前第 1 页，共 1 页   
<a href="#">上一页</a>  <a href="#">下一页</a>
到 <input type="text" style="width: 30px;" onkeypress="if(event.keyCode == 13){doGoPage(this.value);}" min="1"
max="" value="1" />   
</td>
</tr>
</table>
</div>
</div>
</div>
</form>

</body>
</html>
知识点（1）：从map当中取数据
后台代码
//列表页面
public String listUI(){
//加载权限集合
ActionContext.getContext().getContextMap().put("privilegeMap", PrivilegeStatics.PRIVILEGE_MAP);
roleList = roleService.findAll();
return "listUI";
}
在JSP页面取出privilegeMap对象中的数据
<s:iterator value="roleList" status="vs">
<s:iterator value="rolePrivileges">
<s:property value="#privilegeMap[id.code]"/>
</s:iterator>
</s:iterator>


知识点（2）：
在定义的时候，虽然是String类型，但是在JSP页面判断的时候，似乎没有区分
private String state;
<s:if test="state == 1">有效</s:if><s:else>无效</s:else>


2、addUI.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<%@include file="/common/header.jsp"%>
<title>角色管理</title>
</head>
<body class="rightBody">
<form id="form" name="form" action="${basePath}/tax/role_add.action" method="post" enctype="multipart/form-data">
<div class="p_d_1">
<div class="p_d_1_1">
<div class="content_info">
<div class="c_crumbs"><div><b></b><strong>角色管理</strong> - 新增角色</div></div>
<div class="tableH2">新增角色</div>
<table id="baseInfo" width="100%" align="center" class="list" border="0" cellpadding="0" cellspacing="0"  >
<tr>
<td class="tdBg" width="200px">角色名称：</td>
<td><s:textfield name="role.name" /></td>
</tr>
<tr>
<td class="tdBg" width="200px">角色权限：</td>
<td>
<!--
This is just a detail of the Java Map API.
Instead, it iterates over Entry objects.
The Entry object has two properties, the key and the value.
By default, the select component’s listKey attribute will be set to key.
Also by default, the listValue attribute will be set to value.
If you’re using Maps, you can sometimes accept these defaults.
因此，如果listKey="key"并且listValue="value"，那么这两个值可以省略。
另外，如果省略name属性，会报错！
-->
<s:checkboxlist list="#privilegeMap" name="privilegeIds" listKey="key" listValue="value"></s:checkboxlist>
</td>
</tr>
<tr>
<td class="tdBg" width="200px">状态：</td>
<td><s:radio list="#{'1':'有效','0':'无效'}" name="role.state" value="1"/></td>
</tr>
</table>

<div class="tc mt20">
<input type="submit" class="btnB2" value="保存" />
    
<input type="button"  onclick="javascript:history.go(-1)" class="btnB2" value="返回" />
</div>
</div></div></div>

</form>
</body>
</html>


知识点（1）：checklistbox
<!--
This is just a detail of the Java Map API.
Instead, it iterates over Entry objects.
The Entry object has two properties, the key and the value.
By default, the select component’s listKey attribute will be set to key.
Also by default, the listValue attribute will be set to value.
If you’re using Maps, you can sometimes accept these defaults.
因此，如果listKey="key"并且listValue="value"，那么这两个值可以省略。
另外，如果省略name属性，会报错！
-->
<s:checkboxlist list="#privilegeMap" name="privilegeIds" listKey="key" listValue="value"></s:checkboxlist>
知识点（2）：radio 有默认值
<s:radio list="#{'1':'有效','0':'无效'}" name="role.state" value="1"/>


3、editUI.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<%@include file="/common/header.jsp"%>
<title>角色管理</title>
</head>
<body class="rightBody">
<form id="form" name="form" action="${basePath}/tax/role_edit.action" method="post" enctype="multipart/form-data">
<div class="p_d_1">
<div class="p_d_1_1">
<div class="content_info">
<div class="c_crumbs"><div><b></b><strong>角色管理</strong> - 编辑角色</div></div>
<div class="tableH2">编辑角色</div>
<table id="baseInfo" width="100%" align="center" class="list" border="0" cellpadding="0" cellspacing="0"  >
<tr>
<td class="tdBg" width="200px">角色名称：</td>
<td><s:textfield name="role.name" /></td>
</tr>
<tr>
<td class="tdBg" width="200px">角色权限：</td>
<td>
<s:checkboxlist list="privilegeMap" name="privilegeIds"></s:checkboxlist>
</td>
</tr>
<tr>
<td class="tdBg" width="200px">状态：</td>
<td><s:radio list="#{'1':'有效','0':'无效'}" name="role.state"/></td>
</tr>
</table>
<s:hidden name="role.roleId"/>
<div class="tc mt20">
<input type="submit" class="btnB2" value="保存" />
    
<input type="button"  onclick="javascript:history.go(-1)" class="btnB2" value="返回" />
</div>
</div></div></div>

</form>
</body>
</html>


知识点（1）：radio 在编辑页面，不需要设置默认值，而是使用它的实际值
<s:radio list="#{'1':'有效','0':'无效'}" name="role.state"/>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ssh
相关文章推荐
新的分享
章节导航