easyui

一 .easyui入门

关于EasyUI:
EasyUI框架式基于JQuery的,使用它帮助我们快捷的构建web网页。EasyUI框架是一个简单、易用、强大的轻量级web前端javascript框架。现阶段来说，在开发web项目时,前端的开发我们更喜欢使用JQuery代替原生的javascript,原因大概是基于如下方面：
JQuery是基于javascript的扩展,使页面和脚本进行了分离。
JQuery的宗旨:用最少的代码最多的事。
在javascript的扩展(框架中),JQuery对于性能的理解是十分到位的。
基于JQuery的插件越来越多,也越来越人性化,对于项目的开发有一定的借鉴。
简单、易学、快速上手让其更具吸引力。

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

功能：
打造出功能丰富并且美观的UI界面

特点：
打造出功能丰富并且美观的UI界面
jQuery EasyUI为提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。
jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的，同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用，相对于extjs更轻量。

最主要的使用就是引入easyui.min.js文件。以及其相应的jquery.min.js文件。注意的是jquery-easyui是基于jquery的,因此jquery.min.js文件最好先于easyui.min.js先引入。

导入Easyui：

导入需要的jar包：

TreeNode实体类：

package com.xhh.entity;

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

/**
 * 作用通过TreeNode类转换成
 * tree——dateal.json字符串
 * @author linyaodong
 *
 */
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;
	}
	
	@Override
	public String toString() {
		return "TreeNode [id=" + id + ", text=" + text + ", children=" + children + ", attributes=" + attributes + "]";
	}
}

MenuDao：

package com.xhh.dao;

import java.sql.SQLException;

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

import com.xhh.entity.TreeNode;
import com.xhh.util.JsonBaseDao;
import com.xhh.util.JsonUtils;
import com.xhh.util.PageBean;
import com.xhh.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") &#