LayUI

一、LayUI简介
- 1.1 下载
- 1.2 入门
二、栅格布局
三、图标
四、按钮
- 4.1 主题
- 4.2 尺寸
- 4.3 圆角
- 4.4 图标按钮
- 4.5 按钮组
五、后台布局
六、数据表格
七、弹出层
八、表单
九、删除跟修改功能

一、LayUI简介

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

小饶学编程之JAVA EE第三部分——前端框架：1LayUI一、LayUI简介二、栅格布局三、图标四、按钮五、后台布局六、数据表格七、弹出层八、表单九、删除跟修改功能

1.1 下载

官网：https://www.layui.com/

下载后的目录结构如下：

├─css //css目录
  │  │─modules //模块css目录
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件

1.2 入门

<%@ 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">
<title>layui-demo</title>
    <!-- 引入layui的样式 -->
<link rel="stylesheet" href="layui/css/layui.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
</head>
<body>

<!-- 使用layUI的按钮样式-->
<button type="button" class="layui-btn">一个标准的按钮</button>

<script src="layui/layui.js"></script>
<script>
	/* 使用layUI的弹出层模块  */
	layui.use(['layer'], function(){
	  var layer = layui.layer; 
	  /* 弹出hello world提示 */
	  layer.msg('Hello World');
	});
	
</script> 

</body>
</html>

二、栅格布局

如你所愿，在 layui 2.0 的版本中，我们加入了强劲的栅格系统和后台布局方案，这意味着你终于可以着手采用 layui 排版你的响应式网站和后台系统了。layui 的栅格系统采用业界比较常见的 12 等分规则，内置移动设备、平板、桌面中等和大型屏幕的多终端适配处理，最低能支持到ie8。而你应当更欣喜的是，layui 终于开放了它经典的后台布局方案，快速搭建一个属于你的后台系统将变得十分轻松自如。

<%@ 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">
<title>layui-demo</title>
<link rel="stylesheet" href="layui/css/layui.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
</head>
<body>
<!-- <div class="layui-fluid"> : 铺满   -->
<div class="layui-container">  
  常规布局（以中型屏幕桌面为例）：
  <div class="layui-row">
    <div class="layui-col-md9 layui-col-lg6 layui-bg-blue">
      你的内容 9/12
    </div>
    <div class="layui-col-md3 layui-col-lg6 layui-bg-red">
      你的内容 3/12
    </div>
  </div>
 </div>
</body>
</html>

采用 layui-row 来定义行，如： <div class="layui-row"></div>
列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。

三、图标

layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。

通过对一个内联元素（一般推荐用 i标签）设定 class=“layui-icon”，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标，譬如：

<i class="layui-icon layui-icon-face-smile" ></i>

或者

<i class="layui-icon">&#xe69c;</i>

四、按钮

向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.bailiban.com" target="_blank" rel="external nofollow"  class="layui-btn">一个可跳转的按钮</a>

4.1 主题

<button type="button" class="layui-btn  layui-btn-primary">原始按钮</button>
 <button type="button" class="layui-btn  ">默认按钮</button>
 <button type="button" class="layui-btn  layui-btn-normal">百搭按钮</button>
 <button type="button" class="layui-btn  layui-btn-warm">暖色按钮</button>
 <button type="button" class="layui-btn  layui-btn-danger">警告按钮</button>
 <button type="button" class="layui-btn  layui-btn-disabled">禁用按钮</button>

4.2 尺寸

<button type="button" class="layui-btn  layui-btn-lg">大型按钮</button>
 <button type="button" class="layui-btn  ">默认按钮</button>
 <button type="button" class="layui-btn  layui-btn-sm">小型按钮</button>
 <button type="button" class="layui-btn  layui-btn-xs">迷你按钮</button>
<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

4.3 圆角

<button type="button" class="layui-btn  layui-btn-radius layui-btn-primary">原始按钮</button>
 <button type="button" class="layui-btn  layui-btn-radius ">默认按钮</button>
 <button type="button" class="layui-btn  layui-btn-radius layui-btn-normal">百搭按钮</button>
 <button type="button" class="layui-btn  layui-btn-radius layui-btn-warm">暖色按钮</button>
 <button type="button" class="layui-btn  layui-btn-radius layui-btn-danger">警告按钮</button>
 <button type="button" class="layui-btn  layui-btn-radius layui-btn-disabled">禁用按钮</button>

4.4 图标按钮

<button type="button" class="layui-btn">
  <i class="layui-icon">&#xe608;</i> 添加
</button>
 
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
  <i class="layui-icon">&#xe605;</i>
</button>

图标字体参考图标列表。

4.5 按钮组

<div class="layui-btn-group">
  <button type="button" class="layui-btn">增加</button>
  <button type="button" class="layui-btn">编辑</button>
  <button type="button" class="layui-btn">删除</button>
</div>
      
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe602;</i>
  </button>
</div>
 
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
</div>

五、后台布局

layui 之所以赢得如此多人的青睐，更多是在于它前后台系统通吃的能力。既可编织出绚丽的前台页面，又可满足繁杂的后台功能需求。layui 致力于让每一位开发者都能轻松搭建自己的后台。下面是 layui 提供的一个现场的方案。

<%@ 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">
<title>layui-demo</title>
<link rel="stylesheet" href="layui/css/layui.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >控制台</a></li>
      <li class="layui-nav-item"><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >商品管理</a></li>
      <li class="layui-nav-item"><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >用户</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >其它系统</a>
        <dl class="layui-nav-child">
          <dd><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >邮件管理</a></dd>
          <dd><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >消息管理</a></dd>
          <dd><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >授权管理</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          贤心
        </a>
        <dl class="layui-nav-child">
          <dd><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >基本资料</a></dd>
          <dd><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >退了</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >系统管理</a>
          <dl class="layui-nav-child">
          <!-- data-url 定义点击后要显示的页面 -->
            <dd><a href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-url="user.jsp">用户管理</a></dd>
            <dd><a href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"   data-url="good.jsp">商品管理</a></dd>
          </dl>
        </li>
         
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;" class="pagenav">内容主体区域</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>
<script src="layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
   /* 使用layui内置的jquery */
  var $=layui.$;
   /* 给菜单添加点击事件 */
  $('dl.layui-nav-child>dd').click(function (){
	  /* 获取点击后的跳转页面url */
	  var url = $(this).find("a").attr("data-url");
	  /* 将URL部分内容显示在主体区域  */
	  $('.pagenav').load(url);
  })
  
});
</script>
</body>
</html>

六、数据表格

table 模块是layui的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。尽管如此，我们仍将对其进行完善，在控制代码量和性能的前提下，不定期增加更多人性化功能。table 模块也将是 layui 重点维护的项目之一。

这里的数据表格的演示我们采用前台跟后台交互的方式，故我们先准备后台的表格数据。

数据准备

我们在后台封装100条用户数据，由于前端接收数据的时候接收的是json格式字符串，所以后台在传递数据时候需要进行数据处理。

public class UserData {
	
//	用户数据的集合
	public static List<User> userList = new ArrayList<User>();

}

public class User {

    private String id ;

    private String name ;

    private String password ;
    
    private String userImg ;
 
    // setter and getter
}

@WebServlet("/TableDataServlet")
public class TableDataServlet extends HttpServlet {
	
 
	
//	构造方法中创建100条用户数据
	public TableDataServlet() {
		for(int i=1;i<=100;i++){
			User u = new User(i,"seven"+i,"123456","1.png");
			UserData.userList.add(u);
		}
	}
	
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
//		获取前端传递需要的页号跟每页显示数量
		String pageNum = req.getParameter("page");
		String limit = req.getParameter("limit");
		
//		获取当页数量的集合
		List<User> pageList = getPageList(Integer.parseInt(pageNum),Integer.parseInt(limit));
		
		resp.setContentType("text/json;charset=utf-8");
		
//		将数据封装成前端需要的格式
		JSONObject data = new JSONObject();
		data.put("code", 0);
		data.put("msg", "no data."); // 无数据显示的内容
		data.put("count", userList.size());
		JSONArray array= JSONArray.parseArray(JSON.toJSONString(pageList));
		data.put("data", array);
		
		resp.getWriter().write(data.toString());
	}
	
//	获取当页数量的集合
	public List<User> getPageList(int pageNo ,int pageLimit){
		List<User> list = new ArrayList<>();
		int maxSize = UserData.userList.size()> pageNo*pageLimit? 			pageNo*pageLimit:UserData.userList.size() ;
		for(int i=(pageNo-1)*pageLimit;i<maxSize;i++){
			list.add(UserData.userList.get(i));
		}
		return list ;
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doGet(req, resp);
	}

}

参数的 page 表示页码。
参数 limit 表示每页显示的数量。

前台页面

user.jsp

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>用户列表</title>
  <link rel="stylesheet" href="layui/css/layui.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  media="all">
  <style>
  /* 设置表格行高自适应   */
  .layui-table-cell {
            height: auto !important;
        }
        </style>
</head>


<body>
	<div><button type="button" class="layui-btn" id="add_btn">新增</button></div>	
	
	<table id="demo" lay-filter="demo"  ></table>
	 
<script>
layui.use('table',function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'  //指定原始 table 容器的选择器或 DOM，方法渲染方式必填 
    ,toolbar:true // 是否显示工具条
    ,url: 'TableDataServlet' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头，里面的name必须保证返回的json数组的bean的属性名为name，titile为页面表头显示的字段名
      {field: 'id', title: 'ID', width:'20%',sort:true}
      ,{field: 'name', title: '姓名', width: '20%',sort:true}
      ,{field: 'password', title: '密码', width:'20%'}
      ,{field: 'userImg', title: '密码',templet : '#proImg'} 
      ,{fixed: 'right',title : '操作',align:'center', toolbar: '#opt'}
    ]]
  });
  
});
</script>

<script id="opt" type="text/html">
		<a lay-event="update_event" href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  ><button type="button" class="layui-btn  layui-btn-radius layui-btn-xs layui-btn-normal">修改</button></a>
		<a lay-event="del_event" href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  ><button type="button" class="layui-btn  layui-btn-radius layui-btn-xs layui-btn-normal">删除</button></a>
</script>
    
<!-- 下面是图片单元格要放入的内容，跟上面的templet对应 -->
<script id="proImg" type="text/html">
	<img src="ImageServlet?imgName={{d.user_img}}"  />
</script>

</body>
</html>

@WebServlet("/ImageServlet")
public class ImageServlet extends HttpServlet{
	
//	假设图片都是存在这个路径下
	private static String path = "D://upload//";

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
//		获取传递过来的文件名
		String imgName = req.getParameter("imgName");
//		取path路径下找到这个文件，作为流数据读取踹，然后通过OutputStream写到客户端
//		如果看不懂这段代码，把当时课堂上讲的图片上传视频再重复看下
		FileInputStream inputStream = new FileInputStream(path+imgName);
		int i = inputStream.available();
		byte[] buff = new byte[i];
		inputStream.read(buff);
		inputStream.close();
		resp.setContentType("image/*");
		OutputStream out = resp.getOutputStream();
		out.write(buff);
		out.close();
	}
	
	
}

最后一列加上了操作列，为后续功能做准备。
由于 user.jsp 是内嵌在导航页面中，所以 user.jsp 不需要再次引入layui的css跟js。
sort:true 表示是否给列加上排序功能。
templet 是为了设置自定义列内容跟结构。
.layui-table-cell 是为了设置列高度自适应。

七、弹出层

layer 至今仍作为 layui 的代表作，她的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在 Web 开发者的圈子里口口相传，乃至于成为今天的 layui 最强劲的源动力。目前，layer已成为国内最多人使用的 Web 弹层组件，GitHub) 自然Stars5000+，官网累计下载量达50w+，大概有30万不同规模的 Web 平台使用过 layer。

之所以列举上面这些数字，并非是在夸夸其谈，而是懂 layer 的人都知道，这是一种怎样不易的沉淀。而由于 layer 在 layui 体系中的位置比较特殊，甚至让很多人都误以为 layui = layer ui，所以再次强调 layer 只是作为 layui 的一个弹层模块，由于其用户基数较大，所以至今仍把她作为独立组件来维护。

layer作为独立组件使用，你可以去layer独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。且jquery的引入位置必须放到layer引入之前，否则无效。

layer的独立版本：https://layer.layui.com/

使用方式

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="layer/layer.js"></script>

<script type="text/javascript">
	layer.msg('hello');
</script>

layer作为 layui 模块化使用，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js。

使用方式

<script>
    layui.use('layer', function(){
      var layer = layui.layer;

      layer.msg('hello');
    });    
</script>

type

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。若你采用*layer.open({type: 1})*方式调用，则type为必填项（信息框除外）
title

title支持三种类型的值，若你传入的是普通的字符串，如title :‘我是标题’，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: [‘文本’, ‘font-size:18px;’]，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
content

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。
area

在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: ‘500px’，高度仍然是自适应的。当你宽高都要定义时，你可以area: [‘500px’, ‘300px’]
btn

信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以btn: ‘我知道了’，当你要定义两个按钮时，你可以btn: [‘yes’, ‘no’]。当然，你也可以定义更多按钮，比如：btn: [‘按钮1’, ‘按钮2’, ‘按钮3’, …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推。
closeBtn

layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
shade

即弹层外区域。默认是0.3透明度的黑色背景（’#000’）。如果你想定义别的颜色，可以shade: [0.8, ‘#393D49’]；如果你不想显示遮罩，可以shade: 0
shadeClose

如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。
time

默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）
layer.open(options)

基本上是露脸率最高的方法，不管是使用哪种方式创建层，都是走layer.open()，创建任何类型的弹层都会返回一个当前层索引，上述的options即是基础参数
layer.alert(content, options, yes) - 普通信息框

它的弹出似乎显得有些高调，一般用于对用户造成比较强烈的关注，类似系统alert，但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数，可以设定各种你所需要的基础参数，但如果你不需要的话，直接写回调即可。
layer.confirm(content, options, yes, cancel) - 询问框

类似系统confirm，但却远胜confirm，另外它不是和系统的confirm一样阻塞你需要把交互的语句放在回调体中。同样的，它的参数也是自动补齐的。
layer.msg(content, options, end) - 提示框

我们在源码中用了相对较大的篇幅来定制了这个msg，目的是想将其打造成露脸率最高的提示框。而事实上我的确也在大量地使用它。因为它简单，而且足够得自觉，它不仅占据很少的面积，而且默认还会3秒后自动消失所有这一切都决定了我对msg的爱。因此我赋予了它许多可能在外形方面，它坚持简陋的变化，在作用方面，它坚持零用户操作。而且它的参数也是自动补齐的。
layer.load(icon, options) - 加载层

type:3的深度定制。load并不需要你传太多的参数，但如果你不喜欢默认的加载风格，你还有选择空间。icon支持传入0-2如果是0，无需传。另外特别注意一点：load默认是不会自动关闭的，因为你一般会在ajax回调体中关闭它。

layer.close(index) - 关闭特定层

关于它似乎没有太多介绍的必要，唯一让你疑惑的，可能就是这个index了吧。事实上它非常容易得到。

//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭  
//如果你想关闭最新弹出的层，直接获取layer.index即可
  layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的

八、表单

我们通常会在最常用的模块上耗费更多的精力，用尽可能简单的方式诠释 layui 所带来的便捷性。显而易见，form 是我们非常看重的一块。于是它试图用一贯极简的姿态，去捕获你对它的深深青睐。寄托在原始表单元素上的属性设定，及其全自动的初始渲染，和基于事件驱动的接口书写方式，会让你觉得，传统模式下的组件调用形式，也可以是那样的优雅、简单。然而文字的陈述始终是苍白的，所以用行动慢慢感受 layui.form 给你的项目带来的效率提升吧。

元素组件

layui 针对各种表单元素做了较为全面的UI支持，你无需去书写那些 UI 结构，你只需要写 HTML 原始的 input、select、textarea 这些基本的标签即可。我们在 UI 上的渲染只要求一点，你必须给表单体系所在的父元素加上*class="layui-form"*，一切的工作都会在你加载完form模块后，自动完成。如下是一个最基本的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui.form小例子</title>
<link rel="stylesheet" href="layui.css" target="_blank" rel="external nofollow"  media="all">
</head>
<body>
<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">下拉选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value="0">写作</option>
        <option value="1">阅读</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关关</label>
    <div class="layui-input-block">
      <input type="checkbox" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关开</label>
    <div class="layui-input-block">
      <input type="checkbox" checked lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="0" title="男">
      <input type="radio" name="sex" value="1" title="女" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">请填写描述</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<script src="layui.js"></script>
<script>
layui.use('form', function(){
  var form = layui.form;
  //各种基于事件的操作，下面会有进一步介绍
});
</script>
</body>
</html>

事件监听

语法：form.on('event(过滤器值)', callback);

event	描述
select	监听select下拉选择事件
checkbox	监听checkbox复选框勾选事件
switch	监听checkbox复选框开关事件
radio	监听radio单选框事件
submit	监听表单提交事件

监听select

form.on('select(test)', function(data){
  console.log(data);
});

监听checkbox复选

form.on('checkbox(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM对象
  console.log(data.elem.checked); //是否被选中，true或者false
  console.log(data.value); //复选框value值，也可以通过data.elem.value得到
  console.log(data.othis); //得到美化后的DOM对象
});

监听submit提交

按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员：

form.on('submit(*)', function(data){
  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

再次温馨提示：上述的*submit(*)*中的 *** 号为事件过滤器的值，是在你绑定执行提交的元素时设定的，如：

<button lay-submit lay-filter="*">提交</button>

你可以把*号换成任意的值，如：lay-filter=“go”，但监听事件时也要改成 form.on(‘submit(go)’, callback);

表单赋值 / 取值

语法：form.val(‘filter’, object);

用于给指定表单集合的元素赋值和取值。如果 object 参数存在，则为赋值；如果 object 参数不存在，则为取值。

//给表单赋值
form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
  "username": "贤心" // "name": "value"
  ,"sex": "女"
  ,"auth": 3
  ,"check[write]": true
  ,"open": false
  ,"desc": "我爱layui"
});

//获取表单区域所有值
var data1 = form.val("formTest");

第二个参数中的键值是表单元素对应的 name 和 value。

应用：新增用户(基于之前的后台布局)

<script>
layui.use('form', function(){
  var form = layui.form;
  var layer = layui.layer;
  var $ = layui.$ ;
   // 监听表单提交事件
  form.on('submit(*)',function(data){
	  // post方式提交表单
	  $.post('UserAddServlet',data.field,function(e){
		  // 提交后刷新父页面的表格，demo为父表格的id
		  parent.layui.table.reload('demo');
		  // 通过父页面关闭当前页面
		  var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
		  parent.layer.close(index);
	  });  

  });  
});
</script>

@WebServlet("/UserAddServlet")
public class UserAddServlet  extends HttpServlet {
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		
		String userName = req.getParameter("user_name");
		User u = new User(userName,"123456",100);
		UserData.userList.add(u);
		
	}

}

九、删除跟修改功能

上面基于后台布局的demo有了表格列表数据的显示功能，还有了添加功能，现将删除跟修改功能也补全完整。

上面已经把修改跟删除的界面显示定义出来，我们这里只需要通过

table.on

将点击事件进行绑定即可。

table.on('tool(demo)', function(obj){
	 var data = obj.data; //获得当前行数据
	 var layEvent = obj.event; //获得 lay-event 对应的值 
	 var userName = data.name;// 表单中的name字段
	 var userId = data.id;// 表单中的id字段
	 var $ = layui.$ ;
	 
	 if(layEvent === 'del_event'){
		 
		 layer.confirm("你确定真的要删除"+userName+"的数据吗?",{icon: 2},function(index){
			 // 异步请求去后台删除数据
			$.post("UserDeleteServlet",{"user_id":userId},function(data){
				// 删除成功给出提示
				if(data.flag){
					// 操作成功的提示
					layer.msg("删除成功！",{icon:1});
					// 关闭最新的层
					layer.close(layer.index);
					// 刷新id为demo的table数据
					layui.table.reload("demo");
				}
			});
		 });
		 
	 }else if(layEvent === 'update_event'){// 修改操作
		 // 打开修改页面
		 layer.open({
			  type:2,
			  title:"用户修改",
			  area: ['700px', '600px'],
			  maxmin:true,
			  shadeClose :false,
			  // 修改页面需要先访问Servlet获取修改的用户信息
			  content:'UserUpdatePageServlet?user_id='+userId
		  });
	 }	 	 
  });

table.on('tool(demo)' 中的demo是去找 lay-filter="demo" 的table。

删除的后台功能

@WebServlet("/UserDeleteServlet")
public class UserDeleteServlet extends HttpServlet{

	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String userId = req.getParameter("user_id");
		
		for(int i=0;i<UserData.userList.size();i++){
			Integer id = UserData.userList.get(i).getId() ;
			if(id.equals(Integer.parseInt(userId))){
				UserData.userList.remove(i);
				break;
			}
		}
		resp.setContentType("text/json;charset=utf-8");
		resp.getWriter().write("{\"flag\":true}"); 
			
	}
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(req, resp);
	}
	
}

进入修改页面时需要先到后台获取要修改的用户信息

@WebServlet("/UserUpdatePageServlet")
public class UserUpdatePageServlet extends HttpServlet {
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String userId = req.getParameter("user_id");
		for(int i=0;i<UserData.userList.size();i++){
			Integer id = UserData.userList.get(i).getId() ;
			if(id.equals(Integer.parseInt(userId))){
				req.setAttribute("updateUser", UserData.userList.get(i)); 
				break;
			}
		}
		
		req.getRequestDispatcher("user_update.jsp").forward(req, resp);
		
	}

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req,resp);
	}
}

然后才能打开修改页面

<%@ 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">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  media="all">
</head>
<body>

<form  class="layui-form" lay-filter="layui-form"> 
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <input type="text" name="user_name" value="${updateUser.name}" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <input type="hidden" name="user_id" value="${updateUser.id }">
   
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div> 
</form>
<script src="layui/layui.js"></script>
<script>
layui.use('form', function(){
  var form = layui.form;
  var layer = layui.layer;
  var $ = layui.$ ;
 
   // 监听表单提交事件
  form.on('submit(*)',function(data){
	  // post方式提交表单
	  $.post('UserUpdateServlet',data.field,function(data){
		  // 提交后刷新父页面的表格，demo为父表格的id
		  parent.layui.table.reload('demo');
		  // 通过父页面关闭当前页面
		  var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
		  parent.layer.close(index);
	  });
	  

  });
  
});
</script>

</body>
</html>

修改操作要提交到后台完成

@WebServlet("/UserUpdateServlet")
public class UserUpdateServlet extends HttpServlet{
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String userName = req.getParameter("user_name");
		String userId = req.getParameter("user_id");
		for(int i=0;i<UserData.userList.size();i++){
			Integer id = UserData.userList.get(i).getId() ;
			if(id.equals(Integer.parseInt(userId))){
				UserData.userList.get(i).setName(userName);; 
				break;
			}
		}
		
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doGet(req, resp);
	}

}

到这里，基于layui的后台增删改差功能就全部完成了。

小饶学编程之JAVA EE第三部分——前端框架：1LayUI一、LayUI简介二、栅格布局三、图标四、按钮五、后台布局六、数据表格七、弹出层八、表单九、删除跟修改功能

LayUI

一、LayUI简介

1.1 下载

1.2 入门

二、栅格布局

三、图标

四、按钮

4.1 主题

4.2 尺寸

4.3 圆角

4.4 图标按钮

4.5 按钮组

五、后台布局

六、数据表格

七、弹出层

八、表单

九、删除跟修改功能

继续阅读

关于Gradle配置的小结

Java小案例——随机数猜测随机数猜测

nginx location中斜线的位置的重要性

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的简单使用

neo4j之cypher使用文档

GitHub连夜封杀！这份阿里 10W 字内部 Java 字面试手册到底有多强？

spark/scala关于【资源文件】加载方法概述外部文件加载方案测试资源文件打包入jar包中小结

mybatis_入门程序Mybatis入门

AOP编程_Android优雅权限框架(1)概念基础，2021金三银四前言正文大纲正文

Effective Java 8:通用程序设计

OOM三种类型

工厂模式-三种类型

【递归】高效率求2的n次幂

win10本地scala和spark安装安装scala安装spark

scala (3) Function 和 Method

小饶学编程之JAVA EE第三部分——前端框架：1LayUI一、LayUI简介二、 栅格布局三、 图标四、按钮五、后台布局六、 数据表格七、弹出层八、 表单九、 删除跟修改功能

LayUI

一、LayUI简介

1.1 下载

1.2 入门

二、 栅格布局

三、 图标

四、按钮

4.1 主题

4.2 尺寸

4.3 圆角

4.4 图标按钮

4.5 按钮组

五、后台布局

六、 数据表格

七、弹出层

八、 表单

九、 删除跟修改功能

继续阅读

小饶学编程之JAVA EE第三部分——前端框架：1LayUI一、LayUI简介二、栅格布局三、图标四、按钮五、后台布局六、数据表格七、弹出层八、表单九、删除跟修改功能

二、栅格布局

三、图标

六、数据表格

八、表单

九、删除跟修改功能