jQueryEasyUI实战-优快云博客

本文链接：https://blog.youkuaiyun.com/P_YUX/article/details/94354736

jQuery EasyUI

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

1.jQuery EasyUI的特点:
1、基于jquery用户界面插件的集合

2、为一些当前用于交互的js应用提供必要的功能

3、EasyUI支持两种渲染方式分别为javascript方式(如:$(’#p’).panel({…}))和html标记方式(如:class=“easyui-panel”)

4、支持HTML5(通过data-options属性)

5、开发产品时可节省时间和资源

6、简单，但很强大

7、支持扩展，可根据自己的需求扩展控件

8、目前各项不足正以版本递增的方式不断完善

jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合，包括功能强大的 datagrid(数据网格)、treegrid(树形表格)、 panel(面板)、combo(下拉组合)等等。用户可以组合使用这些组件，也可以单独使用其中一个。

案例

效果
在这里插入图片描述
第一步导入Easyui

**TreeNode **
代码：

/**
 * 作用通过TreeNode类转换成
 * tree——dateal.json字符串
 * @author dell
 *
 */
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

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':‘后勤管理’}}]

	 */
	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);;
		
//		将子节点添加到父节点当中，建立数据之间的父子关系	001
//		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
代码：

public class MenuAction extends ActionSupport{
	
    private MenuDao menudao= new MenuDao();
	
	public String menutree(HttpServletRequest req,HttpServletResponse resp) {
	    
		ObjectMapper om=new ObjectMapper();
	    try {	
        List<TreeNode> list = this.menudao.listTreeNode(req.getParameterMap(), null);
        ResponseUtil.write(resp, om.writeValueAsString(list));
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}	
		return null;
   }
}

mvc.xml
代码：

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

index.jsp

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

<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/index.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;">
       	   菜单管理
    <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="menuTab" class="easyui-tabs" style="">   
    <div title="首页" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
       	 欢迎界面 
    </div>   
</div>  	
</div>
</body>
</html>