easyui_easyui javascript-CSDN博客

本文链接：https://blog.csdn.net/YY908046027/article/details/91469961

入门easyui

1.初识easyui

1.初识easyui

easyui是一个前端框架，方便使用

1.引入easyui
路径不能错，而且顺序不能乱，不然会遇到一系列的问题

所以得仔细检查一下啦

<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>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/js/index.js"></script>

2.创建一个类

$(function(){
	$('#tt').tree({
		url:'menuAction.action?methodName=treeMenu',
		onClick:function(node){
			var content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURl+'" width="99%" height="99%"></iframe>';//去重
			if($('menuTabs').tabs('exists',note.text)){
				$('menuTabs').tabs('exists',note.text)
			}
			else{
				$('#menuTabs').tabs('add',{    
				    title:note.text,    
				    content:content,    
				    closable:true,    
				    tools:[{    
				        iconCls:'icon-mini-refresh',    
				        handler:function(){    
				            alert('refresh');    
				        }    
				    }]    
				});  
			}
		}
	});
	
})

3.主界面

<%@ 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">
<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>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/js/index.js"></script>

<title>Insert title here</title>

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

4.建一个类,BaseDao

package com.zking.util;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

/**
 * 通用的查询方法 23种设计模式之策略模式 
 * 作用：在方法或类中已经完成了对应的功能，然后在调用方去根据自己的需求去处理结果。 使得代码更加灵活。
 * 
 * @author Administrator
 *
 * @param <T>
 */
public class BaseDao<T> {
	// $.ajax
	protected interface Callback<T> {
		public List<T> foreach(ResultSet rs) throws SQLException, InstantiationException, IllegalAccessException;
	}

	public List<T> executeQuery(String sql, PageBean pageBean, Callback<T> callback)
			throws SQLException, InstantiationException, IllegalAccessException {
		if (pageBean != null && pageBean.isPagination()) {
			Connection con = DBAccess.getConnection();
			String countSql = getCountSql(sql);
			PreparedStatement countPst = con.prepareStatement(countSql);
			ResultSet countRs = countPst.executeQuery();
			if (countRs.next()) {
				pageBean.setTotal(countRs.getObject(1).toString());
			}
			DBAccess.close(null, countPst, countRs);

			String pageSql = getPageSql(sql, pageBean);
			PreparedStatement pagePst = con.prepareStatement(pageSql);
			ResultSet pageRs = pagePst.executeQuery();
			try {
				return callback.foreach(pageRs);
			}  finally {
				DBAccess.close(con);
			}
		} else {
			Connection con = DBAccess.getConnection();
			PreparedStatement pst = con.prepareStatement(sql);
			ResultSet rs = pst.executeQuery();
			try {
				return callback.foreach(rs);
			} finally {
				DBAccess.close(con);
			}
		}

	}

	/**
	 * 将原生态的sql语句转换成查对应的当页记录数sql语句
	 * 
	 * @param sql
	 * @param pageBean
	 * @return
	 */
	private String getPageSql(String sql, PageBean pageBean) {
		return sql + " limit " + pageBean.getStartIndex() + "," + pageBean.getRows();
	}

	/**
	 * 将原生态的sql语句转换成查总记录输的sql语句
	 * 
	 * @param sql
	 * @return
	 */
	private String getCountSql(String sql) {
		return "select count(1) from (" + sql + " ) t";
	}
}

5.创建一个类写：JsonBaseDao

package com.zking.util;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class JsonBaseDao extends BaseDao<Map<String,Object>> {
	public List<Map<String,Object>> executeQuery(String sql, PageBean pageBean) throws SQLException, InstantiationException, IllegalAccessException{
		return super.executeQuery(sql, pageBean, new Callback<Map<String,Object>>() {
			@Override
			public List<Map<String,Object>> foreach(ResultSet rs) throws SQLException, InstantiationException, IllegalAccessException {
				/*
				 * 1、创建一个实体类的实例
				 * 2、给创建的实例属性赋值
				 * 3、将添加完类容的实体类添加到list集合中
				 */
//				list.add(new Book(rs.getInt("bid"), rs.getString("bname"), rs.getFloat("price")));
				List<Map<String,Object>> list = new ArrayList<>();
//				获取源数据
				ResultSetMetaData md = rs.getMetaData();
				int count = md.getColumnCount();
				Map<String,Object> map = null;
				while(rs.next()) {
					map = new HashMap<>();
					for (int i = 1; i <= count; i++) {
						map.put(md.getColumnName(i), rs.getObject(i));
					}
					list.add(map);
				}
				return list;
			}
		});
	}
	
	/**
	 * 
	 * @param sql
	 * @param attrs	map中的key
	 * @param paMap	jsp向后台传递的参数集合
	 * @return
	 * @throws SQLException
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 */
	public int executeUpdate(String sql, String[] attrs, Map<String,String[]> paMap) throws SQLException, NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException {
		Connection con = DBAccess.getConnection();
		PreparedStatement pst = con.prepareStatement(sql);
		for (int i = 0; i < attrs.length; i++) {
			pst.setObject(i+1, JsonUtils.getParamVal(paMap, attrs[i]));
		}
		return pst.executeUpdate();
	}
}

6.MenuActon

package com.zking.web;

import java.util.List;

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

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

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

7.MenuDao

package com.zking.dao;

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

import com.zking.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{
	
	private List<TreeNode> treeNodeList;



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