layui（谐音：类ui) 是一款采用自身模块规范编写的前端 ui 框架，遵循原生 html/css/js 的书写与组织形式，门槛极低，拿来即用。
一、介绍
在使用layui之前，我们先要了解一下layui是什么？
我觉得用作者贤心的一句话来概括就好了：为后端程序员设计的前端框架。更加详细的描述是：这是一个封装了各种css和js、Ajax等等的前端框架，其封装程度之高，有时甚至对程序员来说不大友好。但对于前端技术一般的人来说，layui不失为一个好的工具。
二、开始使用layui
使用方式：下载后导入项目，然后引用即可
<script></script><script></script><link>
先要引用jquery，然后再引用layui.js和layui.css。
为什么一定要本地呢？没有CDN？
上面说了，layui封装得太“好”了，程序员的自主性受到限制，这个时候需要修改layui的源码，比如css的样式——这也是layui的正确用法，而不只是简单地使用。
layui的模块：layui是模块化的，包括form，layer，laydate，laypage等等模块，正是这些模块组成了完整的layui。使用layui的时候，需要指明自己使用的模块。
开始使用layui：
<script>
layui.use(['mod1', 'mod2'],function(args){
var mo1 = layui.mod1
,mo2 = layui.mod2;
});
</script>
三、layui表单
下面以HTML中最常见的form表单来演示layui的使用。
html部分：
javscript部分：
<!-- js for form input and submit -->
<script>
layui.use(['form'], function(){
var form = layui.form;
//自定义验证规则
form.verify({
pass: [/(.+){6,12}$/, '密码必须6到12位']
,repass:function(value){
var pvalue = $("input[name='password']").val();
if(pvalue!=value){
return "两次输入的密码不一致";
}
}
});
//监听提交
form.on('submit(demo1)', function(data){
var agreeChecked = data.field.agree;
if(agreeChecked!="on"){
msg("未同意隐私条款");
return false;//阻止表单提交
}
});
});
</script>
效果图：
四、layui弹出层
下面讲述一下弹出层，弹出可以说是一个很常见的东西了，但基础的HTML/JS只有丑陋的alert("")方法，layui包含了一个叫做layer的弹出层模块。
使用layer的两种方式：
一、像上面使用form模块一样，layui.use声明，然后在use后面的function里使用；
二、导入独立的layer模块文件，然后就可以直接使用；
关于第一种方式不予讨论，这里介绍一下第二种方式。
首先，从layer官网下载layer的文件，解压并放入自己的项目下，然后<script th:src="@{/layer/layer.js}"></script>类似这样的形式引入layer.js文件。
Example：
function msg(msg){
//墨绿深蓝风
layer.alert(msg, {
title:'消息'
,skin: 'layui-layer-molv' //样式类名
,closeBtn: 0
},function(index){
layer.close(index);//关闭
});
}
效果图：
layer不仅仅可以弹出提示框，还可以做到一些有趣且实用的动态效果，甚至可以加载一个弹出的HTML界面出来。
五、layui文件上传
下面介绍一下layui的文件上传，即upload模块
<!-- 上传图片--> <div> <div> <button> <i></i>选择图片 </button> <button>开始上传</button> </div> <div> <label>注意：支持jpg，png和gif格式，文件大小应小于10MB</label> </div> </div>
<!-- 文件上传 -->
<script>
layui.use('upload',function(){
var $ = layui.jquery
,upload = layui.upload;
//选完文件后不自动上传
upload.render({
elem: '#headButton'
,url: getRootPath()+'/user/uploadPicture'
,size: 10*1024 //10*1024KB = 10MB
,accept: 'images'
,acceptMime: 'image/jpg,image/png,image/gif'
,auto: false
,bindAction: '#headAddButton'
,done: function(res){
msg(res.msg);
//刷新头像地址
var resUrl = res.url;
if(resUrl!=""){
document.getElementById("userImg").src=getRootPath()+ resUrl;
}
}
});
});
</script>
后端（java-spring-controller类中）：
@Autowired
FileService fileService;
@RequestMapping(path="/uploadPicture",method= {RequestMethod.POST})
@ResponseBody
public Map<string> uploadFile(@RequestParam("file")MultipartFile file,HttpServletRequest request){
Map<string> map = new HashMap<string>();
String path = fileService.uploadImg(file, "head");//service层保存文件
//返回值，必须按照这样写——要符合upload模块的回调接口才行
map.put("code", 0); //0表示成功
map.put("msg","上传成功");
map.put("data", "");
map.put("url", path);
return map;
} </string></string></string>
upload上传接口和返回值：
//上传接口
upload.render({
elem: '#id'
,url: '/api/upload/' //必填项
,method: '' //可选项。HTTP类型，默认post
,data: {} //可选项。额外的参数，如：{id: 123, abc: 'xxx'}
});
//返回值
{
"code": 0
,"msg": ""
,"data": {
"src": "http://cdn.layui.com/123.jpg"
}
}
效果图：
layui的upload模块能够在前端进行配置文件大小、格式、预览，还可以做到批量上传、重传功能。
六、layui分页
在网站中也经常会用到分页，后端的分页是容易实现的，但对于前端来说就不是那么理想了。layui提供了自己的分页模块——laypage。
<div></div> <div></div>
layui.use(['element','laypage'], function(){
var element = layui.element
,laypage = layui.laypage;
$.ajax({
url:getRootPath()+'/news/count'
,type:'GET'
,async:true //false表示非异步，即同步，即请求处理完毕后才能返回；
,data:{"page":1, "limit":10}
,dataType:'json'
,success:function(alldata){
var numbers = alldata.count;
//总页数大于页码总数
laypage.render({
elem: 'demo'
,count: numbers//数据总数
,first: '首页'
,last: '尾页'
,jump: function(obj){
$.ajax({
url:getRootPath()+'/news/list'
,type:'GET'
,async:true
,data:{"page":obj.curr, "limit":obj.limit}
,dataType:'json'
,success:function(data){
var shtml = getNewsContentHTML(data);//js处理数据并填充div
document.getElementById("allNewsDiv").innerHTML=shtml;
}
});
}
});
}
});
});
如上，分页跳转的事件是在jump中进行的，在里面编写AJAX请求，通过jump的obj参数获得page和limit参数，然后在请求执行完毕并返回数据后进行处理即可。
七、layui数据表格
表格时常见的功能，但js拼接HTML表格算是一件比较繁琐且容易出错的事情。
<!-- team分页table -->
<script>
layui.use('table',function(){
var table = layui.table;//模块声明
table.render({
elem:'#teamTable'
,method:'get'
,url:getRootPath()+'/team/admin/list' //返回一个List<TeamMember>的list
,cellMinWidth:80
,cols:[[
{field:'id', title:'ID', sort:true}
,{field:'name', title:'姓名'}
,{field:'birth', title:'出生日期'} //这里的templet值时模板元素的选择器
,{field:'position', title:'身份'}
,{field:'information', title:'个人信息'}
,{field:'right', title:'操作', toolbar:'#barDemo'}
]]
,page:true //开启分页
});
//监听工具条
table.on('tool(teamTool)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的DOM对象
console.log("id:"+data.id);
if(layEvent === 'detail'){ //查看
//do something
layer.msg('ID：'+ data.id + ' 的查看操
} else if(layEvent === 'del'){ //删除
layer.confirm('确认删除人员信息？', function(index){
//do something
layer.close(index);
});
} else if(layEvent === 'edit'){ //编辑
//do something
}
});
});
</script>
<!-- tools -->
<script>
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除
</script>
效果图：
更多layui知识请关注layui框架。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
