easyui（一）

最新推荐文章于 2022-07-11 18:15:28 发布



最新推荐文章于 2022-07-11 18:15:28 发布

阅读量191

点赞数

分类专栏： EasyUI 文章标签： EasyUI （1）

本文链接：https://blog.csdn.net/qq_43514335/article/details/91474236

版权

EasyUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

EasyUI

jQuery EasyUI 简介

1、什么是EasyUI？
easyui是一种基于jQuery的用户界面插件集合

2、easyui能带给我们什么好处？

① easyui是个完美支持HTML5网页的完整框架

② easyui节省网页开发的时间和规模

③ easyui很简单但功能强大

layout布局

EasyUI中的网页布局一共分为五部分，分别为东，西，南，北，中。在设计自己的网页布局时，中间部分是必须要有的，其余四部分可以不用，因为其余四部分的位置是根据中间部分位置来计算的。EasyUI的布局样式有很多，可以选择自己合适的布局使用，另外可以设置布局中的一些属性值，来使布局更适合自己的网页。

首先引入EasyUI文件
在这里插入图片描述

创建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">
	<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="Tab1" style="padding:20px;display:none;">欢迎使用</div>   
		</div> 
	</div>
</body>
</html>

注：jquery.easyui.min.js基于jquery.min.js，位置不能互换，必须jquery.min.js在前，否则没有效果

通过tree加载菜单

我们取数据库内的数据来展示:

1.导入工具类
BaseDao 通用的查询方法
EncodingFiter 中文乱码处理
JsonBaseDao 可以对集合进行处理继承BaseDao
JsonUtils 专门用来处理json数据的工具包
ResponseUtil 通用的实现
StringUtils 判空处理
在这里插入图片描述
建立TreeNode 实体类

package com.li.entity;

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

public class TreeNode {
	private String id;
	private String text;
	private Map<String, Object> attributes = new HashMap<>();
	private List<TreeNode> children = new ArrayList<>();

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public Map<String, Object> getAttributes() {
		return attributes;
	}

	public void setAttributes(Map<String, Object> attributes) {
		this.attributes = attributes;
	}

	public List<TreeNode> getChildren() {
		return children;
	}

	public void setChildren(List<TreeNode> children) {
		this.children = children;
	}

	public TreeNode(String id, String text, Map<String, Object> attributes, List<TreeNode> children) {
		super();
		this.id = id;
		this.text = text;
		this.attributes = attributes;
		this.children = children;
	}

	public TreeNode() {
		super();
	}

	@Override
	public String toString() {
		return "TreeNode [id=" + id + ", text=" + text + ", attributes=" + attributes + ", children=" + children + "]";
	}

}

MenuDao
调用BaseDao 通用的查询方法

package com.li.dao;

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

import com.li.entity.TreeNode;
import com.li.util.JsonBaseDao;
import com.li.util.JsonUtils;
import com.li.util.PageBean;
import com.li.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 Exception {
		List<Map<String,Object>> listMenu = this.listMenu(map, pageBean);
		List<TreeNode> treeNodeList = new ArrayList<>();
		menuList2TreeNodeList(listMenu, treeNodeList);
		return treeNodeList;
	}
	/**
	 * 查询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");
		if (StringUtils.isNotBlank(id)) {
			sql = sql+" and parentid = "+id;
		}else {
			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);
		
//		treeNode.setChildren(children);
		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);
		
		
	}
	
	/**
	 *  [{Menuid:1,.....[]},{Menuid:2,.....[]}]
	 * -->[{id:1,.....[]},{id:2,.....[]}]
	 * @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;
		
		for (Map<String, Object> map : mapList) {
				treeNode = new TreeNode();
				menu2TreeNode(map, treeNode);
				treeNodeList.add(treeNode);
		}
	}
}

MenuAction
调用自定义的ResponseUtil.write(resp, jsonString)进行json传值代码

package com.li.web;

import java.util.List;

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

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

public class MenuAction extends ActionSupport {
	private MenuDao menuDao = new MenuDao();
	
	public String treeMenu(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		List<TreeNode> list = this.menuDao.list(req.getParameterMap(), null);
		ObjectMapper om = new ObjectMapper();
		//将list集合转换为json串
		String jsonString = om.writeValueAsString(list);
		ResponseUtil.write(resp, jsonString);//封装的json传值代码
		
		return null;
	}

}

配置mvc.xml

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

index.js

$('#tt').tree({    
    url:'tree_data.json'   
});  
$('#tt').tree({    
    url:'menuAction.action?methodName=treeMenu'   
});

案例效果：
在这里插入图片描述

tabs
tabs是点击菜单，在左侧出现界面的操作上面代码已经添加过tabs的代码了
index.jsp

<div data-options="region:'center',title:'Center'">
		<div id="menuTab" class="easyui-tabs" style="">   
		    <div title="Tab1" style="padding:20px;display:none;">欢迎使用</div>   
		</div> 
</div>

重新编写index.js
有两个。一个是通过json文件直接展示数据，一个是通过从数据库获取数据

$(function(){
	$('#tt').tree({
//		url:'tree_data1.json',
//		onClick:function(node){
//			var content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>';
//			// add a new tab panel    
//			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');    
//				        }    
//				    }]    
//				}); 
//			} 
//		}
		url:'menuAction.action?methodName=treeMenu',//调用查询方法获取数据
		onClick:function(node){
			var content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>';
			// add a new tab panel    
			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');    
				        }    
				    }]    
				}); 
			} 
		}
	});
	
})