EasyUI 入门

最新推荐文章于 2021-09-09 22:18:23 发布

Summer∩_∩

最新推荐文章于 2021-09-09 22:18:23 发布

阅读量165

点赞数 1

文章标签： EasyUI 入门

本文链接：https://blog.csdn.net/weixin_45174537/article/details/93982608

版权

1.EasyUI是什么？：

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

2.jQuery EasyUI有以下特点：

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

3.jQuery EasyUI

下载网址：http://www.jeasyui.com/download/v18.php

jQuery EasyUI 官方API文档中文版version 1.5

列表：
在这里插入图片描述

4.Easyui的导入

我们使用一个框架首先我们要导入它的jar包和文件
在这里插入图片描述
5、引入必要的js和css样式文件

要想在页面中使用EasyUI，那么首先要做的就是在页面中引入必要js和css样式文件，以在jsp文件中使用EasyUI为例，文件引入的顺序如下所示：

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

案例

1、通过layout布局

<%@ 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>  
</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;">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>

</html>

在这里插入图片描述

2、通过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"
	}]
}]

TreeNode（实体类）

package com.caoguangli.entity;

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

/**
 * 作用是通过TreeNode类转成
 * tree——data1.json的字符串
 * @author Administrator
 *
 */
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;
	}
	public TreeNode(String id, String text, List<TreeNode> children, Map<String, Object> attributes) {
		super();
		this.id = id;
		this.text = text;
		this.children = children;
		this.attributes = attributes;
	}
	public TreeNode() {
		super();
	}
	@Override
	public String toString() {
		return "TreeNode [id=" + id + ", text=" + text + ", children=" + children + ", attributes=" + attributes + "]";
	}
    
    
}

MenuDao（继承JsonBaseDao）

package com.caoguangli.dao;

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

import com.caoguangli.entity.TreeNode;
import com.caoguangli.util.JsonBaseDao;
import com.caoguangli.util.JsonUtils;
import com.caoguangli.util.PageBean;
import com.caoguangli.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':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;
	}
	
	/**
	 * {'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':001,'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 （继承ActionSupport ）

package com.caoguangli.web;

import java.util.List;

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

import com.caoguangli.dao.MenuDao;
import com.caoguangli.entity.TreeNode;
import com.caoguangli.framework.ActionSupport;
import com.caoguangli.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) {
		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) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
		
	}
}

mvc.xml配置

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

index.js

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

界面效果：
在这里插入图片描述
3、Tabs（通过菜单去打开不同的tab页）

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

<div data-options="region:'center',title:'Center'">
	   <div id="menuTab" class="easyui-tabs" style="width:500px;height:250px;">   
            <div title="首页" style="padding:20px;display:none;">欢迎界面</div>    
	</div>

index.jsp

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

页面效果：

在这里插入图片描述

Summer∩_∩

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI 入门

1.EasyUI是什么？：jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。2.jQuery EasyUI有以下特点：1、基于jquery用户界面插件的集合2...
复制链接

扫一扫