Easyui前端框架详解-优快云博客

本文链接：https://blog.youkuaiyun.com/chenkang_ck/article/details/94055029

本文介绍了前端框架Easyui，它基于jquery，适用于后台管理界面。文章详细讲解了Easyui的layout布局，强调了导入jar包和正确引用的重要性，并展示了index界面的layout布局示例。接着，文章探讨了Easyui的tree菜单实现，包括数据转换、实体类、 Dao和Action的使用，以及配置和js编写。最后，文章讨论了Easyui的tabs功能，解释了如何处理重复点击和页面显示的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、Easyui介绍

Easyui是前端框架的一种
Easyui=jquery+html4(用来做后台的管理界面)
但是Easyui出现的比较久相对来说很少用了但是它相对的功能还是比较完善的；
想学好Easyui就必须先学好jquery！！

2、Easyui的layout布局

首先我们要知道它需要用到的jar包
在这里插入图片描述
里面包括mvc自定义分页以及自定义标签以及xml建模；
接下来就是导入Easyui，css样式以及javascript文件

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/public/easyui5/themes/default/easyui.css">   
<link rel="stylesheet" type="${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>

记住前面一定要用全路径名避免出错！！
接下来看一下index界面

<%@ 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>后台主界面</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/public/easyui5/themes/default/easyui.css">   
<link rel="stylesheet" type="${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>  

</head>
</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>

这里body里面的就是一种layout布局

3、Easyui的tree菜单

既然说要用到tree菜单我们也到导入相应得文件
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的数据格式我们需要转换成符合的格式
实体类
TreeNode：

package com.chenkang.entity;
/**
 * 作用是通过TreeNode类转成
 * tree_data1.json的字符串
 * @author Administrator
 *
 */

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 List<TreeNode>children =new ArrayList<>();
	private Map<String, Object>attributes=new HashMap<>();
	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 List<TreeNode> getChildren() {
		return children;
	}
	public void setChildren(List<TreeNode> children) {
		this.children = children;
	}
	public Map<String, Object> getAttributes() {
		return attributes;
	}
	public void setAttributes(Map<String, Object> attributes) {
		this.attributes = attributes;
	}
	@Override
	public String toString() {
		return "TreeNode [id=" + id + ", text=" + text + ", children=" + children + ", attributes=" + attributes + "]";
	}
	
	
}

MenuDao:访问数据库类

package com.chenkang.dao;

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

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

public class MenuDao extends JsonBaseDao{
	/**
	 * [{'Menu':001,'Menumane':'学生管理'},{{'Menu':001,'Menumane':'后勤管理'}}]
	 * 给前台返回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;
		
	}
	
	
	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;
		
	}
	/**
	 * {'Menu':001,'Menumane':'学生管理'}
	 * -->
	 * {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);
//			将子节点添加到父节点当中，建立数据之间的父子关系
//			treeNode.setAttributes(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);
		}
		/**
		 * [{'Menu':001,'Menumane':'学生管理'},{{'Menu':001,'Menumane':'后勤管理'}}]
		 * -->
		 * 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);
			}
		}
}

MenuAction：将list集合转换成json串

package com.chenkang.web;

import java.util.List;

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

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

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

然后就是写一个js

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

})

然后就是mvc.xml配置

<action path="/menuAction" type="com.chenkang.web.MenuAction">
	</action>

编写的js也要在主界面给他导入进去！！
然后就是运行结果：
在这里插入图片描述
数据库的数据全部都过来了就好啦

4、Easyui的tabs

j就是一些很常见的问题比如点击任务栏的他就会显示在右侧界面
还有就是重复点击他都不会在重新再开一个界面
就是一个界面不管你点多少次也只有一个界面出现
接下来用到的就是编写的js

$(function(){
	$('#tt').tree({    
	    url:'menuAction.action?methodName=menuTree',
	    onClick: function(node){
//			alert(node.text);  // 在用户点击的时候提示
//			// add a new tab panel    $.extends
			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
				});  
			}
			


		}
	});  

})

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>后台主界面</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/public/easyui5/themes/default/easyui.css">   
<link rel="stylesheet" type="${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>  

</head>
</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>

测试结果
在这里插入图片描述