Layui-经典模块化前端框架

Layui

1. Layui简介
- 1.1 下载
- 1.2 入门
2. 栅格布局
3. 图标
4. 按钮
- 4.1 主题
- 4.2 尺寸
- 4.3 圆角
- 4.4 图标按钮
- 4.5 按钮组
5. 后台布局
6. 数据表格
7. 弹出层
8. 表单
9. 新增
10. 删除跟修改功能

1. Layui简介

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

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

2. 栅格布局

如你所愿，在 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">
</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（桌面大型屏幕），以呈现更加动态灵活的布局。

3. 图标

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>

4. 按钮

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

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.bailiban.com" 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>

5. 后台布局

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">
</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="">控制台</a></li><li class="layui-nav-item"><a href="">商品管理</a></li><li class="layui-nav-item"><a href="">用户</a></li><li class="layui-nav-item"><a href="javascript:;">其它系统</a><dl class="layui-nav-child"><dd><a href="">邮件管理</a></dd><dd><a href="">消息管理</a></dd><dd><a href="">授权管理</a></dd></dl></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">贤心</a><dl class="layui-nav-child"><dd><a href="">基本资料</a></dd><dd><a href="">安全设置</a></dd></dl></li><li class="layui-nav-item"><a href="">退了</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:;">系统管理</a><dl class="layui-nav-child"><!-- data-url 定义点击后要显示的页面 --><dd><a href="javascript:;" data-url="user.jsp">用户管理</a></dd><dd><a href="javascript:;"  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>

6. 数据表格

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);}}@Overrideprotected 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 ;}@Overrideprotected 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" 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:;" ><button type="button" class="layui-btn  layui-btn-radius layui-btn-xs layui-btn-normal">修改</button></a><a lay-event="del_event" href="javascript:;" ><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//";@Overrideprotected 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是为了设置列高度自适应。

7. 弹出层

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内部动态递增计算的

8. 表单

我们通常会在最常用的模块上耗费更多的精力，用尽可能简单的方式诠释 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" 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或者falseconsole.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。

9. 新增

打开新增页面

<div><button  class="layui-btn" id="add_btn">新增</button></div>
<script>$("#add_btn").on("click",function () {layer.msg(" add ") ;layer.open({type:2,title:"用户新增",area: ['700px', '600px'],maxmin:true,shadeClose :false,content:'add.jsp'});});
</script>

显示新增页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>layui</title><link rel="stylesheet" href="static/layui/css/layui.css">
</head>
<body><form  class="layui-form"><div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-block"><input type="text" name="userName" placeholder="请输入用户名" autocomplete="off" class="layui-input" ></div></div><div class="layui-form-item"><label class="layui-form-label">密码</label><div class="layui-input-block"><input type="text" name="userPwd" placeholder="请输入用户密码" autocomplete="off" class="layui-input" ></div></div><input id="img" type="hidden" name="imgName"   /><div class="layui-upload"><button type="button" class="layui-btn" id="test1">上传图片</button><div class="layui-upload-list"><img class="layui-upload-img" id="demo1"></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="static/layui/layui.js"></script><script>layui.use(['form','upload'], function(){var upload = layui.upload;var form = layui.form;var $ = layui.$;//图片上传var uploadInst = upload.render({elem: '#test1' //绑定元素,url: 'UploadServlet' //上传接口,before: function(obj){//预读本地文件示例obj.preview(function(index, file, result){$('#demo1').attr('src', result); //图片链接});},done: function(res){//res 获取返回的json结果$('#img').val(res.data.imgName);}                });form.on('submit(*)', function(data){//1,数据提交到后台，2，关闭当前页面，3刷新父页面的table$.post("InsertServlet",data.field,function () {// 提交后刷新父页面的表格，demo为父表格的idparent.layui.table.reload('demo');// 通过父页面关闭当前页面var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引parent.layer.close(index);return true ;// 返回true表示提交数据，返回false表示不提交});});});</script>
</body>
</html>

处理新增请求的InsertServlet

@WebServlet("/InsertServlet")
public class InsertSerlvet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String userName = req.getParameter("userName");String userPwd = req.getParameter("userPwd");String imgName = req.getParameter("imgName");User u = new User(""+(new Random().nextInt() + 100),userName,userPwd,imgName);UserData.userList.add(u);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}

10. 删除跟修改功能

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

上面已经把修改跟删除的界面显示定义出来，我们这里只需要通过table.on将点击事件进行绑定即可。

table.on('tool(demo)', function(obj){var layEvent = obj.event; //获得 lay-event 对应的值var data = obj.data; //获得当前行数据var userName = data.name;// 表单中的name字段var userId = data.id;// 表单中的id字段var $ = layui.$ ;if(layEvent === 'del_event'){layer.confirm("你确定真的要删除"+userName+"的数据吗?",{icon: 2},function(index){// 异步请求去后台删除数据$.post("DeleteServlet",{"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:'UpdatePageServlet?user_id='+userId});}         });

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

删除的后台功能

@WebServlet("/DeleteServlet")
public class DeleteServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("utf-8");String deleteId = req.getParameter("deleteId");for(int i = 0; i< UserData.userList.size(); i++){String id =  UserData.userList.get(i).getId() ;if(id.equals(deleteId)){UserData.userList.remove(i);break;}}resp.setContentType("text/json;charset=utf-8");resp.getWriter().write("{\"flag\":true}");}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}

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

@WebServlet("/UpdatePageServlet")
public class UpdatePageServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("utf-8");String userId = req.getParameter("userId");for(int i = 0; i< UserData.userList.size(); i++){String id = UserData.userList.get(i).getId() ;if(id.equals(userId)){req.setAttribute("updateUser", UserData.userList.get(i));break;}}req.getRequestDispatcher("update.jsp").forward(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}

然后才能打开修改页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>layui</title><link rel="stylesheet" href="static/layui/css/layui.css"><style>#demo1{width: 300px;}</style>
</head>
<body><form  class="layui-form"><input type="hidden" name="userId" value="${updateUser.id}" /><div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-block"><input type="text" name="userName" value="${updateUser.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"><input type="text" name="userPwd" value="${updateUser.password}" placeholder="请输入用户密码" autocomplete="off" class="layui-input" ></div></div><input id="img" type="hidden" name="imgName" value="${updateUser.img}"  /><div class="layui-upload"><button type="button" class="layui-btn" id="test1">上传图片</button><div class="layui-upload-list"><img class="layui-upload-img" id="demo1" src="ImageServlet?imageName=${updateUser.img}"></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><script src="static/layui/layui.js"></script><script>layui.use(['form','upload'], function(){var upload = layui.upload;var form = layui.form;var $ = layui.$;//执行实例var uploadInst = upload.render({elem: '#test1' //绑定元素,url: 'UploadServlet' //上传接口,before: function(obj){//预读本地文件示例obj.preview(function(index, file, result){$('#demo1').attr('src', result); //图片链接（base64）});},done: function(res){$('#img').val(res.data.imgName);},error: function(){}});form.on('submit(*)', function(data){//1,数据提交到后台，2，关闭当前页面，3刷新父页面的table$.post("UpdateServlet",data.field,function () {// 提交后刷新父页面的表格，demo为父表格的idparent.layui.table.reload('demo');// 通过父页面关闭当前页面var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引parent.layer.close(index);});// 通过父页面关闭当前页面var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引parent.layer.close(index);// 提交后刷新父页面的表格，demo为父表格的idparent.layui.table.reload('demo');return true ;// 返回true表示提交数据，返回false表示不提交});});</script>
</form>
</body>
</html>

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

@WebServlet("/UpdateServlet")
public class UpdateServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("utf-8");String userId = req.getParameter("userId");String userName = req.getParameter("userName");String userPwd = req.getParameter("userPwd");String imgName = req.getParameter("imgName");for(int i = 0; i< UserData.userList.size(); i++){String id = UserData.userList.get(i).getId() ;if(id.equals(userId)){UserData.userList.get(i).setName(userName);UserData.userList.get(i).setPassword(userPwd);UserData.userList.get(i).setImg(imgName);break;}}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}