（十四）角色管理（Ztree插件的基本使用）
1. 建表
- 角色表
- 菜单表
- 角色-菜单(这个表中的role_id和menuu_id都不能被设置为主键，否则当插入一个新角色的时候，一个角色可能拥有多个菜单（role_id重复），一个菜单可能被多个角色拥有（menu_id重复）。)
2. main.jsp： 用户登录之后显示的主界面。
<!DOCTYPE html ">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>后台管理工作平台</title>
</head>
<frameset>
<frame src="center.jsp" name="mainFrame" id="mainFrame" />
</frameset>
<body>
</body>
</html>
3. center.jsp： 本页面包含两个页面，其中left.jsp是菜单栏，而<%=path%>/roleAction!list表示调用action中的list方法，显示数据库中全部的角色记录。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
overflow:hidden;
}
-->
</style></head> <body>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="8" bgcolor="#353c44"> </td>
<td width="147" valign="top"><iframe height="100%" width="100%" border="0" frameborder="0" src="left.jsp" name="leftFrame" id="leftFrame" title="leftFrame"></iframe></td>
<td width="10" bgcolor="#add2da"> </td>
<td valign="top"><iframe height="100%" width="100%" border="0" frameborder="0" src="<%=path%>/roleAction!list" name="rightFrame" id="rightFrame" title="rightFrame"></iframe></td>
<td width="8" bgcolor="#353c44"> </td>
</tr>
</table>
</body>
</html>
- left.jsp：<%=path%>/roleAction!add ：调用actionj的add方法，add方法将跳转到add.jsp页面，以供用户添加角色信息。
<%=path%>/roleAction!list ：调用action中的list方法，list方法将展示数据库中所有角色数据，以供用户操作（删除、编辑等）.
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="<%=path%>/script/admin/jquery.js"></script>
<script type="text/javascript" src="<%=path%>/script/admin/chili-1.7.pack.js"></script>
<script type="text/javascript" src="<%=path%>/script/admin/jquery.easing.js"></script>
<script type="text/javascript" src="<%=path%>/script/admin/jquery.dimensions.js"></script>
<script type="text/javascript" src="<%=path%>/script/admin/jquery.accordion.js"></script>
<script language="javascript">
jQuery().ready(function(){
jQuery('#navigation').accordion({
header: '.head',
navigation1: true,
event: 'click',
fillSpace: true,
animated: 'bounceslide'
});
});
</script>
<style type="text/css">
<!--
body {
margin:0px;
padding:0px;
font-size: 12px;
}
#navigation {
margin:0px;
padding:0px;
width:147px;
}
#navigation a.head {
cursor:pointer;
background:url(images/main_34.gif) no-repeat scroll;
display:block;
font-weight:bold;
margin:0px;
padding:5px 0 5px;
text-align:center;
font-size:12px;
text-decoration:none;
}
#navigation ul {
border-width:0px;
margin:0px;
padding:0px;
text-indent:0px;
}
#navigation li {
list-style:none; display:inline;
}
#navigation li li a {
display:block;
font-size:12px;
text-decoration: none;
text-align:center;
padding:3px;
}
#navigation li li a:hover {
background:url(images/tab_bg.gif) repeat-x;
border:solid 1px #adb9c2;
}
-->
</style>
</head>
<body>
<div style="height:100%;">
<ul id="navigation">
<li> <a class="head">角色管理</a>
<ul>
<li><a href="<%=path%>/roleAction!add" target="rightFrame">添加角色</a></li>
<li><a href="<%=path%>/roleAction!list" target="rightFrame">角色列表</a></li>
</ul>
</li> </ul>
</div>
</body>
</html>
- add.jsp : 添加角色的页面，包含一个ztree树形结构，以及按ajax方式来提交数据（当用户填好信息之后，点击button按钮触发saveData（）方法，这个发送JQuery.post()
方法向服务端请求数据，服务端将数据返回后展示）。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!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>角色添加</title>
<style type="text/css">
<!--
body {
margin-left: 3px;
margin-top: 0px;
margin-right: 3px;
margin-bottom: 0px;
} .STYLE1 {
color: #e1e2e3;
font-size: 12px;
} .STYLE6 {
color: #000000;
font-size: 12;
} .STYLE10 {
color: #000000;
font-size: 12px;
text-align: right;
} .STYLE19 {
color: #344b50;
font-size: 12px;
} .STYLE21 {
font-size: 12px;
color: #3b6375;
} .STYLE22 {
font-size: 12px;
color: #295568;
}
-->
</style> <link rel="stylesheet"
href="<%=path%>/script/ztree_3.3/css/zTreeStyle/zTreeStyle.css"
type="text/css" />
<script type="text/javascript"
src="<%=path%>/script/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
src="<%=path%>/script/ztree_3.3/js/jquery.ztree.all-3.3.js"></script>
<script language="javascript" >
var setting = {
data : {
simpleData : { //simpleData表示这个一个简单的ztree树形结构（还有一种标准结构，具体查看Ztreeapi）
enable : true
}
}, check: {
enable: true, //表示启用复选框
chkboxType : { "Y" : "ps", "N" : "ps" } //"Y" : "ps" 表示当某一节点被勾选的 时候，其子节点(s)与父节点(p)也会被勾选，N表示取消勾选，ps同理可证
}
}; var loadURL="<%=path%>/roleAction!loadMenuDate?date="+new Date();
$.get(loadURL, function(treeDate) { //从数据库中取到json格式的数据（节点数据）返回给ztree使用。
$.fn.zTree.init($("#treeDemo"), setting, treeDate); //把ztree树形结构按照setting的规则，节点为treeDate，加载到id为ztreeDemo的标签中
}, "json"); /*
*********以上为ztree的定义 *****************
*/
function saveData(){ //该方法用于保存角色数据
//获得用户勾选的菜单
var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //getZTreeObj()获取 zTree 当前被选中的节点数据集,返回一个存放json对象的数组。
var nodes = treeObj.getCheckedNodes(true); //true表示 表示获取 被勾选 的节点集合 //判断用户是否勾选
if(nodes==null || nodes==""){
window.alert("请选择至少一个菜单！！"); }else{//用户选中的菜单数据无法直接被传到服务器端，可以通过隐藏域的形式来发送
var array_id=new Array();
//此时的nodes数组存放的是json对象
for(var i=0;i<nodes.length;i++){
var id= nodes[i].id;
array_id.push(id);
}
//把得到的存放用户选中菜单id的数据赋给隐藏域
$("#check_menu_id").val(array_id);
} //表单提交
var saveURL="<%=path%>/roleAction!save?date="+new Date()+""; var data=$("#form1").serializeArray(); //此方法返回的是JSON对象而非JSON字符串,因为post发送的数据格式为json对象
$.post(saveURL, data, function(jsonDate){
// 返回的的是一个json对象
var flag = jsonDate.flag;
var message = jsonDate.message;
if (flag == true){
var confirmFlag = window.confirm("数据添加成功，是否继续添加?");
if (confirmFlag == true){
document.getElementById("form1").reset(); //清空表单的内容
treeObj.checkAllNodes(false); //清除ztree中已勾选
jQuery("#button1").attr("disabled",false); //用户如果选择继续添加，则启用提交按钮 }else{
var listURL = "<%=path%>/roleAction!list";
window.location.href = listURL;
}
}else{
window.alert("数据添加失败，错误原因 = " + message);
jQuery("#button1").attr("disabled",false); //出现异常后启用提交按钮
} }, "json") } </script>
</head> <body>
<table width="100%" border="0" align="center" cellpadding="0"
cellspacing="0">
<!-- 头部 -->
<tr>
<td height="30"><table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td height="24" bgcolor="#353c44"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="6%" height="19" valign="bottom"><div
align="center">
<img src="data:images/tb.gif" width="14" height="14" />
</div></td>
<td width="94%" valign="bottom"><span class="STYLE1">
管理人员基本信息列表</span></td>
</tr>
</table></td>
<td><div align="right">
<span class="STYLE1"> <input type="checkbox"
name="checkbox11" id="checkbox11" /> 全选 <img
src="data:images/add.gif" width="10" height="10" /> 添加 <img
src="data:images/del.gif" width="10" height="10" /> 删除
<img src="data:images/edit.gif" width="10"
height="10" /> 编辑
</span><span class="STYLE1"> </span>
</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr> <!-- 中间的数据 -->
<tr>
<td>
<form id="form1">
<table width="100%" border="0" cellpadding="0" cellspacing="1"
bgcolor="#a8c7ce">
<tr>
<td width="4%" height="20" bgcolor="d3eaef" class="STYLE10">角色编码：</td>
<td width="10%" height="20" bgcolor="#FFFFFF" class="STYLE19">
<s:textfield name="role_id" id="role_id" />
</td>
</tr>
<tr>
<td width="4%" height="20" bgcolor="d3eaef" class="STYLE10">角色名称：</td>
<td width="10%" height="20" bgcolor="#FFFFFF" class="STYLE19">
<s:textfield name="role_name" id="role_name" />
</td>
</tr>
<tr>
<td width="4%" height="20" bgcolor="d3eaef" class="STYLE10">角色备注：</td>
<td width="10%" height="20" bgcolor="#FFFFFF" class="STYLE19">
<s:textarea name="role_remark" id="role_remark" rows="5"
cols="50" />
</td>
</tr>
<tr>
<td width="4%" height="20" bgcolor="d3eaef" class="STYLE10">角色权限：</td>
<td width="10%" height="20" bgcolor="#FFFFFF" class="STYLE19">
<div class="zTreeDemoBackground left"
style="height: 150px; overflow-y: scroll;"><!-- overflow-y：scroll 大小超过设置的范围会出现滚动条 -->
<ul id="treeDemo" class="ztree"></ul>
</div>
</td>
</tr>
<tr>
<td width="4%" height="20" colspan="2" bgcolor="#FFFFFF"
class="STYLE19" align="center"><input type="button"
value="保存数据" id="button1" onclick="saveData();" />
<Input type="text" name="check_menu_id" id="check_menu_id" /></td><!-- 隐藏域，用于发送用户选中的菜单-->
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
RoleAction 。java :
package action; import java.io.PrintWriter;
import java.util.List;
import java.util.Map; import com.google.gson.Gson;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ModelDriven;
import com.opensymphony.xwork2.util.ValueStack; import DAO.RoleDao;
import actionUtil.BaseAction;
import bean.JsonInfo;
import bean.RoleBean;
import service.RoleService;
import service.RoleServiceImpl; public class RoleAction extends BaseAction implements ModelDriven<RoleBean>{
RoleService roleservice=new RoleServiceImpl();
RoleBean rolebean=null;
public RoleBean getModel() {
rolebean=new RoleBean();
return rolebean;
} public String execute(){
return null;
} /**
* 跳转到添加角色的页面
* @return
*/ public String add(){ return "add";
} /**
*从数据库中取得ztree树形结构所需要的json格式并返回
*/
public String loadMenuDate() throws Exception{
RoleService roleservice=new RoleServiceImpl(); //RoleService为业务层接口，通过RoleServiceUtil工具类获取接口的对象 List<Map<String,Object>> ztreeDate=roleservice.loadMenuDate(); //调用loadMenuDate向数据库中获取ztree需要的json格式的数据 Gson gson=new Gson();
String json_ztreeDate=gson.toJson(ztreeDate); //把数据转换为json格式，并返回给客户端ztree使用
PrintWriter out=response.getWriter();
out.print(json_ztreeDate); return null;
} /**
* 本方法用于保存角色数据,用模型驱动来获取表单的数据
* @return
*/
public String save() throws Exception{
String check_menu_id=request.getParameter("check_menu_id"); JsonInfo jsoninfo=roleservice.sava(this.rolebean,check_menu_id); //调用业务层的方法，保存数据 Gson gson=new Gson();
String json_str=gson.toJson(jsoninfo);
System.out.println(json_str);
PrintWriter out=response.getWriter();
out.print(json_str);
out.flush();
out.close();
return null;
} /**
* 调用业务层的方法，显示所有角色信息,并把数据放入值栈或者作用域中，以供jsp页面取出显示。
*/ public String list() throws Exception{
//调用业务层方法取得所有角色信息的数据
List<RoleBean> roleList=this.roleservice.getRoleList();
//存放到作用域中
request.setAttribute("roleList", roleList); //放到值栈中
ActionContext actionContext=ActionContext.getContext();
ValueStack valueContext=actionContext.getValueStack();
valueContext.set("roleList", roleList);
System.out.println(roleList.size());
return "list";
} /**
* 本方法用于修改角色信息。
* @return
* @throws Exception
*/
public String edit() throws Exception{
/*
*这个方法是被list.jsp页面中的超链接调用的，这个超链接传过来一个role_id，与模型驱动中的RoleBean的属性role_id一致，
*会自动把值赋给rolebean里并在狭义值栈中创建rolebean对象，其中这个对象的role_id等于超链接传过来的参数值。
*，然后等return "edit"这个页面的时候，如果有一个<s:textfield name="role_id" />这个表单元素的name属性值与值栈中的role_id匹配，
*然后把值栈的role_id的值赋给<s:textfield name="role_id" />的value值，这样就完成了值的自动回填。
*
*/
String role_id=request.getParameter("role_id"); if(role_id!=null){
/*
* 数据回填（除了role_id之外）
*/
RoleBean role=new RoleBean(); role=roleservice.getRoleById(role_id);
this.rolebean.setRole_id(role.getRole_id());
this.rolebean.setRole_name(role.getRole_name());
this.rolebean.setRole_remark(role.getRole_remark()); } return "edit";
}
}
- RoleService .java ： 业务层接口
package service; import java.util.List;
import java.util.Map; import bean.JsonInfo;
import bean.RoleBean; public interface RoleService { List<Map<String, Object>> loadMenuDate(); //显示所有菜单 JsonInfo sava(RoleBean rolebean,String check_menu_id); //保存添加的角色。 List<RoleBean> getRoleList(); RoleBean getRoleById(String role_id); }
RoleServiceImpl 。java : 业务层实现类：业务层只负责对用户提交的数据进行检查加工包装，然后调用dao层相应方法。
package service; import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;
import java.util.Map; import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler; import DAO.RoleDao;
import DBUtil.DBUtil;
import bean.JsonInfo;
import bean.RoleBean; /**
* 业务层接口的实现类负责：
* 1. 如果用户是查询数据，则此类负责把从DAO层获取的数据进行加工然后展示给用户
* 2. 如果用户是操作（增删改）数据，则此类负责把用户提交的数据进行加工提交到DAO层。
* @author Administrator
*
*/
public class RoleServiceImpl implements RoleService {
private RoleDao roledao=new RoleDao();
public List<Map<String, Object>> loadMenuDate() { return roledao.loadMenuDate();
}
/**
* 加工用户提交的数据（这里是判断数据是否正确），然后调用相应的dao层方法添加到数据库
*/
public JsonInfo sava(RoleBean rolebean, String check_menu_id) {
/**
* 判断数据的合法性
*/ JsonInfo jsoninfo=new JsonInfo(); boolean isExist=roledao.isExist();
if(isExist==true){ //数据库中已经有这个角色ID。不允许添加
jsoninfo.setFlag(false);
jsoninfo.setMessage("系统中已存在相应的角色编码，不允许添加");
return jsoninfo;
}else{
if(check_menu_id==null ||check_menu_id.equals("")){
jsoninfo.setFlag(false);
jsoninfo.setMessage("菜单权限未选择，请选择");
}else{
//数据合法，调用DAO层的方法添加数据
return roledao.save(rolebean,check_menu_id);
} } return null;
} /**
* 对数据进行加工，然后调用dao层方法。
* 本例无须加工，直接调用dao层方法即可
*/
public List<RoleBean> getRoleList() { List<RoleBean> roleList=roledao.getRoleList(); return roleList;
} /**
* 调用dao层查询rolebean对象信息
*/
public RoleBean getRoleById(String role_id) {
return roledao.getRoleById(role_id);
} }
- RoleDao.java： dao层负责与底层（数据库）打交道。
package DAO; import java.awt.Robot;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map; import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.lang3.SystemUtils; import com.mysql.jdbc.PreparedStatement; import DBUtil.DBUtil;
import PO.MenuBean;
import bean.JsonInfo;
import bean.RoleBean; /**
* 本类为DAO层类，负责与持久化对象（PO）打交道
*
* @author Administrator
*
*/
public class RoleDao { /**
* 本方法用于从数据库中获取ztree所需要的数据
*
* @return
*/
public List<Map<String, Object>> loadMenuDate() {
List<Map<String, Object>> treeList = new ArrayList<Map<String, Object>>(); Connection conn = null;
String sql = "select * from menu order by menu_id ASC";
List<MenuBean> menuList = null;
try {
conn = DBUtil.getConn(); QueryRunner runner = new QueryRunner();
menuList = runner.query(conn, sql, new BeanListHandler<MenuBean>(MenuBean.class)); if (menuList != null) { for (MenuBean menu : menuList) {
Map<String, Object> map = new HashMap<String, Object>();
/**
* 把数据组装成Ztree所需要的数据，简单数据模式的ztree只需要id、pid和name属性
*/
int grade=menu.getGrade();
String isleaf=menu.getIsleaf();
map.put("id", menu.getMENU_ID());
map.put("pId", menu.getParen_id());
map.put("name", menu.getMenu_name()); if(grade==1 && isleaf.equals("N")){
//该菜单为根节点且不是叶节点
map.put("open", "true"); //让根节点在页面加载完成之后就呈现打开状态
} treeList.add(map);
}
} } catch (Exception e) {
e.printStackTrace();
}finally{
try {
if(!conn.isClosed()){
conn.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
} return treeList;
} /**
* 判断角色ID是否在数据库中已经存在
* @return
*/
public boolean isExist() { return false;
} /*
* 把数据保存到数据库中
*/
public JsonInfo save(RoleBean rolebean, String check_menu_id) {
//拿到将要添加的数据
String role_id=rolebean.getRole_id();
String role_name=rolebean.getRole_name();
String role_remark=rolebean.getRole_remark();
JsonInfo jsoninfo=new JsonInfo(); Connection conn=null;
Statement stat=null;
StringBuffer string_sql=new StringBuffer();
try {
conn=DBUtil.getConn();
stat=conn.createStatement();
conn.setAutoCommit(false); //添加到多张表要禁止自动提交事务，否则可能造成添加一张表成功而另一张表没有添加的情况。 /*
* 插入到角色表
*/
string_sql.setLength(0);
string_sql.append("insert into role values('"+role_id+"','"+role_name+"','"+role_remark+"')");
System.out.println(string_sql);
stat.executeUpdate(string_sql.toString()); /*
* 插入到角色-菜单表
*/ String[] array_menu_id=check_menu_id.split(",");
for(String menu:array_menu_id){
string_sql.setLength(0);
string_sql.append("insert into role_menu values('"+role_id+"','"+menu+"')");
stat.executeUpdate(string_sql.toString());
System.out.println(string_sql);
}
//提交事务
conn.commit();
jsoninfo.setFlag(true);
} catch (Exception e) {
e.printStackTrace();
jsoninfo.setFlag(false);
jsoninfo.setMessage(e.getMessage());
//事务回滚
try {
conn.rollback();
} catch (SQLException e1) { e1.printStackTrace();
}
} return jsoninfo;
} public List<RoleBean> getRoleList() {
List<RoleBean> roleList=new ArrayList<RoleBean>();
RoleBean rolebean=null;
Connection conn=null;
Statement stat=null;
ResultSet rs=null;
String sql="select * from role";
try {
conn=DBUtil.getConn();
stat=conn.createStatement();
rs= stat.executeQuery(sql); while(rs.next()){
rolebean=new RoleBean();
rolebean.setRole_id(rs.getString("role_id"));
rolebean.setRole_name(rs.getString("role_name"));
rolebean.setRole_remark(rs.getString("role_remark"));
roleList.add(rolebean);
System.out.println(rolebean.getRole_name());
} } catch (Exception e) {
e.printStackTrace();
} return roleList;
} public RoleBean getRoleById(String role_id) {
RoleBean rolebean=new RoleBean();
QueryRunner runner=new QueryRunner();
Connection conn=null;
String sql="select * from role where role_id="+role_id; try {
conn=DBUtil.getConn();
rolebean= runner.query(conn, sql, new BeanHandler<RoleBean>(RoleBean.class)); } catch (Exception e) {
e.printStackTrace();
}finally{
if(conn!=null){ try {
conn.close();
} catch (SQLException e) { e.printStackTrace();
}
} }
return rolebean;
}
}
- list.jsp：本页面展示数据库中所有角色的信息，以供用户进行操作（修改、删除等）
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!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>无标题文档</title>
<style type="text/css">
<!--
body {
margin-left: 3px;
margin-top: 0px;
margin-right: 3px;
margin-bottom: 0px;
}
.STYLE1 {
color: #e1e2e3;
font-size: 12px;
font-family: 新宋体
}
.STYLE6 {color: #000000; font-size: 13px; font-family: 新宋体}
.STYLE10 {color: #000000; font-size: 13px;font-family: 新宋体 }
.STYLE19 {
color: #344b50;
font-size: 13px;
font-family: 新宋体
}
.STYLE21 {
font-size: 13px;
color: #3b6375;
font-family: 新宋体
}
.STYLE22 {
font-size: 13px;
color: #295568;
font-family: 新宋体
}
-->
</style> <script language="javascript">
function editRole(role_id){
var editURL = "<%=path%>/roleAction!edit?role_id="+role_id+"&date="+new Date()+"";
window.showModalDialog(editURL,null,"dialogWidth:700px;dialogHeight:500px;center:yes"); //showModalDialog对话框在chome浏览器不能使用
}
</script>
</head> <body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- 标题栏 -->
<tr>
<td height="30"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="24" bgcolor="#353c44"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="6%" height="19" valign="bottom"><div align="center"><img src="data:images/tb.gif" width="14" height="14" /></div></td>
<td width="94%" valign="bottom"><span class="STYLE1"> 管理人员基本信息列表</span></td>
</tr>
</table></td>
<td><div align="right"><span class="STYLE1">
<input type="checkbox" name="checkbox11" id="checkbox11" />
全选 <img src="data:images/add.gif" width="10" height="10" /> 添加 <img src="data:images/del.gif" width="10" height="10" /> 删除 <img src="data:images/edit.gif" width="10" height="10" /> 编辑 </span><span class="STYLE1"> </span></div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce">
<tr>
<td width="4%" height="20" bgcolor="d3eaef" class="STYLE10"><div align="center">
<input type="checkbox" name="checkbox" id="checkbox" />
</div></td>
<td width="8%" height="25" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">角色编码</span></div></td>
<td width="25%" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">角色名称</span></div></td>
<td bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">角色备注</span></div></td>
<td width="10%" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">基本操作</span></div></td>
</tr> <!-- 从数据库中展示的数据 -->
<s:iterator value="roleList" var="role">
<tr>
<td height="25" bgcolor="#FFFFFF"><div align="center">
<input type="checkbox" name="checkbox2" id="checkbox2" />
</div></td>
<td height="25" bgcolor="#FFFFFF" class="STYLE6"><div align="center"><span class="STYLE19"><s:property value="#role.role_id"/> </span></div></td>
<td bgcolor="#FFFFFF" class="STYLE19"><div align="left"><s:property value="#role.role_name"/></div></td>
<td bgcolor="#FFFFFF" class="STYLE19"><div align="left"><s:property value="#role.role_remark"/></div></td>
<td bgcolor="#FFFFFF"><div align="center" class="STYLE21"> <a href="javascript:void(0);" onclick="editRole(<s:property value="role_id"/>);">修改</a>|删除</div></td>
</tr>
</s:iterator> </table></td>
<!-- 分页栏 -->
<tr>
<td height="30"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%"><div align="left"><span class="STYLE22"> 共有<strong> 243</strong> 条记录，当前第<strong> 1</strong> 页，共 <strong>10</strong> 页</span></div></td>
<td width="67%"><table width="312" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td width="49"><div align="center"><img src="data:images/main_54.gif" width="40" height="15" /></div></td>
<td width="49"><div align="center"><img src="data:images/main_56.gif" width="45" height="15" /></div></td>
<td width="49"><div align="center"><img src="data:images/main_58.gif" width="45" height="15" /></div></td>
<td width="49"><div align="center"><img src="data:images/main_60.gif" width="40" height="15" /></div></td>
<td width="37" class="STYLE22"><div align="center">转到</div></td>
<td width="22"><div align="center">
<input type="text" name="textfield" id="textfield" style="width:20px; height:12px; font-size:12px; border:solid 1px #7aaebd;"/>
</div></td>
<td width="22" class="STYLE22"><div align="center">页</div></td>
<td width="35"><img src="data:images/main_62.gif" width="26" height="15" /></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
- edit.jsp: 本页面与add.jsp类似，区别在于本页面数据要回填，即用户在list.jsp中选中某一个role进行修改的时候，本页面必须向用户展示这个role原有的数值。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!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>角色修改</title>
<style type="text/css">
<!--
body {
margin-left: 3px;
margin-top: 0px;
margin-right: 3px;
margin-bottom: 0px;
} .STYLE1 {
color: #e1e2e3;
font-size: 12px;
} .STYLE6 {
color: #000000;
font-size: 12;
} .STYLE10 {
color: #000000;
font-size: 12px;
text-align: right;
} .STYLE19 {
color: #344b50;
font-size: 12px;
} .STYLE21 {
font-size: 12px;
color: #3b6375;
} .STYLE22 {
font-size: 12px;
color: #295568;
}
-->
</style> <link rel="stylesheet"
href="<%=path%>/script/ztree_3.3/css/zTreeStyle/zTreeStyle.css"
type="text/css" />
<script type="text/javascript"
src="<%=path%>/script/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
src="<%=path%>/script/ztree_3.3/js/jquery.ztree.all-3.3.js"></script>
<script language="javascript" >
var setting = {
data : {
simpleData : { //simpleData表示这个一个简单的ztree树形结构（还有一种标准结构，具体查看Ztreeapi）
enable : true
}
}, check: {
enable: true, //表示启用复选框
chkboxType : { "Y" : "ps", "N" : "ps" } //"Y" : "ps" 表示当某一节点被勾选的 时候，其子节点(s)与父节点(p)也会被勾选，N表示取消勾选，ps同理可证
}
}; var loadURL="<%=path%>/roleAction!loadMenuDate?date="+new Date();
$.get(loadURL, function(treeDate) { //从数据库中取到json格式的数据（节点数据）返回给ztree使用。 $.fn.zTree.init($("#treeDemo"), setting, treeDate); //把ztree树形结构按照setting的规则，节点为treeDate，加载到id为ztreeDemo的标签中
}, "json"); /*
*********以上为ztree的定义 *****************
*/
function saveData(){ //该方法用于保存角色数据
//获得用户勾选的菜单
var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //getZTreeObj()获取 zTree 当前被选中的节点数据集,返回一个存放json对象的数组。
var nodes = treeObj.getCheckedNodes(true); //true表示 表示获取 被勾选 的节点集合 //判断用户是否勾选
if(nodes==null || nodes==""){
window.alert("请选择至少一个菜单！！"); }else{//用户选中的菜单数据无法直接被传到服务器端，可以通过隐藏域的形式来发送
var array_id=new Array();
//此时的nodes数组存放的是json对象
for(var i=0;i<nodes.length;i++){
var id= nodes[i].id;
array_id.push(id);
}
//把得到的存放用户选中菜单id的数据赋给隐藏域
$("#check_menu_id").val(array_id);
} //表单提交
var saveURL="<%=path%>/roleAction!save?date="+new Date()+""; var data=$("#form1").serializeArray(); //此方法返回的是JSON对象而非JSON字符串,因为post发送的数据格式为json对象
$.post(saveURL, data, function(jsonDate){
// 返回的的是一个json对象
var flag = jsonDate.flag;
var message = jsonDate.message;
if (flag == true){
var confirmFlag = window.confirm("数据添加成功，是否继续添加?");
if (confirmFlag == true){
document.getElementById("form1").reset(); //清空表单的内容
treeObj.checkAllNodes(false); //清除ztree中已勾选
jQuery("#button1").attr("disabled",false); //用户如果选择继续添加，则启用提交按钮 }else{
var listURL = "<%=path%>/roleAction!list";
window.location.href = listURL;
}
}else{
window.alert("数据添加失败，错误原因 = " + message);
jQuery("#button1").attr("disabled",false); //出现异常后启用提交按钮
} }, "json") } </script>
</head> <body>
<table width="100%" border="0" align="center" cellpadding="0"
cellspacing="0">
<!-- 头部 -->
<tr>
<td height="30"><table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td height="24" bgcolor="#353c44"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="6%" height="19" valign="bottom"><div
align="center">
<img src="data:images/tb.gif" width="14" height="14" />
</div></td>
<td width="94%" valign="bottom"><span class="STYLE1">
管理人员基本信息列表</span></td>
</tr>
</table></td>
<td><div align="right">
<span class="STYLE1"> <input type="checkbox"
name="checkbox11" id="checkbox11" /> 全选 <img
src="data:images/add.gif" width="10" height="10" /> 添加 <img
src="data:images/del.gif" width="10" height="10" /> 删除
<img src="data:images/edit.gif" width="10"
height="10" /> 编辑
</span><span class="STYLE1"> </span>
</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr> <!-- 中间的数据 -->
<tr>
<td>
<form id="form1">
<table width="100%" border="0" cellpadding="0" cellspacing="1"
bgcolor="#a8c7ce">
<tr>
<td width="4%" height="20" bgcolor="d3eaef" class="STYLE10">角色编码：</td>
<td width="10%" height="20" bgcolor="#FFFFFF" class="STYLE19">
<s:textfield name="role_id" id="role_id" />
</td>
</tr>
<tr>
<td width="4%" height="20" bgcolor="d3eaef" class="STYLE10">角色名称：</td>
<td width="10%" height="20" bgcolor="#FFFFFF" class="STYLE19">
<s:textfield name="role_name" id="role_name" />
</td>
</tr>
<tr>
<td width="4%" height="20" bgcolor="d3eaef" class="STYLE10">角色备注：</td>
<td width="10%" height="20" bgcolor="#FFFFFF" class="STYLE19">
<s:textarea name="role_remark" id="role_remark" rows="5"
cols="50" />
</td>
</tr>
<tr>
<td width="4%" height="20" bgcolor="d3eaef" class="STYLE10">角色权限：</td>
<td width="10%" height="20" bgcolor="#FFFFFF" class="STYLE19">
<div class="zTreeDemoBackground left"
style="height: 150px; overflow-y: scroll;"><!-- overflow-y：scroll 大小超过设置的范围会出现滚动条 -->
<ul id="treeDemo" class="ztree"></ul>
</div>
</td>
</tr>
<tr>
<td width="4%" height="20" colspan="2" bgcolor="#FFFFFF"
class="STYLE19" align="center"><input type="button"
value="保存数据" id="button1" onclick="saveData();" />
<Input type="text" name="check_menu_id" id="check_menu_id" /></td><!-- 隐藏域，用于发送用户选中的菜单-->
</tr>
</table>
</form>
</td>
</tr>
</table>
<s:debug></s:debug>
</body>
</html>
- 本例中的bean
MenuBean .java
package PO;
public class MenuBean {
/**
* 属性名要和数据库的属性名一样，对大小写不敏感。
*/
private int MENU_ID; //菜单ID
private String menu_name; //菜单名字
private int paren_id; //父节点ID
private int grade; //该菜单项位于节点中的第几层
private String isleaf; //该菜单是否为叶节点
public int getGrade() {
return grade;
}
public void setGrade(int grade) {
this.grade = grade;
}
public String getIsleaf() {
return isleaf;
}
public void setIsleaf(String isleaf) {
this.isleaf = isleaf;
}
public int getMENU_ID() {
return MENU_ID;
}
public void setMENU_ID(int mENU_ID) {
MENU_ID = mENU_ID;
}
public String getMenu_name() {
return menu_name;
}
public void setMenu_name(String menu_name) {
this.menu_name = menu_name;
}
public int getParen_id() {
return paren_id;
}
public void setParen_id(int paren_id) {
this.paren_id = paren_id;
}
}
- JsonInfo.java
package bean;
import java.io.Serializable;
public class JsonInfo implements Serializable {
private boolean flag;
private String message;
public boolean isFlag() {
return flag;
}
public void setFlag(boolean flag) {
this.flag = flag;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}
RoleBean .java
package bean;
public class RoleBean {
private String role_id;
private String role_name;
private String role_remark;
public String getRole_id() {
return role_id;
}
public void setRole_id(String role_id) {
this.role_id = role_id;
}
public String getRole_name() {
return role_name;
}
public void setRole_name(String role_name) {
this.role_name = role_name;
}
public String getRole_remark() {
return role_remark;
}
public void setRole_remark(String role_remark) {
this.role_remark = role_remark;
}
}
- struts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <constant name="struts.enable.DynamicMethodInvocation" value="true" />
<constant name="struts.devMode" value="true" />
<constant name="struts.ui.theme" value="simple"></constant> <package name="default" namespace="/" extends="struts-default">
<action name="roleAction" class="action.RoleAction">
<result name="add">/admin/role/add.jsp</result>
<result name="list">/admin/role/list.jsp</result>
<result name="edit">/admin/role/edit.jsp</result>
</action> </package>
</struts>
- edit页面功能还未完善。敬请期待
（十四）角色管理（Ztree插件的基本使用）的更多相关文章
- Oracle学习(十四)：管理用户安全性
--用户(user) SQL> --创建一个名为 grace password是password 的用户,新用户没有不论什么权限 SQL> create user grace identi ...
- Dynamics CRM 2015/2016新特性之三十四：有了插件日志，调试插件so easy!
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复217或者20160330可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
- MySQL（十四）管理维护及性能优化
关于MySQL的学习,<MySQL必知必会>这本书呢,看完已经两个月了,一直被工作以及生活的一些琐事拖着,趁着今晚有空闲,就整理完了最后的几章学习笔记,接下来的学习计划呢, 应该是pyth ...
- Linux命令(二十四) 磁盘管理命令(二) mkfs，mount
一.格式化文件系统 mkfs 当完成硬盘分区以后要进行硬盘的格式化,mkfs系列对应的命令用于将硬盘格式化为指定格式的文件系统.mkfs 本身并不执行建立文件系统的工作,而是去调用相关的程序来执行.例 ...
- Gradle 1.12用户指南翻译——第四十九章. Build Dashboard 插件
本文由CSDN博客貌似掉线翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...
- Gradle 1.12用户指南翻译——第二十四章. Groovy 插件
其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Github上的地址: https://g ...
- Gradle 1.12用户指南翻译——第三十四章. JaCoCo 插件
本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...
- [原]Jenkins(十四)---jenkins示例：admin管理所有项目，新建用户只能看部分项目
/** * lihaibo * 文章内容都是根据自己工作情况实践得出. *如有错误,请指正 * 版权声明:本博客欢迎转发,但请保留原作者信息! http://www.cnblogs.com/horiz ...
- Spring Boot(十四)：spring boot整合shiro-登录认证和权限管理
Spring Boot(十四):spring boot整合shiro-登录认证和权限管理 使用Spring Boot集成Apache Shiro.安全应该是互联网公司的一道生命线,几乎任何的公司都会涉 ...
随机推荐
- linux文件管理指令
总述 所有指令都可以使用--help来查看说明 例如:cat --help -x 表示参数 1.cat:用于打印文件(cat -x filename) 参数: -n:由1开始对每行进行编号 -b:由1 ...
- 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
- 判断Activty是否在前台运行
/** * 判断某个界面是否在前台 * * @param context * @param className 某个界面名称 * */ public static boolean isActivity ...
- mybatis bind exception
springboot 项目 搜了半天 网上的解决方法千篇一律,最终问题 原因 ,yml 文件路径问题 mybatis: mapper-locations: classpath:com/yang/f ...
- nginx在windows系统中如何启动、重启、停止
nginx在windows系统中如何启动.重启.停止 查看nginx的版本号:nginx -v 启动nginx:start nginx 快速停止或关闭nginx:nginx -s stop 正常停 ...
- java最简单复制文件方法，不依赖任何框架
java最简单复制文件方法 把java2.txt内容复制到java.txt中 import java.io.File; import java.io.IOException; import jav ...
- LeetCode_110. Balanced Binary Tree
110. Balanced Binary Tree Easy Given a binary tree, determine if it is height-balanced. For this pro ...
- 解决微信小程序textarea层级太高遮挡其他组件的问题
<view class='remark'> <view class='title'> 备注说明 </view> <textarea class='mark_t ...
- jQuery BlockUI Plugin Demo 4（Element Blocking Examples）
Element Blocking Examples This page demonstrates how to block selected elements on the page rather t ...
- jQuery BlockUI Plugin Demo 2
Overview The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without l ...