（十四）角色管理（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="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" /> 编辑 </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="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" /> 编辑 </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="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> </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="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" /> 编辑 </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页面功能还未完善。敬请期待
