EasyUI(一)

最新推荐文章于 2022-04-30 21:48:11 发布
最新推荐文章于 2022-04-30 21:48:11 发布
阅读量203 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44234514/article/details/97616937
版权

一、了解什么是EasyUI？

jQuery EasyUI是一组基于jQuery的UI插件集合体；
jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

EasyUI的特点：

jQuery EasyUI为提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。

1、基于jquery用户界面插件的集合
2、为一些当前用于交互的js应用提供必要的功能
3、EasyUI支持两种渲染方式分别为javascript方式（如：$(’#p’).panel({…})）和html标记方式（如：class=“easyui-panel”）
4、支持HTML5（通过data-options属性）
5、开发产品时可节省时间和资源
6、简单，但很强大
7、支持扩展，可根据自己的需求扩展控件
8、目前各项不足正以版本递增的方式不断完善

二、EasyUI的layout控件

1.咱们先下载程序库并导入EasyUI的CSS和Javascript文件到页面

jquery-easyui-1.5.1下载链接：https://pan.baidu.com/s/12ekvDP4gXBj1pc4Xk0HxCA
提取码：7bfk

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

注意：用 ${pageContext.request.contextPath } 表示全路径名，以免路径出错
jquery.min.js必须必须用在jquery.easyui.min.js之前

2.程序库中demo–>layout–>full.html

找到源码：

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

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">
<title>后台管理主界面</title>
<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>  
</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;">
	</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>

运行效果：
在这里插入图片描述

三、EasyUI的tree控件

TreeNode：

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

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 TreeNode() {
	}
	public TreeNode(String id, String text, List<TreeNode> children, Map<String, Object> attributes) {
		this.id = id;
		this.text = text;
		this.children = children;
		this.attributes = attributes;
	}
	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.huangzhiyao.dao;

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

import com.huangzhiyao.entity.TreeNode;
import com.huangzhiyao.util.JsonBaseDao;
import com.huangzhiyao.util.JsonUtils;
import com.huangzhiyao.util.PageBean;
import com.huangzhiyao.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':002},{'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);
		
//		将子节点添加到父节点当中，建立数据之间的父子关系
//		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':002},{'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);
		}
	}
	
}

注意：数据库中表的数据不符合EasyUI树形展示的数据格式
需要转换成easyUI所能识别的数据格式,只能识别：id，text,children…

MenuAction：

package com.huangzhiyao.web;

import java.util.List;

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

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

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

配置mvc.xml：

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

index.js：

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

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">
<title>后台管理主界面</title>
<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>  
</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>
</body>
</html>

运行效果：
在这里插入图片描述

四、EasyUI的tabs控件

index.js：

$(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
				}); 
			}
			
		}

	});
	
})

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">
<title>后台主界面</title>
<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>  
</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>

运行效果：
在这里插入图片描述

一笑舒朗
关注
基于上文的easyui页面 —— html代码
haixia0918的博客
07-30 295
<div id="insertbutton" style="display: none"> <a class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" id="add" onclick="newUser()">新增</a> <a data-options="iconCls:'icon-edit' ,plain:true" class="easyui-linkbutton
easyui一行显示多行_EasyUI DataGrid 实现单行/多行编辑功能
weixin_33369808的博客
02-06 1243
// 初始化数据列表function initDatagrid() {$('#dg').datagrid({loadMsg: '数据加载中请稍后……',striped: true,url: '/api/Attendance',sortName: 'ID',sortOrder: 'desc',method: "get",striped: true,border: true,selectOnCheck...
EasyUI、JQueryUI、HTML5以及跨iframe拖拽
06-06
分析比较了EasyUI、JQueryUI、HTML5的拖拽优缺点，并给出跨iframe拖拽的实现方案（跨iframe拖拽功能，必须将代码存放到服务器上访问才能正常拖拽，本地打开可能无法拖拽，具体原因不是很清楚）
html5 easyui 布局,Easyui 在面板中创建复杂布局_EasyUI 插件
weixin_31608037的博客
06-16 182
通常情况下，在 Windows XP 的资源管理器文件夹中，左侧的面板(panel)包含一些常见任务。 本教程向您展示如何通过 easyui 的面板(panel)插件来创建 XP 左侧面板。 定义一些面板(panel)我们定义一些面板(panel)，这些面板(panel)用来显示一些任务。每个面板(panel)应该至少有折叠/展开工具按钮。代码如下所示： View as a slide showO...
easyui html5主题,详解easyui 切换主题皮肤
weixin_32479897的博客
06-03 1007
1.需要导入的文件(我这里的easyui是jquery-easyui-1.6.11版本)主要实现原理就是换导入css文件,这样就可以实现切换主题皮肤2.前台页面定义了一个按钮(代码)更换皮肤defaultblackbootstrapgraymetro3.前台效果图4.< script>里边写了这个方法：changeTheme/*** 更换EasyUI主题的方法* @param them...
漂亮easyui皮肤组件html模板下载 B 最新 最全
04-03
漂亮easyui皮肤组件html模板下载 B 最新 最全
easyUI例子_easyui1.4.4_一套EASYUI的经典后台管理模板_jquery_
10-03
EasyUI 是一个基于 jQuery 的前端框架，主要用于快速构建用户界面，尤其适用于后台管理系统。这个"easyUI例子_easyui1.4.4"压缩包提供了一套使用 EasyUI 1.4.4 版本的经典后台管理模板，适用于开发人员快速搭建功能...
easyui的例子
01-06
EasyUI 是一个基于 jQuery 的前端框架，用于快速构建用户界面。它提供了丰富的组件，如表格、下拉框、对话框、菜单、按钮等，使得开发者能够便捷地创建具有专业外观和交互性的网页应用。在“easyui”的例子中，我们...
easyui_demo_DEMO_easyui的一个demo_easyui_
09-29
EasyUI 是一款基于 jQuery 的 UI 组件库，它提供了丰富的前端界面组件，如表格、下拉框、对话框、按钮、树形控件等，帮助开发者快速构建美观且功能强大的 Web 应用程序。"easyui_demo_DEMO_easyui的一个demo_easyui_...
基于easyui 1.4.5的单选和多选框组件
07-14
在IT领域，jQuery EasyUI是一个广泛使用的前端框架，它基于jQuery并提供了丰富的UI组件，使得开发者可以快速构建用户界面。本文将深入探讨基于jQuery EasyUI 1.4.5的单选框和多选框组件的使用方法、功能特性以及如何...
通用权限管理系统(html5+ashx+easyui)源码
09-21
一个很好的学习html5 easyui的入门源码
easyUI中的data-options
qq_38222534的博客
04-13 3万+
data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性。通过这个属性，我们可以对easyui组件的实例化可以完全写入到html中，例如：&lt;span style="font-size:14px;"&gt;    &lt;div class="easyui-dialog" style="width:200px;height:100px" dat...
EasyUI之data-options
阳
12-27 1万+
今天在做项目的时候，遇到了一个很棘手的问题。就是我用EasyUI加入的一个手风琴式的导航栏的时候，总是出现导航栏的外边框不知为什么不能出现。 但是，实际的样式是下面的这个样子： 由于自己对EasyUI的理解不是很深刻，所以关于这个错误困扰了我很长时间，后来经过师哥和我的共同努力才发现了真正的问题所在——"data-options"。 对于“data-options”这个方法，刚开始一
easyui data-options的使用
xwnxwn的专栏
07-18 7061
data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性。通过这个属性，我们可以对easyui组件的实例化可以完全写入到html中，例如： 1 <div class="easyui-dialog" style="width:400px;height:200px" 2     d
EasyUI的combobox使用总结
热门推荐
lkforce
01-30 3万+
一，combobox的属性，事件和方法 combobox可以配置属性，绑定事件监听，调用方法，理解这几个概念之后会对combobox有更清晰的了解。 1，配置属性 combobox可以配置自己的属性，他的属性可以定义在&lt;input&gt;或&lt;select&gt;标签的data-options参数中，比如： &lt;select id="type" name="type" cl...
data-options
一只Java小白
06-09 2818
页面代码部分： <thead> <tr> <th data-options="field:'a',width:60">停车时刻</th> <th data-options="field:'nMin',width:50">时长</th> <th data-options="field:'poi',width:80,">地点</th> </tr> </thead> 在easy-ui
easyui01(基本布局)
qq_65345936的博客
04-30 1144
easyui01笔记
EasyUI-初级使用
liupq66的博客
07-21 443
EasyUI是一个强大的jQuery的UI插件集合，提供了丰富的功能，使开发者不必写过多的css样式文件和javascript，就能创建良好的UI界面，大大节省了开发时间。除了良好的界面外，还为开发者提供了强大的数据处理功能，通过jQuery的Ajax方法获取后台的数据后，返回到页面显示，可以通过EasyUI提供的插件来获取，比如datagrid，（具体使用方法后面会有专题讲述）。如果不使用Eas
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值