欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

EasyUI 高级控件

程序员文章站 2022-03-30 18:55:39
...

EasyUI 高级控件

EasyUI 高级控件

前言：在项目开发中，我们通常都要设计登录者的权限，然而，不同的用户所拥有的权限也不一样，不同的用户也可拥有一些相同的权限。

举个简单的例子，相信大家都玩过QQ，那么，就以QQ的普通用户（①）、VIP用户（②）、SVIP（③）用户为例：①②③都可以使用QQ的基本功能，但是，②③在基本功能上还会有一些特殊的权限（比如使用某些特殊装扮），然而，③的功能权限又比②的权限又多了一些，总而言之，QQ等级越高，某些权限越大 。

同理：登录者的身份越高，所拥有的权限越高 。

权限功能体现

权限思路：

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

广泛意义：在登陆时，通过用户登录的ID，查询中间表的数据，查找到该用户所拥有的权限，在菜单项中展示即可。

权限功能代码展示

有一些简单的基本代码就不展示了哈，我把重要的代码展示出来了，相信大家能看懂的。

jsp & 自定义js 界面

login.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">
<title>Insert title here</title>
</head>
<body>
<div align="center">
<h2>登 录 界 面</h2>
	<form action="${pageContext.request.contextPath }/userAction.action?methodName=login" method="post">
		登 录 ID : <input type="text" name="uid"><br><br>
		登 录 密 码 : <input type="password" name="upwd"><br><br>
		<input type="submit" value="登录">
	</form>
</div>
</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/index.js"></script>  


<title>Insert title here</title>
</head>
<!-- 隐藏域传值 menuHid   -->
<input type="hidden" id="menuHid" value="${menuHid }" >
<body class="easyui-layout">
	<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>

index.js

//程序入口
$(function(){
	//写入 easyui 里的 api代码
	$('#tt').tree({    
		
	    url:'MenuAction.action?methodName=treeMenu&menuHid='+$("#menuHid").val(), 
	    	onClick:function(node){
	    		var content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>';
	    		if($('#menuTabs').tabs('exists',node.text)){//已经有选项卡选中
	    			$('#menuTabs').tabs('select',node.text)//不添加，直接选中
	    		}else{
	    			//添加新的选项卡面板   
		    		$('#menuTabs').tabs('add',{    
		    		    title:node.text,    
		    		    content:content,    
		    		    closable:true,    
		    		    tools:[{    
		    		        iconCls:'icon-mini-refresh',    
		    		        handler:function(){    
		    		            alert('refresh');    
		    		        }    
		    		    }]    
		    		});  
	    		}

	    	}
	}); 
	
})

dao 方法

UserDao

package com.dj.dao;

import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import com.dj.util.JsonBaseDao;
import com.dj.util.JsonUtils;
import com.dj.util.PageBean;
import com.dj.util.StringUtils;

public class UserDao extends JsonBaseDao {
	
	/**
	 * 登录
	 * 
	 * 登录查询用户表 t_easyui_user_version2
	 * @param paMap 传值
	 * @param pageBean 是否分页
	 * @return
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	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 1=1 ";
		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 1=1 ";
		if(StringUtils.isNotBlank(uid)) {
			sql = sql + " and uid="+uid;
		}
		return super.executeQuery(sql, pageBean);
	}
}

MenuDao

package com.dj.dao;

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

import com.dj.entity.TreeNode;
import com.dj.util.JsonBaseDao;
import com.dj.util.JsonUtils;
import com.dj.util.PageBean;
import com.dj.util.StringUtils;

public class MenuDao extends JsonBaseDao {

	/**
	 * 数据库查询
	 * @param map req.getParamenterMap传入
	 * @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);//查数据库 返回一个easyui不能识别的listMenu
		List<TreeNode> treeNodeList = new ArrayList<>();//定义treeNodeList
		//listMenu是直接查表的数据不能展示，转为treeNodeList
		menuList2TreeNodeList(listMenu, treeNodeList);//调用方法将menu表的数据，转换成easyui所能识别的数据格式treeNodeList
		return treeNodeList;
	}
	
	/**
	 * 第一次的时候调用
	 * @param map
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public List<Map<String,Object>> listMenuSef(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_menu where 1=1 ";
		String id = JsonUtils.getParamVal(map, "menuHid");//当前节点的id 子节点的父节点
		
		if(StringUtils.isNotBlank(id)) {//id 有值
			sql = sql + " and menuid in ("+ id +") ";//查到所有子节点
		}else {//id 没传
			sql = sql + " and menuid=-1";//第一次进来的根节点
		}
		return super.executeQuery(sql, pageBean);
	}
	
	/**
	 * 从第二次开始，反复调用此方法！！！
	 * 
	 * 查询 menu 表的数据
	 * @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 1=1 ";
		//String id = JsonUtils.getParamVal(map, "id");//当前节点的id 子节点的父节点
		String id = JsonUtils.getParamVal(map, "id");//当前节点的id 子节点的父节点
		
		if(StringUtils.isNotBlank(id)) {//id 有值
			sql = sql + " and parentid = "+id;//查到所有子节点
		}else {//id 没传
			sql = sql + " and parentid=-1";//第一次进来的根节点
		}
		return super.executeQuery(sql, pageBean);
	}
	
	/**
	 * {Menuid:1,......[]}----->{id:1,......[]}
	 * menu表的数据不符合easyui树形展示的数据格式
	 * 转换成easyui所能识别的数据格式
	 * @param map
	 * @param treeNode
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	private 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()});//当前节点作为父节点的id进行查询
		List<Map<String, Object>> listMenu = this.listMenu(jspMap, null);//调用查询方法  查找到当前id的所有子节点 
		//listMenu是直接查表的数据不能展示，转为treeNodeList
		List<TreeNode> treeNodeList = new ArrayList<>();
		//调用menuList2TreeNodeList方法
		menuList2TreeNodeList(listMenu, treeNodeList);//转数据格式
		treeNode.setChildren(treeNodeList);
	}
	
	/**
	 * [{Menuid:1,......[]},{Menuid:1,......[]},......]----->[{id:1,......[]},{Menuid:1,......[]},......]
	 * @param mapList
	 * @param treeNodeList
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	private void menuList2TreeNodeList(List<Map<String,Object>> mapList,List<TreeNode> treeNodeList) throws InstantiationException, IllegalAccessException, SQLException {
		TreeNode treeNode = null;
		
		//把map遍历
		for (Map<String, Object> map : mapList) {
			treeNode = new TreeNode();
			menu2TreeNode(map, treeNode);//调用方法将menu表的数据，转换成easyui所能识别的数据格式
			treeNodeList.add(treeNode);//最终展示 treeNodeList
		}	
	}	
}

Servlet 主控制

UserAction

package com.dj.web;

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

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

import com.dj.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集合不为空
				List<Map<String, Object>> listMenu = this.userDao.listMenu(req.getParameter("uid"), null);//查询登录用户的权限
				StringBuffer sb = new StringBuffer();
				for (Map<String, Object> map : listMenu) {//遍历权限集合listMenu
					sb.append(","+map.get("menuId"));//将集合加入sb中
				}
				req.setAttribute("menuHid", sb.substring(1));//sb.substring(1)去除第一个逗号  并设置menuHid的值
			}else {
				req.getSession().setAttribute("message", "用户id或密码有误，请重新登录！");
				return "login";//登录错误返回登录界面
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return "index";
	}
}

MenuAction

package com.dj.web;

import java.util.List;

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

import com.dj.dao.MenuDao;
import com.dj.entity.TreeNode;
import com.dj.util.ResponseUtil;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.framework.ActionSupport;

public class MenuAction extends ActionSupport {
	
	private MenuDao menuDao = new MenuDao();
	
	public String treeMenu(HttpServletRequest req,HttpServletResponse resp) {
		try {
			List<TreeNode> list = this.menuDao.list(req.getParameterMap(), null);
			ObjectMapper om = new ObjectMapper();
			String jsonStr = om.writeValueAsString(list);
			//将list集合转换成json串
			ResponseUtil.write(resp, jsonStr);//工具类封装
			
		} catch ( Exception e) {
			e.printStackTrace();
		}
		return null;
	}

}

配置 xml

mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<config>
	
	<action path="/MenuAction" type="com.dj.web.MenuAction">
		<forward name="index" path="/index.jsp" redirect="false" />
	</action>
	
	<action path="/userAction" type="com.dj.web.UserAction">
		<forward name="index" path="/index.jsp" redirect="false" />
	</action>
	
</config>

效果展示

登录时：
EasyUI 高级控件
登陆后：
EasyUI 高级控件

相关标签： EasyUI

上一篇： 解决部分浏览器下easyUI加载异常问题

下一篇： “挂羊头，卖狗肉”，影视众筹不为人知的惊天骗局！！！

推荐阅读