Easyui入门

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

一.什么是easyui？

easyui是一种基于jQuery的用户界面插件集合

二.easyui能带给我们什么好处？

1.easyui是个完美支持HTML5网页的完整框架
2.easyui节省网页开发的时间和规模
3.easyui很简单但功能强大
3.1 防止页面缓存
3.2 路径问题
3.2.1 相对路径/绝对路径
绝对路径：${pageContext.request.contextPath}
3.2.2 base标签

三.示例

1.layout布局
首先导入需要用的各类文件
在这里插入图片描述
引用css,jQuery，easyUI样式到jsp页面上。找到各种文件名，替换下列文件的路径，并且改为绝对路径（注：jquery.min.js必须放在jquery.easyui.min.js，避免路径错误）

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

找到文件demo，并在其中的layout中找到full.html页面，复制下列源代码到jsp页面

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

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=ISO-8859-1">
<title>后台主界面</title>
<!-- 找到各种文件名，替换下列文件的路径，并且改为绝对路径 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/public/easyui/themes/black/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/public/easyui/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/public/easyui/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/public/easyui/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>

2.树形（tree）菜单
导入jar包和各种工具类
在这里插入图片描述
在这里插入图片描述
创建一个仿json形式的实体类TreeNode
作用是通过TreeNode的类转换成tree_data.json的字符串

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

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> attribute=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> getAttribute() {
	return attribute;
}
public void setAttribute(Map<String, Object> attribute) {
	this.attribute = attribute;
}
@Override
public String toString() {
	return "TreeNode [id=" + id + ", text=" + text + ", children=" + children + ", attribute=" + attribute + "]";
}
}

编写一个dao方法类访问数据库里的数据，进行填充（MenuDao）

package com.ningjie.dao;

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

import com.ningjie.entity.TreeNode;
import com.zking.util.JsonBaseDao;
import com.zking.util.JsonUtils;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;

public class MenuDao extends JsonBaseDao{
	/**
	 * 给前台返回tree_data.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{
//	获取到easyUI框架所识别的json格式
	<Map<String, Object>> listMap = this.listMap(paMap, pageBean);
	List<TreeNode> list=new ArrayList<>();
	this.listMapToListTreeNode(listMap, list);
	return null;
}
/**
 * [{'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;
}
private void MapToTreeNode(Map<String, Object> map,TreeNode treeNode) throws InstantiationException, IllegalAccessException, SQLException {
	treeNode.setId(map.get("Menuid")+"");
	treeNode.setText(map.get("Menuname")+"");
	treeNode.setAttribute(map);
//	将子节点放到父节点当中，建立父子关系
//	treeNode.setChildren(children);
	Map<String, String[]> childrenMap=new HashMap<>();
	childrenMap.put("Menuid", new String[] {treeNode.getId()});
	this.listMap(childrenMap, null);
	List<TreeNode> list=new ArrayList<>();
	this.listMapToListTreeNode(listMap, list);
	treeNode.setChildren(list);
}
private void listMapToListTreeNode(Map<String, Object> listMap,List<TreeNode> list) {
	TreeNode treeNode=null;
	for (Map<String, Object> map : listMap) {
		treeNode=new TreeNode();
		MapToTreeNode(map, treeNode);
		list.add(treeNode);
	}
}
}

MenuAction

package com.ningjie.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.ningjie.dao.MenuDao;
import com.ningjie.entity.TreeNode;
import com.zking.framework.ActionSupport;
import com.zking.util.ResponseUtil;

public class MenuAction extends ActionSupport{
	private MenuDao menuDao=new MenuDao();
public String meunTree(HttpServletRequest req,HttpServletResponse resp) {
	ObjectMapper om=new ObjectMapper();
	try {
		List<TreeNode> listTreeNode = this.menuDao.listTreeNode(req.getParameterMap(), null);
		ResponseUtil.write(resp, om.writeValueAsBytes(listTreeNode));
	} catch (JsonProcessingException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	} catch (Exception e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	return null;
}
}

进行mvc.xml配置

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

编写index.js

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

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=ISO-8859-1">
<title>后台主界面</title>
<!-- 找到各种文件名，替换下列文件的路径，并且改为绝对路径 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/public/easyui/themes/black/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/public/easyui/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/public/easyui/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/public/easyui/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>

在这里插入图片描述
3.tab页
在API文件中找到下列文件

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        tab3    
    </div>   
</div>  


// add a new tab panel    
$('#tt').tabs('add',{    
    title:'New Tab',    
    content:'Tab Body',    
    closable:true,    
    tools:[{    
        iconCls:'icon-mini-refresh',    
        handler:function(){    
            alert('refresh');    
        }    
    }]    
});

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=ISO-8859-1">
<title>后台主界面</title>
<!-- 找到各种文件名，替换下列文件的路径，并且改为绝对路径 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/public/easyui/themes/black/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/public/easyui/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/public/easyui/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/public/easyui/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="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="首页" style="padding:20px;display:none;">   
        欢迎界面   
    </div>   
</div>  
	
	</div>
</body>
</html>
卤蛋会敲代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
EasyUI入门
01-08
文章目录EasyUI入门简单介绍目录说明使用EasyUI导入的包声明组件的两个方法easyui组件的三要素常见异常常用的组件 EasyUI入门 简单介绍 Easyui它就是基于jquery封装的一个前端框架，让我们后端程序员，不需要写复杂的js或者css就能把easyui玩转 才开始学习这个框架的伙伴可以进入EasyUI官网直接查看demo模块，看其能实现哪些效果。千万不要一来直接看代码。肯定晕！ $(‘#cc’).combobox({ url: …, required: true, valueField: ‘id’, textField: ‘text’ }); 提示： 1 查看组
easyui dialog“缓存问题”
IT小生
06-10 9419
var _url="addCheckIndexa.action?eval.id=-1&temp="+$('#indexId').val(); $("#editCheckIndex").dialog({ title:"新增指标", cache:false, href:_url, resizable: true, height: 400, width
EasyUI-数据表格的编辑缓存
dxm809的博客
03-28 403
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scri...
easyui combobox <select> 清空之后保存
wuhc_javaweb的博客
01-11 847
一、首先要知道combobox的一些方法和其他相关的东西 Combobox用法和方法参数: 1、 需要引入class=" easyui-combobox” 2、 参数设置需要在data-options中设置 3、 属性参数配置： valueField：基础数据值名称绑定到Combobox(提交值) textField：基础数据的字段名称绑定的Combobox（显
jquery easyui的datarid组件的getSelections方法貌似有缓存一样。。。。。
qsw2lw的博客
05-03 302
我是用datagrid的getSelections获取选中的记录行之后进行删除操作，第一次删除ID为QY001的数据的时候成功，第二次删除ID为QY002的数据的时候删除失败了，看了控制台是这么报错的 org.springframework.dao.EmptyResultDataAccessException: No class cn.aiFenYou.charts.domain.bc.Reg...
Easy UI Tree 组件获取属性attributes、children为undefined问题及解决方案
jerryzhou的博客
03-29 1833
问题描述： Tree加载完成后要为叶节点添加onClick事件，需要在center中打开一个tab，其中要用到node的attributes自定义属性中的url来指向打开的路径，但是一直提示该属性undefined。 图1 控制台报错，attributes自定义属性中的url为undefined Response 中JSON中有值 调试发现，只有id，text，state有值，其余tree...
jQueryEasyUI入门
07-22
教程名称：jQuery EasyUI入门课程目录：【】02.[jQueryEasyUI]第2章使用EasyUI【】03.[jQueryEasyUI]第3章Draggable(拖动)组件【】04.[jQueryEasyUI]第4章Droppable(放置)组件【】05.[jQueryEasyUI]第5章Resizable...
easyui入门教程
11-09
本资源为easyui入门级视频教程，百度云链接，永久有效，失效联系我
easyui入门级视频(适合新手)
05-08
一个适合新手入门的easyui视频，下到就是赚到。共有20个视频，不要998，也不要98，仅仅只是需要一点积分而已。
easyUI入门
小宝的宝呢的博客
09-10 204
一，easyUI简介 why：快速开发 虽然从效果来看，easyUI的界面效果要远远差于bootstrap，layout，但 从金钱的角度上，开发首先会排除掉bootstrap 从学习文档的完整性、前端框架的稳定性，组件的丰富性考虑，easyui都要优于layui 从公司的角度,考虑框架成本、公司的后端技术人员前端功底、前端的社区活跃度 what：html4+jQuery的快速开发的前端框架 where：后端开发管理界面 常用控件：layout，tree，tabs，datagrid，form
easyUI属性及相应示例
姝涵的一年365
02-13 911
CSS类定义：1.div easyui-window 生成一个window窗体样式。属性如下： 1. modal:是否生成模态窗口。true[是] false[否] 2. shadow:是否显示窗口阴影。true[显示] false[不显示]2.div easyui-panel 生成一个面板。属性如下： 1. title:该标题文本显示在面板头部。 2. ic
easyui入门
weixin_67780833的博客
05-04 2181
​ 前言 提示：以下是本篇文章正文内容，下面案例可供参考 一、easyui布局 先创建一个static文件，然后里面css、images、js文件。 把jquery-easyui-1.5.1文件复制到js文件中。 二、easyui使用步骤 1.新建一个页面引入下面四行代码至新建的页面 代码如下（示例）： ...
grpcio-1.47.0-cp310-cp310-linux_armv7l.whl
05-22
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
小程序项目源码-美容预约小程序.zip
05-22
小程序项目源码-美容预约小程序小程序项目源码-美容预约小程序小程序项目源码-美容预约小程序小程序项目源码-美容预约小程序小程序项目源码-美容预约小程序小程序项目源码-美容预约小程序小程序项目源码-美容预约小程序小程序项目源码-美容预约小程序v
MobaXterm 工具
最新发布
05-22
MobaXterm 工具
grpcio-1.48.0-cp37-cp37m-linux_armv7l.whl
05-22
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
扁平风格PPT可修改ppt下载(11).zip
05-22
扁平风格PPT可修改ppt下载(11).zip
基于MATLAB实现的msk信号调制解调过程，包括发送端及接收端信号谱分析过程+使用说明文档.rar
05-22
CSDN IT狂飙上传的代码均可运行，功能ok的情况下才上传的，直接替换数据即可使用，小白也能轻松上手 【资源说明】 基于MATLAB实现的msk信号调制解调过程，包括发送端及接收端信号谱分析过程+使用说明文档.rar 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2020b；若运行有误，根据提示GPT修改；若不会，私信博主（问题描述要详细）； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可后台私信博主； 4.1 期刊或参考文献复现 4.2 Matlab程序定制 4.3 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信 5、欢迎下载，沟通交流，互相学习，共同进步！
easyui comboinput
10-11
EasyUI ComboInput 是一个基于 jQuery 和 EasyUI 框架的输入组件，它可以用于创建带有下拉选项列表的文本输入框。用户可以通过键入文本或选择下拉列表中的选项来输入内容。 ComboInput组件的使用方式如下： 1. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值