easyui(一)

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

什么是easyui
easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

第一先导她的架包
在这里插入图片描述
在创文件夹
在这里插入图片描述
然后把架包导进去
在这里插入图片描述
ctrl+shifl+r 查找本工作区间打开的工程打开的文件

然后把jQuery 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">
<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的控件
TreeNode

package com.lj.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 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.lj.dao;

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

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

public class MenuDao extends JsonBaseDao{
	
	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;
	}
	
	
	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);
		}
	}
	
}

MenuAction

package com.lj.web;

import java.util.List;

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

import com.fasterxml.jackson.databind.ObjectMapper;
import com.lj.dao.MenuDao;
import com.lj.entity.TreeNode;
import com.lj.framework.ActionSupport;
import com.lj.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;
	}
}

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
weixin_43710113的博客
06-11 365
1.什么是EasyUI EasyUI是基于jQuery的用户界面插件集合体。 EasyUI的目标就是帮助Web开发者轻松的打造出功能丰富、且美观的UI界面。开发者不需要编写复杂的JavaScript脚本，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 2.EasyUI组成部分 EasyUI下载后解压，其组成部分有： 文件/文件夹 说明 demo Ea...
easyui一行显示多行_EasyUI DataGrid 实现单行/多行编辑功能
weixin_33369808的博客
02-06 1244
// 初始化数据列表function initDatagrid() {$('#dg').datagrid({loadMsg: '数据加载中请稍后……',striped: true,url: '/api/Attendance',sortName: 'ID',sortOrder: 'desc',method: "get",striped: true,border: true,selectOnCheck...
非常漂亮的easyui后台模板
07-24
非常漂亮的easyui的后台模板，全部是html+js组成！非常漂亮！可以下载学习！
easyui
weixin_63719049的博客
05-05 315
初步了解easyui
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的单选框和多选框组件的使用方法、功能特性以及如何...
超漂亮的easyui前端模板源码（二）
03-29
超漂亮的easyui前端开发模板，后台管理系统可直接套用，包括了系统首页，菜单导航展示，表格展示、图片表格展示等
超级漂亮的EasyUI框架皮肤源码
09-01
超级漂亮的JQuery EasyUI框架皮肤源码，超级漂亮！超级漂亮！超级漂亮！重要的事情只说三遍！你也觉得漂亮的话就好评！好评！好评！你有好资源也多多分享！多多分享！多多分享！
easyui超漂亮前端模板，兼容IE6
03-29
非常好看的后台管理系统easyui前端模板，可直接套用，包括了首页面菜单、树、表格、图片表格，主题切换等功能
easyui三套精美皮肤
11-27
easyui三套精美皮肤，easyui三套精美皮肤，easyui三套精美皮肤，
EasyUI做的漂亮的后台管理框架
04-02
很漂亮的EasyUI后台框架，做后台很好看。
JqueryEasyUI：一站式前端控件库详解
"JqueryEasyUI 是一个基于 jQuery 的用户界面库，提供了丰富的组件和控件，便于开发者构建交互式的 Web 应用程序。" 在 JqueryEasyUI 中，你可以找到一系列常用且易于使用的控件，例如： 1. **Accordion（可折叠...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值