本文链接：https://blog.csdn.net/qq_43588771/article/details/91471207

easyui入门

- 简单介绍
案例

简单介绍

easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。

案例

layout布局

1.导包

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

用全路径名的好处是以防找不到包，导包的顺序必须按上面的导包顺序来，否则就会出现不了本来该有的效果。
2.body内容

<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 id="menuTabs" class="easyui-tabs" style="">   
	    <div title="Tab1" style="padding:20px;display:none;">   
	       欢迎使用  
	    </div>   
</div>

tree加载菜单

1.导入工具类
在这里插入图片描述
jsp代码

	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
		后台管理界面的菜单
		<ul id="tt"></ul>
	</div>

js代码

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

tree_data1.json
此类直接从EasyUI 1.5 版 API 中文版中copy下来即可

TreeNode

package com.shl.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 Map<String, Object> getAttributes() {
		return attributes;
	}
	public void setAttributes(Map<String, Object> attributes) {
		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;
	}
	@Override
	public String toString() {
		return "TreeNode [id=" + id + ", text=" + text + ", children=" + children + "]";
	}
}

MenuDao

package com.shl.dao;

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

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

public class MenuDao extends JsonBaseDao {
	/**
	 * @param map  req.getparameterMap
	 * @param pb  分页
	 * @return
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	public List<TreeNode> list(Map<String, String[]> map,PageBean pb) throws InstantiationException, IllegalAccessException, SQLException{
		List<Map<String, Object>> listMenu=this.listMenu(map, pb);
		List<TreeNode> tnlist=new ArrayList<>();
		menuList2TreeNodeList(listMenu,tnlist);
		return tnlist;
	}
	
	/**
	 * 查询menu表的数据
	 * @param map
	 * @param pb
	 * @return
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	public List<Map<String, Object>> listMenu(Map<String, String[]> map,PageBean pb) throws InstantiationException, IllegalAccessException, SQLException{
		String sql="select * from t_easyui_menu where true";
		String id=JsonUtils.getParamVal(map, "id");
		if(StringUtils.isNotBlank(id)) {
			sql=sql+" and parentid = "+id;
		}
		else {
			sql=sql+" and parentid = -1";
		}
		return super.executeQuery(sql, pb);
	}
	
	/**
	 * {Menuid:1}-->{id:1}
	 * 
	 * menu表中的数据不符合easyUI树形展示的数据格式
	 * 需要转换成easyUI所能识别的数据格式
	 * @param map
	 * @param tn
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	private void menu2TreeNode(Map<String, Object> map,TreeNode tn) throws InstantiationException, IllegalAccessException, SQLException {
		tn.setId(map.get("Menuid").toString());
		tn.setText(map.get("Menuname").toString());
		tn.setAttributes(map);
		
		//tn.setChildren(children);
		Map<String, String[]> jspMap=new HashMap<>();
		jspMap.put("id", new String[] {tn.getId()});
		List<Map<String, Object>> listMenu = this.listMenu(jspMap, null);
		List<TreeNode> tnlist=new ArrayList<>();
		menuList2TreeNodeList(listMenu,tnlist);
		tn.setChildren(tnlist);
	}
	
	/**
	 * [{Menuid:1},{Menuid:2}.....]-->[{id:1},{id:2}....]
	 * @param maplist
	 * @param tnlist
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	private void menuList2TreeNodeList(List<Map<String, Object>> maplist,List<TreeNode> tnlist) throws InstantiationException, IllegalAccessException, SQLException {
		TreeNode tn=null;
		for (Map<String, Object> map : maplist) {
			tn=new TreeNode();
			menu2TreeNode(map,tn);
			tnlist.add(tn);
		}
	}
}

MenuAction

package com.shl.web;

import java.util.List;

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

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

public class MenuAction extends ActionSupport {
	
	private MenuDao md=new MenuDao();
	
	public String treeMenu(HttpServletRequest req,HttpServletResponse resp) throws Exception {
		List<TreeNode> list = this.md.list(req.getParameterMap(),null);
		ObjectMapper om=new ObjectMapper();
		//将list集合转换成json串
		String jsonstr = om.writeValueAsString(list);
		ResponseUtil.write(resp, jsonstr);
		return null;
	}
}

mvc.xml

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

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

tabs

tabs是点击菜单，在左侧出现界面的操作
index.jsp

<div data-options="region:'center',title:'Center'">
		<div id="menuTabs" class="easyui-tabs" style="">   
	   		 <div title="Tab1" style="padding:20px;display:none;">   
	     		  欢迎使用  
	    	</div>   
	</div>  	
</div>

** index.js**

$(function(){
	$("#tt").tree({
		url:'menuAction.action?methodName=treeMenu',
		onClick:function(node){
			//content为跳转界面的路径
			var content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>';
			if($('#menuTabs').tabs('exists',node.text)){//如果界面已经存在，则让那个界面选中
				$('#menuTabs').tabs('select',node.text);
			}
			else{//如果不存在，那就新增一个页面
				$('#menuTabs').tabs('add',{    
					title:node.text,    
					content:content,    
					closable:true,    
					tools:[{    
						iconCls:'icon-mini-refresh',    
						handler:function(){    
							alert('refresh');    
						}    
					}]    
				});  
			}
		}
	})
})

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