前端框架 之 easyui（一）

1.初始easyui

EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。大家都知道jQuery是基于js 的一个库，所以在导入文件的时候一定要注意他们的顺序

下面是我写代码时导入的顺序，最后一个是自己写的。还有就是文件的路径名不能写错

<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. easyUI 的特点

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

jQuery EasyUI有以下特点：

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

3.tree树状控件 和 tabs控件

树状控件对于我而言是比较难的，具体的东西我也不是很懂。无奈。。。话不多说，上代码。
2.1，在这里我首先来跟大家说一下我们的这个树状控件的应用场景，在我们的数据库有一个权限表。菜单管理列的Menuid 与 统一配置的parentid的信息是一样的，这样我们就能清晰的看出来我们权限的大类和小类。
2.2，我们一起来看一下我们的项目的结构，
BaseDao 通用的查询方法 作用：在方法或类中已经完成了对应的功能，然后在调用方去根据自己的需求去处理结果。 使得代码更加灵活。
EncodingFiter 中文乱码处理
JsonBaseDao 可以对集合进行处理 继承BaseDao
JsonUtils 专门用来处理json数据的工具包
ResponseUtil 通用的实现
StringUtils 判空处理

TreeNode 实体类

package com.huguiyun.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(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();
	}

	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 dao方法继承JsonBaseDao

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.huguiyun.entity.TreeNode;
import com.huguiyun.util.JsonBaseDao;
import com.huguiyun.util.JsonUtils;
import com.huguiyun.util.PageBean;
import com.huguiyun.util.StringUtils;

public class MenuDao extends JsonBaseDao {
   

	/**
	 * 
	 * @param map
	 *            req.getParameterMap
	 * @param pagebean
	 *            分页
	 * @return
	 * @throws Exception
	 */
	public List<TreeNode> list(Map<String, String[]> map, PageBean pagebean) throws Exception {
   
		List<Map<String, Object>> listMenu = this.listMenu(map, pagebean);
		List<TreeNode> treeNodeList = new ArrayList<>();
		menuList2TreeNodeList(listMenu, treeNodeList);
		return treeNodeList;

	}

	/**
	 * 查询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.isNotBlank(id)) {
   
			sql = sql + " and parentid=" + id;
		} else {
   
			sql = sql + " and parentid=-1";
		}
		return super.executeQuery(sql, pagebean);
	}

	/**
	 * 单个转格式 menu表的数据不符合easyUI树形展示的数据格式 需要转换成easyUI所能识别的格式
	 * 
	 * @throws SQLException
	 * @throws IllegalAccessException
	 * @throws InstantiationException
	 * 
	 * @throws Exception
	 *
	 */
	public void