EasyUI (一)

今天让我们初识初识一下EasyUI：

     EasyUI简介：

          1、easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。
          2、easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
          3、使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
          4、easyui是个完美支持HTML5网页的完整框架。
          5、easyui节省您网页开发的时间和规模。
          6、easyui节省您网页开发的时间和规模。
          总而言之，easyui很简单但功能强大的。

          jQuery EasyUI 离线简体中文API+工具包全集(点击链接即可下载)

    下面用案例进行对数据库的数据利用EasyUI进行操作：
          1、通过layout布局
          2、通过tree加载菜单
          3、通过菜单去打开不同的tab页

    首先导入我们的助手类：

    所需jar包：

    EasyUI所需的资料：

    实体类：TreeNode.java

package com.liyi.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 Map<String, Object> attributes = new HashMap<>();
	 private List<TreeNode> children = new ArrayList<>();
	 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 Map<String, Object> getAttributes() {
	  return attributes;
	 }
	 public void setAttributes(Map<String, Object> attributes) {
	  this.attributes = attributes;
	 }
	 public List<TreeNode> getChildren() {
	  return children;
	 }
	 public void setChildren(List<TreeNode> children) {
	  this.children = children;
	 }
	 public TreeNode(String id, String text, Map<String, Object> attributes, List<TreeNode> children) {
	  super();
	  this.id = id;
	  this.text = text;
	  this.attributes = attributes;
	  this.children = children;
	 }
	 public TreeNode() {
	  super();
	 }
	 @Override
	 public String toString() {
	  return "TreeNode [id=" + id + ", text=" + text + ", attributes=" + attributes + ", children=" + children + "]";
	 }
}

    MenuDao.java:

package com.liyi.dao;

import java.sql.SQLException;

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

import com.liyi.entity.TreeNode;

import com.liyi.util.JsonBaseDao;
import com.liyi.util.JsonUtils;
import com.liyi.util.PageBean;
import com.liyi.util.StringUtils;
public class MenuDao extends JsonBaseDao {
	 /**
	  * @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> treeNodeList = new ArrayList<>();
	  menuList2TreeNodeList(ListMenu, treeNodeList);
	  return treeNodeList;
	 }
	 /**
	  * 查詢meun表單子节点数据
	  * @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"); // 获得当前节点的id
	  if (StringUtils.isNotBlank(id)) {
	   sql = sql + " and parentid = " + id;
	  } else {
	   sql = sql + " and parentid = -1";// 没有数据则返回根节点
	  }
	  return super.executeQuery(sql, pageBean);
	 }
	 /**
	  * menu表的数据不符合easyui树形展示的数据格式
	  * 需要转换成easyui所能识别的数据格式
	  * @param map
	  * @param treeNode
	  * @throws SQLException 
	  * @throws IllegalAccessException 
	  * @throws InstantiationException 
	  */
	 public 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);
	  
	  Map<String, String[]> jspMap = new HashMap<>();
	  jspMap.put("id", new String[] {treeNode.getId()});
	  List<Map<String, Object>> listMenu = this.listMenu(jspMap, null);
	  List<TreeNode> treeNodeList = new ArrayList<>();
	  menuList2TreeNodeList(listMenu, treeNodeList);
	  treeNode.setChildren(treeNodeList);
	 } 
	 
	 public 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);
	  }
	 } 
}

    MenuAction .java:

package com.liyi.web;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletRespons

import com.fasterxml.jackson.databind.ObjectMapper;

import com.liyi.dao.MenuDao;
import com.liyi.entity.TreeNode;
import com.liyi.util.ResponseUtil;

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

    界面:index.jsp(按相应的顺序导入EasyUI的CSS和Javascript文件到您的页面)

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

    index.js:

$(function(){
 $('#tt').tree({    
     url:'menuAction.action?methodName=treeMenu',
     onClick:function(node){
      if($('#menuTabs').tabs('exists',node.text)){
       $('#menuTabs').tabs('select',node.text)
      }
      else{
       $('#menuTabs').tabs('add',{    
              title: node.text,    
              content:'Tab Body',    
              closable:true,    
              tools:[{    
                  iconCls:'icon-mini-refresh',    
                  handler:function(){    
                      alert('refresh');    
                  }    
              }]    
          });
      }
     }
 });
})

    mvc.xml:

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

    web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>liyi_easyui</display-name>
  <filter>
    <filter-name>encodingFiter</filter-name>
    <filter-class>com.liyi.util.EncodingFiter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>encodingFiter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <servlet>
    <servlet-name>actionServlet</servlet-name>
    <servlet-class>com.zking.framework.ActionServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>actionServlet</servlet-name>
    <url-pattern>*.action</url-pattern>
  </servlet-mapping>
</web-app>

    效果图：
    今日总结：
数据库表的数据不符合easyui树形展示的数据格式，需要转换成easyui所能识别的数据格式。