easyui(一)

EasyUI框架详解

最新推荐文章于 2022-07-04 22:51:15 发布

原创最新推荐文章于 2022-07-04 22:51:15 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

本文深入讲解了EasyUI框架的特点和使用方法，包括其作为非分布式前端框架的角色，以及如何通过layout布局和tree组件来构建复杂界面，同时演示了如何与数据库交互生成动态菜单。

1.easyui

非分布式前端框架，并且不支持响应式

ui框架
easyui=jquery+html4（用来做后台的管理界面）半老徐娘
bootstrap=jquery+html5 美女拜金
layui 清纯少女

jQuery EasyUI 1.5 版 API 中文版 (Made By Richie696)查看地址
http://download.youkuaiyun.com/album/detail/343
找到如下图文件:
在这里插入图片描述
1、通过layout布局
在线API 或者官方dome

<%@ 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/public/easyui5/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.easyui.min.js"></script>  
<title>Insert title here</title>
</head>
<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;">west content</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>
</body>

</html>

在这里插入图片描述

2、通过tree加载菜单
在这里插入图片描述
JSP页面

<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
	菜单管理
<ul id="tt"></ul>  
</div>

index.js

$(function() {
	$('#tt').tree({    
	    url:'tree_data1.json'   
	});  
});

tree_data1.json

[{
	"id":1,
	"text":"菜单管理",
	"children":[{
		"id":11,
		"text":"财务",
		"state":"closed",
		"children":[{
			"id":111,
			"text":"学费缴纳"
		},{
			"id":112,
			"text":"Wife"
		},{
			"id":113,
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"后勤",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"宿舍费用缴纳",
			"attributes":{
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

查询数据库完成tree树
jsonbaseDao

package com.qukang.util;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class JsonBaseDao extends BaseDao<Map<String,Object>> {
	public List<Map<String,Object>> executeQuery(String sql, PageBean pageBean) throws SQLException, InstantiationException, IllegalAccessException{
		return super.executeQuery(sql, pageBean, new Callback<Map<String,Object>>() {
			@Override
			public List<Map<String,Object>> foreach(ResultSet rs) throws SQLException, InstantiationException, IllegalAccessException {
				/*
				 * 1、创建一个实体类的实例
				 * 2、给创建的实例属性赋值
				 * 3、将添加完类容的实体类添加到list集合中
				 */
//				list.add(new Book(rs.getInt("bid"), rs.getString("bname"), rs.getFloat("price")));
				List<Map<String,Object>> list = new ArrayList<>();
//				获取源数据
				ResultSetMetaData md =rs.getMetaData();
				int count = md.getColumnCount();
				Map<String,Object> map = null;
				while(rs.next()) {
					map = new HashMap<>();
					for (int i = 1; i <= count; i++) {
						map.put(md.getColumnName(i), rs.getObject(i));
					}
					list.add(map);
				}
				return list;
			}
		});
	}
	
	/**
	 * 
	 * @param sql
	 * @param attrs	map中的key
	 * @param paMap	jsp向后台传递的参数集合
	 * @return
	 * @throws SQLException
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 */
	public int executeUpdate(String sql, String[] attrs, Map<String,String[]> paMap) throws SQLException, NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException {
		Connection con = DBAccess.getConnection();
		PreparedStatement pst = con.prepareStatement(sql);
		for (int i = 0; i < attrs.length; i++) {
			pst.setObject(i+1, JsonUtils.getParamVal(paMap, attrs[i]));
		}
		return pst.executeUpdate();
	}
}

MenuDao(将数据库的数据转成json格式)，并且实现递归调用方法，然后利用父id查子id，实现无限子查询

package com.qukang.dao;

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

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

public class MenuDao extends JsonBaseDao {
	/**
	 * 给前台返回tree_data1.json的字符串
	 * 
	 * @param paMap
	 *            从前台jsp传递过来的参数集合
	 * @param pageBean
	 * @return
	 * @throws SQLException
	 * @throws IllegalAccessException
	 * @throws InstantiationException
	 */
	public List<TreeNode> listTreeNode(Map<String, String[]> paMap, PageBean pageBean)throws InstantiationException, IllegalAccessException, SQLException {
		List<Map<String, Object>> listMap = this.listMap(paMap, pageBean);
		List<TreeNode> listTreeNode = new ArrayList<>();
		this.listMapToListTreeNode(listMap, listTreeNode);
		return listTreeNode;
	}

	/**
	 * [{'Menuid':001,'Menuname':‘学生管理’},{{'Menuid':001,'Menuname':‘后勤管理’}}]
	 * 
	 * @param paMap
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public List<Map<String, Object>> listMap(Map<String, String[]> paMap, PageBean pageBean)
			throws InstantiationException, IllegalAccessException, SQLException {
		String sql = "select * from t_easyui_menu where true";
		String menuId = JsonUtils.getParamVal(paMap, "Menuid");
		if (StringUtils.isNotBlank(menuId)) {
			sql += " and parentid=" + menuId;
		} else {
			sql += " and parentid=-1";
		}

		// 这里面存放的是数据库中菜单信息
		List<Map<String, Object>> listMap = super.executeQuery(sql, pageBean);
		return listMap;
	}

	/**
	 * {'Menuid':001,'Menuname':‘学生管理’}
	 * -->
	 * {id:...,text:...}
	 * @param map
	 * @param treeNode
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	private void mapToTreeNode(Map<String, Object> map, TreeNode treeNode) throws InstantiationException, IllegalAccessException, SQLException {
		treeNode.setId(map.get("Menuid")+"");
		treeNode.setText(map.get("Menuname")+"");
		treeNode.setAttributes(map);
		
//		将子节点添加到父节点当中，建立数据之间的父子关系	001
//		treeNode.setChildren(children);
		Map<String, String[]> childrenMap = new HashMap<>();
		childrenMap.put("Menuid", new String[] {treeNode.getId()});
		List<Map<String, Object>> listMap = this.listMap(childrenMap, null);
		List<TreeNode> listTreeNode = new ArrayList<>();
		this.listMapToListTreeNode(listMap, listTreeNode);
		treeNode.setChildren(listTreeNode);
	}

	/**
	 * [{'Menuid':001,'Menuname':‘学生管理’},{{'Menuid':001,'Menuname':‘后勤管理’}}]
	 * -->
	 * tree_data1.json
	 * @param listMap
	 * @param listTreeNode
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	private void listMapToListTreeNode(List<Map<String, Object>> listMap, List<TreeNode> listTreeNode) throws InstantiationException,IllegalAccessException, SQLException {
		TreeNode treeNode = null;
		for (Map<String, Object> map : listMap) {
			treeNode = new TreeNode();
			mapToTreeNode(map, treeNode);
			listTreeNode.add(treeNode);
		}
	}

}

子接口

package com.qukang.web;

import java.util.List;

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

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.qukang.dao.MenuDao;
import com.qukang.entity.TreeNode;
import com.qukang.framework.ActionSupport;
import com.qukang.util.ResponseUtil;

public class MenuAction extends ActionSupport {
	private MenuDao dao=new MenuDao();
	public String menuTree(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception {
		ObjectMapper mapper=new ObjectMapper();
//		获取easyui框架所识别的json格式
		List<TreeNode> listTreeNode = this.dao.listTreeNode(req.getParameterMap(),null);
		ResponseUtil.write(resp,mapper.writeValueAsString(listTreeNode));
		return null;
		
	}
}

mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<action path="/menuAction" type="com.qukang.web.MenuAction">
</config>

index.js

$(function() {
	$('#tt').tree({    
	    url:'menuAction.action?methodName=menuTree'   
	});  
});

在这里插入图片描述
3、通过菜单去打开不同的tab页
普通的弹出窗口

$(function() {
	$('#tt').tree({    
	    url:'menuAction.action?methodName=menuTree',
	    onClick: function(node){
			alert(node.text);  // 在用户点击的时候提示
		}
	});  
});

在这里插入图片描述
弹出窗口选项卡

判断是否存在，如果table页已经被打开，那么你再次点击的话，就直接定位到当前的table页

$(function() {
	$('#tt').tree({    
	    url:'menuAction.action?methodName=menuTree',
	    onClick: function(node){
//			alert(node.text);  // 在用户点击的时候提示
			// add a new tab panel
	    	var content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>';
			if($('#menuTab').tabs('exists',node.text)){
				$('#menuTab').tabs('select',node.text);
			}else{
				$('#menuTab').tabs('add',{    
				    title:node.text,    
				    content:content,    
				    closable:true,    
				    tools:[{    
				        iconCls:'icon-mini-refresh',    
				        handler:function(){    
				            alert('refresh');    
				        }    
				    }]    
				});  
			}
	    	
		}
	});  
});

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/public/easyui5/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/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">
	<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="menuTab" class="easyui-tabs" style="">   
    <div title="首页" style="padding:20px;display:none;">   
       欢迎界面   
    </div>   

</div> 
	</div>
</body>

</html>

在这里插入图片描述