EasyUI (二)

最新推荐文章于 2024-05-17 11:40:25 发布

暂无、

最新推荐文章于 2024-05-17 11:40:25 发布

阅读量75

点赞数

分类专栏：前端文章标签： easyui

本文链接：https://blog.csdn.net/weixin_43939301/article/details/91621478

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天让我们来实现简单的权限树形菜单

权限目的：
是为了让不同的用户可以操作系统中不同资源
直接点说就是不同的用户可以看到左侧不同的菜单

思考：
我们想一个用户对应多个菜单,然后一个菜单可以对应多个用户其实这就是user与menu的多对多的关系

思路：
1、菜单不同的原因在于，利用不同menuid进行查询，原本默认查询的是所有菜单，是通过-1去查的；
2、menuid由来：是登录用户id查询中间表数据所得来的

核心代码如下：（基于昨日代码）
UserDao:

package com.liyi.dao;

import java.sql.SQLException;

import java.util.List;
import java.util.Map;

import com.liyi.util.JsonBaseDao;
import com.liyi.util.JsonUtils;
import com.liyi.util.PageBean;
import com.liyi.util.StringUtils;
/**
 * 登录查询用户表
 * @author 224李毅
 */
public class UserDao extends JsonBaseDao {
 public List<Map<String, Object>> list(Map<String, String[]>paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
	  String sql = "select * from t_easyui_user_version2 where true";
	  String uid = JsonUtils.getParamVal(paMap, "uid");
	  String upwd = JsonUtils.getParamVal(paMap, "upwd");
	  if(StringUtils.isNotBlank(uid)) {
	   sql = sql + " and uid="+uid;
	  }
	  if(StringUtils.isNotBlank(upwd)) {
	   sql = sql + " and upwd="+upwd;
	  }
	  return super.executeQuery(sql, pageBean);
 }
 /**
  * 通过中间表查询登录所对应的权限
  * @param paMap
  * @param pageBean
  * @return
  * @throws InstantiationException
  * @throws IllegalAccessException
  * @throws SQLException
  */
 public List<Map<String, Object>> listMenu(String uid,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
	  String sql = "select * from t_easyui_usermenu where true";
	  if(StringUtils.isNotBlank(uid)) {
	   sql = sql + " and uid="+uid;
	  }
	  return super.executeQuery(sql, pageBean);
	 }
}

MenuDao :

package com.liyi.dao;

import java.sql.SQLException;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.liyi.entity.TreeNode;
import com.liyi.util.JsonBaseDao;
import com.liyi.util.JsonUtils;
import com.liyi.util.PageBean;
import com.liyi.util.StringUtils;
public class MenuDao extends JsonBaseDao {
 /**
  * @param map
  *            req.getParameterMap
  * @param pageBean
  *            分页
  * @return
  * @throws SQLException 
  * @throws IllegalAccessException 
  * @throws InstantiationException 
  */
 public List<TreeNode> list(Map<String, String[]> map, PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException {
	  List<Map<String,Object>> ListMenu = this.listMenuSef(map, pageBean);
	  List<TreeNode> treeNodeList = new ArrayList<>();
	  menuList2TreeNodeList(ListMenu, treeNodeList);
	  return treeNodeList;
	 }
	 public List<Map<String, Object>> listMenuSef(Map<String, String[]> map, PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException {
	  String sql = "select * from t_easyui_menu where true";
	  //String id = JsonUtils.getParamVal(map, "id"); // 获得当前节点的id
	  String id = JsonUtils.getParamVal(map, "menuHid");
	  if (StringUtils.isNotBlank(id)) {
	   sql = sql + " and menuid in ("+id+")";
	  } else {
	   sql = sql + " and menuid = -1";// 没有数据则返回根节点
	  }
	  return super.executeQuery(sql, pageBean);
 }
 /**
  * 查詢meun表單子节点数据
  * @param map
  * @param pageBean
  * @return
  * @throws SQLException 
  * @throws IllegalAccessException 
  * @throws InstantiationException 
  */
 public List<Map<String, Object>> listMenu(Map<String, String[]> map, PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException {
	  String sql = "select * from t_easyui_menu where true";
	  String id = JsonUtils.getParamVal(map, "id"); // 获得当前节点的id
	  if (StringUtils.isNotBlank(id)) {
	   sql = sql + " and parentid = "+id;
	  } else {
	   sql = sql + " and parentid = -1";// 没有数据则返回根节点
	  }
	  return super.executeQuery(sql, pageBean);
 }
 /**
  * [{Menuid:1,....[]},{Menuid:2,....[]}]
  * ->[{id:1,....[]},{id:2,....[]}]
  * menu表的数据不符合easyui树形展示的数据格式
  * 需要转换成easyui所能识别的数据格式
  * @param map
  * @param treeNode
  * @throws SQLException 
  * @throws IllegalAccessException 
  * @throws InstantiationException 
  */
 public void menu2TreeNode(Map<String, Object> map,TreeNode treeNode) throws InstantiationException, IllegalAccessException, SQLException {
	  treeNode.setId(map.get("Menuid").toString());
	  treeNode.setText(map.get("Menuname").toString());
	  treeNode.setAttributes(map);
	  Map<String, String[]> jspMap = new HashMap<>();
	  jspMap.put("id", new String[] {treeNode.getId()});
	  List<Map<String, Object>> listMenu = this.listMenu(jspMap, null);
	  List<TreeNode> treeNodeList = new ArrayList<>();
	  menuList2TreeNodeList(listMenu, treeNodeList);
	  treeNode.setChildren(treeNodeList);
	 } 
	 public void menuList2TreeNodeList(List<Map<String, Object>>  mapList,List<TreeNode> treeNodeList) throws InstantiationException, IllegalAccessException, SQLException {
	  TreeNode treeNode = null;
	  for (Map<String, Object> map : mapList) {
	   treeNode = new TreeNode();
	   menu2TreeNode(map, treeNode);
	   treeNodeList.add(treeNode);
	  }
	 } 
}

UserAction:

package com.liyi.web;

import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.liyi.dao.UserDao;

import com.zking.framework.ActionSupport;
public class UserAction extends ActionSupport {
	 private UserDao userDao = new UserDao();
	 public String login(HttpServletRequest req,HttpServletResponse resp) {
	  try {
	   List<Map<String, Object>> list = this.userDao.list(req.getParameterMap(), null);
	   if(list!=null&&list.size()>0) {
		    List<Map<String, Object>> listMenu = this.userDao.listMenu(req.getParameter("uid"), null);
		    StringBuilder sb = new StringBuilder();
		    for (Map<String, Object> map : listMenu) {
		     sb.append(","+map.get("menuId"));
	    }
	    req.setAttribute("menuHid", sb.substring(1));
	   }else {
	    	return "login";
	   }
	  } catch (Exception e) {
	  	 e.printStackTrace();
	  }
	  return "index";
	 }
}

index.js

$(function(){
 $('#tt').tree({    
	     url:'menuAction.action?methodName=treeMenu&&menuHid='+$("#menuHid").val(),
	     onClick:function(node){
	      if($('#menuTabs').tabs('exists',node.text)){
	       $('#menuTabs').tabs('select',node.text)
	      }
	      else{
	       $('#menuTabs').tabs('add',{    
	              title: node.text,    
	              content:'Tab Body',    
	              closable:true,    
	              tools:[{    
	                  iconCls:'icon-mini-refresh',    
	                  handler:function(){    
	                      alert('refresh');    
	                  }    
	              }]    
	          });
	      }
	     }
	 });
	})

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="${pageContext.request.contextPath }/userAction.action?methodName=login" method="post">
 uid:<input name="uid"><br/>
 upwd:<input name="upwd" type="password"><br/>
 <input type="submit" value="登录"><br/>
</form>
</body>
</html>

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>
<title>Insert title here</title>
</head>
<body class="easyui-layout">
<input type="hidden" id="menuHid" value="${menuHid }">
 <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
 <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
  后台管理界面的菜单
  <ul id="tt"></ul>
 </div>
 <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
 <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
 <div data-options="region:'center',title:'Center'">
  <div id="menuTabs" class="easyui-tabs" style="">   
      <div title="Tab1" style="padding:20px;display:none;">   
          欢迎使用   
      </div>   
  </div>  
 </div>
</body>
</html>