easyui(一) 入门

最新推荐文章于 2025-06-28 16:31:23 发布

原创最新推荐文章于 2025-06-28 16:31:23 发布 · 561 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#easyui 入门

java 专栏收录该内容

24 篇文章

订阅专栏

easyui(一) 入门

什么是 EasyUI

jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。
easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。
easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。
easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。
HTML 网页的完整框架。
easyui 节省了开发产品的时间和规模。
easyui 非常简单，但是功能非常强大。

我们来通过3个案例来入门 easyui
我们先去网上下载 easyui 然后把文件放入工程中
在这里插入图片描述

案例一 layout布局

下载程序库并导入EasyUI的CSS和Javascript文件到您的页面。

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">   
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>   
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

放入之后我们需要改以下scr 路径上面是官方提供的，以下是我修改后的：
${pageContext.request.contextPath} 代表全路径

<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/static/easyui5/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/static/easyui5/themes/black/easyui.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/easyui5/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/easyui5/jquery.easyui.min.js"></script>

然后找到文件中 demo —— layout —— full.html 进入页面把源代码放入页面中
在这里插入图片描述
网页显示：

案例二：通过tree加载菜单

在这里插入图片描述
在layout 布局中在左边的容器放树形菜单

写一个js 文件。这个文件作用是：
从后台返回的数据写到网页中

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

然后再到下载的文件中进入 demo —— tree 放入到工程中放到位置要和jsp文件在同一级
在这里插入图片描述
搞完之后

后台调用数据：
实体类

package com.hyf.entity;

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

/**
 * 争对easyui属性展示的json格式串进行了实体类的描述
 * 
 * @author 17628
 *
 */
public class TreeNode {
	private String id;
	private String text;
	private List<TreeNode> children = new ArrayList<TreeNode>();
	private Map<String, Object> attributes = new HashMap<String, Object>();

	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;
	}

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

dao方法

package com.hyf.dao;

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

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

public class MenuDao extends JsonBaseDao {

	/**
	 * List<TreeNode> 加上objectMapper 可以转换成easyui的tree控件识别的json
	 * 
	 * @param map
	 * @param pageBean
	 * @return
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	public List<TreeNode> listTreeNode(Map<String, String[]> map, PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException {
		List<Map<String, Object>> listMenu = this.listMenu(map, pageBean);
		List<TreeNode> listTreeNode = new ArrayList<TreeNode>();
		this.listMapToListTreeNode(listMenu, listTreeNode);
		return listTreeNode;
	}

	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, "Menuid");
		if (StringUtils.isNotBlank(id)) {
			sql +=" and parentid="+id;
		} else {
			sql += " and parentid=-1";
		}
		return super.executeQuery(sql, pageBean);
	}
	
	public void mapToTreeNode(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[]> childMap = new HashMap<String, String[]>();
		childMap.put("Menuid",new String [] {treeNode.getId()});
		// 查询当前节点所拥有的子节点集合
		List<Map<String, Object>> listMenu = this.listMenu(childMap, null);
		List<TreeNode> listTreeNode = new ArrayList<TreeNode>();
		this.listMapToListTreeNode(listMenu, listTreeNode);
		treeNode.setChildren(listTreeNode);
	}
	
	public void listMapToListTreeNode(List<Map<String, Object>> list,List<TreeNode> listTreeNode) throws InstantiationException, IllegalAccessException, SQLException {
		TreeNode treeNode = null;
		for (Map<String, Object> map : list) {
			treeNode = new TreeNode();
			this.mapToTreeNode(map, treeNode);
			listTreeNode.add(treeNode);
		}
	}
	

}

menuAction

package com.hyf.web;

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

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

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

public class MenuAction extends ActionSupport {
	private MenuDao menuDao = new MenuDao();

	public String menuTree(HttpServletRequest req, HttpServletResponse resp) {
		try {
			List<TreeNode> listTreeNode = this.menuDao.listTreeNode(req.getParameterMap(), null);
			ObjectMapper om = new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(listTreeNode));
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}
}

mvc.xml 文件

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

配置 web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>web_easyui</display-name>

  <filter>
  	<filter-name>encodingFiter</filter-name>
  	<filter-class>com.hyf.util.EncodingFiter</filter-class>
  </filter>
  <filter-mapping>
  	<filter-name>encodingFiter</filter-name>
  	<url-pattern>/*</url-pattern>
  </filter-mapping>
  
  <servlet>
  	<servlet-name>actionServlet</servlet-name>
  	<servlet-class>com.zking.framework.ActionServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>actionServlet</servlet-name>
  	<url-pattern>*.action</url-pattern>
  </servlet-mapping>
</web-app>

需要改变的地方：
在这里插入图片描述

网页输出：

在这里插入图片描述

通过菜单去打开不同的tab页

需求：不可以重复打相同的页面
在这里插入图片描述
改变js 代码
select 方法：

$(function(){
	$('#tt').tree({    
	    url:'menuAction.action?methodName=menuTree' ,
	    onClick: function (node){
	    	//alert(node.attributes.menuURL); //在用户点击时候提醒
	    	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">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/static/easyui5/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/static/easyui5/themes/black/easyui.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/easyui5/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/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'">
<!--  tab页-->
	<div id="menuTab" class="easyui-tabs" style="height:800px;">   
    <div title="首页" style="padding:20px;display:none;">   
       默认展示
    </div>   
    
</div>  
	</div>
</body>
</html>