一、界面原型
二、具体操作
三、显示角色(需添加直接勾选)
四、jsp页面
1.为角色分配权限
<%@ page language="java" pageEncoding="GBK"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>为角色分配权限</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script language="javascript" src="common/js/jquery-1.4.2.js"></script>
<script language="javascript"
src="common/js/jquery_treeview/jquery.treeview.js"></script>
<link type="text/css" rel="stylesheet" href="common/js/jquery_treeview/jquery.treeview.css" />
<link rel="stylesheet" href="common/css/treeview.css" type="text/css"></link>
</head>
<body>
<s:form action="testSubmit.action"method="post">
<ul id="tree"><s:iterator value="#request.list"id="node">
<s:if test="#node.superiorId==0"><li><input type="checkbox"name="nodeid"value="<s:property value="#node.nodeId"/>"id="cb_<s:property value="#node.nodeId"/>"<s:property value="%{#node.nodeId in nodeIds ? 'checked' : ''}"/>>
<label for="cb_<s:property value="#node.nodeId"/>"><span class="folder">
<strong><s:property value="#node.nodeName"/></strong></span></label><ul><s:iterator value="#request.list"id="nodeids">
<s:if test="#node.nodeId == #nodeids.superiorId"><li><input type="checkbox"name="nodeid"value="<s:property value="#nodeids.nodeId"/>"id="cb_<s:property value="#nodeids.nodeId"/>"<s:property value="%{#nodeids.nodeId in nodeIds ? 'checked' : ''}"/>>
<label for="cb_<s:property value="#nodeids.nodeId"/>"><span class="folder"><s:property value="#nodeids.nodeName"/></span></label><div style="position: absolute; left: 300px; width: auto;"><s:iterator value="#request.buttonList"id="buttonid">
<s:if test="#buttonid.btnsupnodeid==#nodeids.nodeId"><input type="checkbox"name="buttonId"value="<s:property value="#buttonid.btnId"/>"<s:iterator value="#request.button"id="bun">
<s:if test="#buttonid.btnId == #bun.btnId">checked="checked"</s:if></s:iterator>/>
<s:property value="#buttonid.btName"/></s:if></s:iterator></div></li></s:if>
</s:iterator></ul></li></s:if></s:iterator></ul>
<input type="hidden"value="<s:property value="#request.roleid"/>"name="roleid">
<input type="submit"value="提交"class="btnbg">
</s:form>
</body>
<script type="text/javascript">
function showbutton(obj){if(obj=1){document.getElementById("div").style.display="block"}}
function doSelectAll(checked){$("[name=nodeid]").attr("checked",checked)}$(
function(){$("#tree").treeview();$("[name=nodeid]").click(
function(){var checked=this.checked;$(this).siblings("ul").find("input").attr("checked",checked);if(checked){$(this).parents("li").children("input").attr("checked",true)}else{
if($(this).parent().siblings("li").children("input:checked").size()==0){$(this).parent().parent().siblings("input").attr("checked",false);
var startPoint=$(this).parent().parent();if(startPoint.parent().siblings("li").children("input:checked").size()==0){startPoint.parent().parent().siblings("input").attr("checked",false)}}}})});
</script>
</html>
2.新增角色
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>新增角色</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="<%=basePath%>userinfo/CSS/adduser.css" type="text/css"></link>
</head>
<body>
<form action="roleInfo.action" method="post" name="myForm">
<div id="page">
<div class="title_cl">
<img class="imgcss" src="<%=basePath%>userinfo/images/roleimg.jpg" width="70" height="80" alt=""/>
<h2>新增角色</h2>
<span><a href="javascript:history.go(-1);">返回</a></span>
<div class="content">
<table id="tab_con" cellpadding="0" cellspacing="0" >
<tr>
<td width="80" height="30" style="text-align:right; font-size: 12px;">角色名称:</td>
<td width="120" height="30" ><input type="text" size="20" maxlength="10" name="roleInfo.rolename" id="roleName" οnmοuseοut="" />
<div style="position: absolute; left:380px; top:123px; width:300px; color:#FF0000;"><s:property value="#request.message"/></div>
</td>
</tr>
<tr>
<td width="80" align="right" style="font-size: 12px;">角色描述:</td>
<td width="120"><textarea rows="3" id="roledesc" name="roleInfo.roledesc" id="roledesc"></textarea></td>
</tr>
<tr>
<td width="120" height="50" style="border-right:0;text-align: right;"><input type="button" value="确 定" οnclick="test()"/></td>
<td width="120" height="50" style="border-left:0; text-align: center;"><input type="reset" value="重 置"/></td>
</tr>
</table>
</div>
</div>
</div>
</form>
<script type="text/javascript">
function test(){
var roleName=document.getElementById("roleName").value;
var roledesc=document.myForm.roledesc.value;
var ss=roledesc.length;
var role=roleName.replace(/(^\s+)|(\s+$)/g,"");
var roledesc=document.getElementById("roledesc").value;
if(role=="" || role==null){
alert("请输入角色名称");
}else{
if(ss>40){
alert("您输入的角色描述大于40个字符,必须小于40个字符");
return false;
}else{
document.myForm.submit();
}
}
}
</script>
</body>
</html>
3.修改角色信息
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>修改角色信息</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="<%=basePath %>userinfo/CSS/adduser.css" type="text/css"></link>
</head>
<body>
<form action="updaterole.action?roleId=<s:property value="#request.role.roleid"/>" method="post" name="myForm">
<div id="page">
<div class="title_cl">
<img class="imgcss" src="<%=basePath %>userinfo/images/roleimg.jpg" width="70" height="80" alt=""/>
<h2>修改角色信息</h2>
<span><a href="javascript:history.go(-1);">返回</a></span>
<div class="content">
<table id="tab_con" cellpadding="0" cellspacing="0" >
<tr>
<td width="80" height="30" style="text-align:right; font-size: 12px;">角色名称:</td>
<td width="120" height="30" ><input type="text" size="20" name="roleInfo.rolename" id="rolename" maxlength="20" value="<s:property value="#request.role.rolename"/>"/>
<div id="div1" style="position: absolute; left:380px; top:123px; width:300px; color:#FF0000;"><s:property value="#request.message"/></div>
</td>
</tr>
<tr>
<td width="80" align="right" style="font-size: 12px;">角色描述:</td>
<td width="120">
<textarea rows="3" cols="20" name="roleInfo.roledesc" id="roledesc"><s:property value="#request.role.roledesc"/></textarea>
</td>
</tr>
<tr>
<td width="120" height="50" style="border-right:0;text-align: right;"><input type="button" value="确 定" οnclick="test()"/></td>
<td width="120" height="50" style="border-left:0; text-align: center;"><input type="reset" value="重 置"/></td>
</tr>
</table>
</div>
</div>
</div>
</form>
<script type="text/javascript">
var roledesc=document.getElementById("roledesc").value;
var desc=document.myForm.roledesc.value;
var ss=desc.length;
function test(){
var rolename=document.getElementById("rolename").value;
var role=rolename.replace(/(^\s+)|(\s+$)/g,"");
if(role==''){
document.getElementById("div1").innerHTML="请输入角色名!";
return false;
}
if(ss>40){
alert("您输入的角色描述大于40个字符,必须小于40个字符");
return false;
}else{
document.myForm.submit();
}
}
</script>
</body>
</html>
4.角色信息管理
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="/src/ChkTag.tld" prefix="n"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath %>" target="RigthFrame">
<title>角色信息管理</title>
<link rel="stylesheet" href="admin/RoleManege/css/roleInfoManage.css" type="text/css"></link>
</head>
<body>
<form action="RoleByName.action" method="post">
<div id="con_left">
<input type="hidden" name="user.userId" value='<s:property value="userinfo.userId"/>'/>
<div id="topbar">
<img src="common/images/ico05.gif" width="8" height="12" style="vertical-align: middle;"></img>
<span id="sp_cl"><strong>角色管理</strong></span><span id="gt">>> </span><span><strong>角色信息</strong></span>
</div>
<div id="col">
<div class="header">
<span>
<label>角色名称:</label>
<input type="text" class="txt_cl" name="roleInfo.rolename" id="rolename" />
<input type="submit" value="查询" id="Findsubmit" class="btnbg" />
<n:ChkTag permissionId="insert">
<input type="button" value="添加角色" class="btnbg" οnclick="addLick();" />
</n:ChkTag>
</span>
</div>
<div class="conpart">
<div>
<table>
<tr id="tr_id1">
<td>角色名称</td>
<td>角色描述</td>
<td>分配权限</td>
<td> 操作</td>
</tr>
<tbody class="tbody">
<s:iterator value="#request.rolelist">
<tr>
<td title="<s:property value="rolename" default="无" />">
<s:property value="rolename" default="无" />
</td>
<td>
<s:property value="roledesc" default="无" />
</td>
<td>
<img src="common/images/system.gif" height="16"
width="16" alt="分配权限" style="border: 0px;" οnclick="nodeInfo(<s:property value="roleid"/>)" />
</td>
<td>
<n:ChkTag permissionId="selectRole.action">
<img οnclick="selectRole(<s:property value="roleid"/>)"
src="common/images/edit.gif" alt="修改"
width="16" height="15" style="border: 0px;" />
</n:ChkTag>
<n:ChkTag permissionId="deleterole.action">
<img οnclick="deleteFun(<s:property value="roleid"/>)"
src="common/images/delete.gif" alt="删除"
width="15" height="11" style="border: 0px;" />
</n:ChkTag>
</td>
</tr>
</s:iterator>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function selectRole(roleid){location.href='selectRole.action?roleId='+roleid}function nodeInfo(roleid){location.href='showNode.action?roleid='+roleid}function deleteFun(roleid){if(confirm("您确定要删除吗?")){location.href='deleterole.action?roleId='+roleid}else{return false}}function addLick(){location.href="admin/RoleManege/AddRole.jsp"}
</script>
</form>
</body>
</html>
5.CSS样式
*html{margin:0;padding:0;}
body{font-size:12px;background-color:#ffffff;width:100%;height:100%;margin:0;padding:0;}
input,img{border:none;margin:0;padding:0;}
.header{ padding:2px 0px 2px 5px;color:#004779;}
#topbar{
font-size: 12px;width: 100%;height: 23px;text-align: left;background-color: #6490AA;color: #ffffff;padding:2px 10px;
}
#topbar #sp_cl{padding-left:2px;}
.txt_cl{ border:1px solid #cccccc;}
.btnbg{color: #004779;height: 20px;border: 1px solid #34AAF7;background-image: url(../../../common/images/but3.gif);background-repeat: repeat-x;background-color: #ffffff;cursor: pointer;margin-left: 10px;}
table{ border-collapse: collapse; width: 100%; font-size:12px;color: #004779;border: 1px solid #CDD7D9;}
table td{ border-collapse: collapse; border-bottom: 1px solid #CDD7D9; text-align: left; height: 23px; padding-left:20px;}
table #tr_id1{ background-color: #DBE5F1; font-weight: bold;}
a{ text-decoration:none;color:#004779;}
a:hover{ text-decoration:underline;color:#037ED3;}