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") + "");
		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);
		}
	}

}

web层MenuAction ：

package com.xhh.web;

import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

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

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

tree_date1.json是一种数据格式，这个格式不能变，它是json的串，它是json里面的混合模式；

[{
	"id":1,
	"text":"菜单管理",
	"children":[{
		"id":11,
		"text":"财务",
		"state":"closed",
		"children":[{
			"id":111,
			"text":"学费缴纳"
		},{
			"id":112,
			"text":"Wife"
		},{
			"id":113,
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"后勤",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"宿舍费用缴纳",
			"attributes":{
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

index.js:

$(function(){
	$('#tt').tree({    
	    url:'menuAction.action?methodName=menuTree',
	    onClick: function(node){
//	    	alert(node.text);用户点击提示
	    	// add a new tab panel
	    	var content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>';
	    	if($('#menuTab').tabs('exists',node.text)){
	    		//存在执行选项卡选中已有选项卡的操作
	    		$('#menuTab').tabs('select',node.text);
	    	}else{
	    		//不存在执行新增的操作
	    		$('#menuTab').tabs('add',{    
		    	    title:node.text,    
		    	    content:content,    
		    	    closable:true,    
		    	   
		    	}); 
	    	}	    	   	
	    }
	});	
})

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>mvc2</display-name>
<filter>
    <filter-name>encodingFiter</filter-name>
    <filter-class>com.xhh.util.EncodingFiter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>encodingFiter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

 <servlet>
  <servlet-name>dispatcherServlet</servlet-name>
  <servlet-class>com.xhh.framework.DispatcherServlet</servlet-class>
  <init-param>
     <param-name>xmlPath</param-name>
     <param-value>/mvc.xml</param-value>
  </init-param>
 </servlet>
 <servlet-mapping>
  <servlet-name>dispatcherServlet</servlet-name>
  <url-pattern>*.action</url-pattern>
 </servlet-mapping>

</web-app>

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<!-- <action path="/cal_add" type="com.xhh.web.AddCalAction"> <forward name="rs" 
		path="/rs.jsp" redirect="false" /> </action> -->
	<action path="/StudentAction" type="com.xhh.web.StudentAction">
		<forward name="index" path="/index.jsp" redirect="false" />
		<forward name="add" path="/StudentAction.action?method=getAll"
			redirect="false" />
		<forward name="update" path="/update.jsp" redirect="false" />
	</action>

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

index.jsp页面：

<%@ 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/easyui5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/static/easyui5/themes/icon.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/easyui5/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/easyui5/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/js/index.js"></script>
<title>后台管理界面</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="menuTab" class="easyui-tabs" style="">
			<div title="首页" data-options="iconCls:'icon-reload',closable:true"
				style="padding: 20px; display: none;">欢迎界面</div>
		</div>
	</div>
</body>
</html>

测试：

jQuery能做什么？
1.获取页面元素
2.修改页面外观
3. 改变页面大的内容
4. 响应用户的页面操作
5. 为页面添加动态效果
6. 无需刷新页面，即可从服务器获取信息
7. 简化常见的JavaScript任务
jQuery中 $ .get()提交和$.post()提交的区别
1、 $ .get()使用GET方法来进行异步提交 $.post()使用POST方法来进行异步提交
2、get请求方式将参数跟在url后进行传递用户可见 post请求则是作为http消息的实体内容发送给服务器，用户不可见
3、post传输数据比get大
4、get请求的数据会被浏览器缓存 不安全

在ajax中发送data主要有几种方式？
url拼接 json数组 form表单serialize()序列化

jQuery中的hover()和toggle()有什么区别
hover()《好我》方法用于模拟光标悬停事件
toggle()《套狗》方法是连续点击事件

jQuery中的冒泡事件，怎么执行，如何停止冒泡事件
从里面往外面开始触发
提供了stopPropagation() 方法可以停止冒泡

介绍一下easyui的布局
分为上，中，下，左，右面板 一般在工作中使用上（登录,退出） 左（菜单）中（展示数据）

easyui如何实现表单验证
提供了一个validatebox插件来验证一个表单 input表单根据validType属性来应用验证 validType="email"邮箱验证 required="true"必填项

easyui如何实现表格分页
将pagination 属性设为true 在数据网格下生成一个分页工具栏 工具栏会发送连个参数到服务器 page当前页 默认1 rows：每页显示行

二 .jQuery EasyUI 窗口 - 自定义窗口工具栏

默认情况下，窗口 window有四个工具：collapsible、minimizable、maximizable 和 closable。比如我们定义以下窗口 window：

  <div id="win" class="easyui-window" title="My Window" style="padding:10px;width:200px;height:100px;">
        window content
    </div>

如需自定义工具，设置该工具为 true 或者 false。比如我们希望定义一个窗口 window，仅仅拥有一个可关闭的工具。应该设置任何其他工具为 false。我们可以在标记中或者通过 jQuery 代码定义 tools 属性。现在我们使用 jQuery 代码来定义窗口 window：

 $('#win').window({
        collapsible:false,
        minimizable:false,
        maximizable:false
    });

如果我们希望添加自定义的工具到窗口 window，我们可以使用 tools 属性。演示,我们添加两个工具到窗口 window：

 $('#win').window({
        collapsible:false,
        minimizable:false,
        maximizable:false,
        tools:[{
            iconCls:'icon-add',
            handler:function(){
                alert('add');
            }
        },{
            iconCls:'icon-remove',
            handler:function(){
                alert('remove');
            }
        }]
    });

三 .jQuery EasyUI 布局 - 为网页创建边框布局

边框布局 border layout提供五个区域：east、west、north、south、center。以下是一些通常用法：

• north 区域可以用来显示网站的标语。
• south 区域可以用来显示版权以及一些说明。
• west 区域可以用来显示导航菜单。
• east 区域可以用来显示一些推广的项目。
• center 区域可以用来显示主要的内容。

为了应用布局 layout，您应该确定一个布局 layout容器，然后定义一些区域,以下是一个布局 layout实例：

 <div class="easyui-layout" style="width:400px;height:200px;">
        <div region="west" split="true" title="Navigator" style="width:150px;">
            <p style="padding:5px;margin:0;">Select language:</p>
            <ul>
                <li><a href="javascript:void(0)" onclick="showcontent('java')">Java</a></li>
                <li><a href="javascript:void(0)" onclick="showcontent('cshape')">C#</a></li>
                <li><a href="javascript:void(0)" onclick="showcontent('vb')">VB</a></li>
                <li><a href="javascript:void(0)" onclick="showcontent('erlang')">Erlang</a></li>
            </ul>
        </div>
        <div id="content" region="center" title="Language" style="padding:5px;">
        </div>
    </div>

我们在一个 div 容器中创建了一个边框布局 border layout，布局 layout把容器切割为两个部分，左边是导航菜单，右边是主内容。
最后我们写一个 onclick 事件处理函数 showcontent ：

  function showcontent(language){
        $('#content').html('Introduction to ' + language + ' language');
    }

四. EasyUI框架

使用EasyUI框架时，需要导入3个包在项目js文件夹之中。

需先引入相关文件：

<!--引入jquery-->
    <script src="../js/jquery.min.js" charset="utf-8"></script>
    <!--引入easyui-->
    <script src="../js/jquery.easyui.min.js" charset="utf-8"></script>
    <!--引入样式-->
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
    <!--引入图标样式-->
    <link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
    <!--导入语言包-->
    <script src="../js/easyui-lang-zh_CN.js"></script>

Panel:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <title>layout</title>
    <!--引入jquery-->
    <script src="../js/jquery.min.js" charset="utf-8"></script>
    <!--引入easyui-->
    <script src="../js/jquery.easyui.min.js" charset="utf-8"></script>
    <!--引入样式-->
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
    <!--引入图标样式-->
    <link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
    <!--导入语言包-->
    <script src="../js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<table id="t">
</table>
</body>
<script type="text/javascript">
    $(function(){
        $("#t").datagrid({
            columns:[[
                {
                    title:'编号',
                    field:'id',
                    width:100,
                },{
                    title:'姓名',
                    field:'name',
                    width:200,
                },{
                    title:'成绩',
                    field:'score',
                    width:100,
                }
            ]],
            width:400,
            url:'data.json',
            method:'get',
            pagination:true
        })
    })
</script>
</html>

datagrid:

<head>
    <meta charset="UTF-8">
    <title></title>
    <title>layout</title>
    <!--引入jquery-->
    <script src="../js/jquery.min.js" charset="utf-8"></script>
    <!--引入easyui-->
    <script src="../js/jquery.easyui.min.js" charset="utf-8"></script>
    <!--引入样式-->
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
    <!--引入图标样式-->
    <link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
    <!--导入语言包-->
    <script src="../js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<table id="t">
</table>
</body>
<script type="text/javascript">
    $(function(){
        $("#t").datagrid({
            columns:[[
                {
                    title:'编号',
                    field:'id',
                    width:100,
                },{
                    title:'学生姓名',
                    field:'name',
                    width:200,
                },{
                    title:'成绩',
                    field:'score',
                    width:100,
                }
            ]],
            width:400,
            url:'data.json',
            method:'get',
            pagination:true
        })
    })
</script>
</html>

progressbar进度条:

<body>
    <div id="pro">

    </div>
    <p id="p">

    </p>
</body>
<script type="text/javascript">
    $("#pro").progressbar({
        width:400,
        height:60,
        value:0,
        text:'{value}%',
        onChange:function(n,o) {
            $("#p").html('新值：'+n+',值是'+o)
        }
    });
    /*方法设置时需要单独设置*/
    setInterval(function(){
        $("#pro").progressbar('setValue',$("#pro").progressbar('getValue')+1);
    },50);
</script>

动态tree:

<body>
    <ul id="tree">

    </ul>
    <input type="button" id="b" value="刷新"/>
</body>
    <script>
        $("#tree").tree({
            url:'tree.json',
            lines:true,
            dnd:true
        });
        $("#b").click(function(){
            $("#tree").tree('loadData',[{
                "id": 2,
                "text": "Node 2",
                "state": "closed"}]
            );
        })
    </script>

layout:

<body class="easyui-layout">
<div style="background-image: url(../images/timg.jpg); height: 200px; width: 1620px; background-size: 200 1620;">

</div>
<div data-options="region:'north',title:'North Title',split:true" style="height:200px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:200px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>
<script type="text/javascript">
    $(function(){
        var west=$("body").layout('panel','west');
        var content=$('<div id="lanmn"></div>');
        content.tree({
            url:'../tree/tree.json',
            method:'get'
        })
        west.panel({
            content:content
        })
        var north=$("body").layout('panel','north');
        north.panel({
            content:'<div style="background-image: url(../images/timg.jpg);  background-size: 200 1620;height: 140px; width: 1260px;"></div>'
        })
    })
</script>

pagination分页控件:

<body>
    <!--使用html实现-->
    <!--data-options：用于设置属性-->
    <!--<div class="easyui-pagination" data-options="total:200,pageSize:10" style="background-color: grey">-->
    <!---->
    <div id="page">
    </div>
    </div>
</body>
<script type="text/javascript">
    $("#page").pagination()({
        total:100,
        pageSize:5,
        pageList:[5,10,15,20,25]
    });
</script>

四. jQuery EasyUI 菜单与按钮 - 创建简单的菜单

菜单Menu定义在一些 DIV 标记中，如下：

<div id="mm" class="easyui-menu" style="width:120px;">
        <div onclick="javascript:alert('new')">New</div>
        <div>
            <span>Open</span>
            <div style="width:150px;">
                <div><b>Word</b></div>
                <div>Excel</div>
                <div>PowerPoint</div>
            </div>
        </div>
        <div icon="icon-save">Save</div>
        <div class="menu-sep"></div>
        <div>Exit</div>
    </div>

当菜单创建之后是不显示的，调用 show 方法显示它或者调用 hide方法隐藏：

 $('#mm').menu('show', {
      left: 200,
      top: 100
    });