（十四）角色管理（Ztree插件的基本使用）

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

（⼗四）⾓⾊管理（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="/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="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>⽆标题⽂档</title>
<style type="text/css">

</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="/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">

</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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>⾓⾊添加</title>
<style type="text/css">

</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对象的数组。

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 mons.dbutils.QueryRunner;
import mons.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 mons.dbutils.QueryRunner;
import mons.dbutils.handlers.BeanHandler;
import mons.dbutils.handlers.BeanListHandler;
import ng3.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);
}
//提交事务
mit();
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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>⽆标题⽂档</title>
<style type="text/css">

</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="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="images/add.gif" width="10" height="10"/>添加 <img src="images/del.gif" width="10" height="10"/>删除  <img src="images/edit.gif" width="10" height="10"/>编辑</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="images/main_54.gif" width="40" height="15"/></div></td>
<td width="49"><div align="center"><img src="images/main_56.gif" width="45" height="15"/></div></td>
<td width="49"><div align="center"><img src="images/main_58.gif" width="45" height="15"/></div></td>
<td width="49"><div align="center"><img src="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="images/main_62.gif" width="26" height="15"/></td>
</tr>
</table></td>
</tr>
</table></td>。