Layui
layui是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，基本都是套用内容。但是想用它，必须要按照他的规矩来，毕竟拿人的手短。
预先加载模块
layui 通过 use 方法加载模块。当你的 JS 需要用到 layui 模块的时候，且避免到处写 layui.use() 的麻烦。你应该在最外层如此定义：
layui.use(['form', 'upload'], function(){
//如果只加载一个模块，可以不填数组。如：layui.use('form')
var form = layui.form //获取form模块
var upload = layui.upload; //获取upload模块
//监听提交按钮
form.on('submit(test)', function(data){
console.log(data);
});
});
获取模块的命名规则
layui.use(['form', 'upload'], function(){
var a=layui.a;
})
交互数据格式
layui有自己的一套特定的数据格式交互，而且必须有值
默认的数据格式
| 字段 | 说明 | 值 |
|---|---|---|
| code | 状态码(成功 0，失败其他) | int |
| msg | 错误提示 | string |
| count | 总数 | int |
| data | 实体对象的集合 | object[] |
也就是说你从后台返回的值必须是下面这个样子的
{
"code": 0,
"msg": "",
"count": 1000,
"data": [{
}, {
}]
}
其他情况
如果你的字段名称不同于默认的字段，需要借助parseData将其解析成table所规定的数据格式
{
"status": 0,
"message": "",
"total": 180,
"data": {
"item": [{
}, {
}]
}
}
//如果你的字段名称和默认字段不一样，你需要进行以下操作
table.render({
elem: '#demp'
,url: ''
,parseData: function(res){
//res 即为原始返回的数据
return {
"code": res.status, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.total, //解析数据长度
"data": res.data.item //解析数据列表
};
}
});
拼接
在使用Layui对表格进行渲染的过程中，你可能会遇到多个字段放在同一栏的情况，这时候就需要使用拼接，这里直接使用代码演示。
//多个字段拼接
{
field:'area',title:'房屋名称', width:200,
templet:function (d) {
//templet可以进行方法的编写
return d.area + '-' + d.ased + '-' + d.aasd;
// return d.area+"我是啦啦啦"; //拼接字符
}
}
模板templet
layui中有很多模板，但是这些模板并不能完全满足于我们的需求，就比如我们想要展示一些数据，但是这些数据不是我们想要的数据或者不是我们想要的样子，我们就可以通过templet在前台进行更改。
就比如我们从后台传输过来的日期格式是String，但这个String中存储的却是时间戳。
//时间戳：1635264000 时间：2021-10-27
//这就是在表格中将时间戳1635264000转化为了2021-10-27
templet: "<div>{
{layui.util.toDateString(1635264000,'yyyy-MM-dd')}}</div>"
//在正式使用中，你可以将1635264000换成你的字段名，这样的话可以将你的字段的值自动转化
//这里我就是将我的ctime转换成了日期格式
field:'ctime', title:'签署时间', width:200,
templet: "<div>{
{layui.util.toDateString(d.ctime,'yyyy-MM-dd')}}</div>"
弹窗
基础语法
layui.use('layer',function(){
var layui = layui.layer;
layer,msg('HELLO WORLD');
})
弹窗嵌套
这里说下type的意思 他代表着你弹出层的类型 共5个数字
- 0是默认 一般是信息
- 1是页面层 一般弹出写好的html代码
- 2是iframe层 这里内容是一个地址 ，引入别的页面 注意:这里的地址是controller的地址
- 3是加载层 一般是加载动画
- 4是tips层 一般是弹出提示
//使用方式
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'det'){
open("详情页面",'/static/view/contract/details.html?cid='+data.cid);
} else if(obj.event === 'upd'){
open("修改页面","/static/view/contract/update.html?cid="+data.cid);
}
});
function open (title,url) {
layer.open({
type: 2, // 2 - url
content: url, // 弹出层的 url []不出现滚动,'no'
area: ["400px", "530px"], // 大小
title: title, // 定义弹出层名称
fixed: false, // 鼠标滚动时，层是否固定在可视区域
//maxmin: true, // 最大小化按钮
shadeClose: true, //是否点击遮罩关闭
cancel: function () { //请求回调，右上角关闭执行return false开启该代码可禁止点击该按钮关闭
}, success: function (layero, index) { //请求回调，打开窗口时执行
}, end: function () { //请求回调，窗口销毁时执行
location.reload(); //窗口销毁时刷新主页面数据
}
})
}
表格
<table class="layui-hide" id="test" lay-filter="test"></table>
layui.use('table', function(){
var table = layui.table;
var $=layui.$;
table.render({
elem: '#test'
,url:'/ContractServlet?method=queryAll'
,method: 'post'
,page: true //开启分页
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
,id:'testReload'
,title: '用户数据表'
,cols: [[
{
type: 'checkbox', fixed: 'left'}
,{
field:'cid', title:'ID', width:80, unresize: true, sort: true}
,{
field:'harea',title:'房屋名称', width:200}
,{
field:'lname', title:'租户名称', width:200} //edit: 'text' 开启页面修改
,{
field:'crental', title:'总金额', width:100}
,{
field:'ccash', title:'押金', width:100}
,{
field:'cname', title:'签署人', width:200}
,{
field:'ctime', title:'签署时间', width:200,
templet: "<div>{
{layui.util.toDateString(d.ctime,'yyyy-MM-dd')}}</div>"
}
,{
fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
]]
, parseData: function (rs) {
//数据格式解析
console.log(rs);
if (rs.code == 0) {
return {
"code": rs.code,
"msg": rs.msg,
"count": rs.data.totalCount,
"data": rs.data
}
}
}
});
})
表单
<form class="layui-form" action="">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" 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="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读" checked>
<input type="checkbox" name="like[dai]" title="发呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script>
//Demo
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
日期
在项目中，会用到时间格式，选择对应的时间
比如：合同签署时间
<input type="text" class="layui-input" id="test1">
在layui里，已经封装了一个时间框，用法如下：
laydate.render({
elem: '#test1' //指定元素
type：'year' //年选择器
});
elem
必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象
type
| type可选值 | 名称 | 用途 |
|---|---|---|
| year | 年选择器 | 只提供年列表选择 |
| month | 年月选择器 | 只提供年、月选择 |
| date | 日期选择器 | 可选择：年、月、日。type默认值，一般可不填 |
| time | 时间选择器 | 只提供时、分、秒选择 |
| datetime | 日期时间选择器 | 可选择：年、月、日、时、分、秒 |
表单效验(lay-verify)
Layui自带表单效验功能，可以验证输入信息的问题
layui表单元素效验需要在元素上加入lay-verify 如：
<input type="text" name="ctime" id="ctime" lay-verify="required" class="layui-input">
格式
单条默认规则：lay-verify=“验证A”
多条默认规则：lay-verify=“验证A|验证B” (多条使用|来隔开)
默认
目前layui提供了以下规则
| 元素 | 效验的对象 |
|---|---|
| required | 必填项 |
| phone | 手机号 |
| 邮箱 | |
| url | 网址 |
| number | 数字 |
| data | 日期 |
| identity | 身份证 |
自定义
同样的，在layui中支持自定义效验方法
//调用自定义效验form.verify()
form.verify({
//这里的username，pass随便设置了
username: function(value, item){
//value：表单的值、item：表单的DOM对象
if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
return '用户名不能有特殊字符';
}
if(/(^\_)|(\__)|(\_+$)/.test(value)){
return '用户名首尾不能出现下划线\'_\'';
}
if(/^\d+\d+\d$/.test(value)){
return '用户名不能全为数字';
}
}
//我们既支持上述函数式的方式，也支持下述数组的形式
//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
,pass: [
/^[\S]{6,12}$/
,'密码必须6到12位，且不能出现空格'
]
});
//使用自定义效验的方式等同于默认方式
正则表达式
既然上面提到了正则表达式，下面简单提一下正则表达式
普通字符
| 字符 | 描述 |
|---|---|
| [ ] | 匹配[ ]中的所有字符 |
| [^] | 匹配除了[^]中的所有字符 |
| [A-Z] [a-z] [0-9] | 匹配所有大写字母 小写字母 0-9的整数 |
| [\s\S] | 匹配所有 \s是匹配所有空白符 \S是非空白符 |
| [\w] | 匹配字母、数字、下划线 |
限定符
| 字符 | 描述 |
|---|---|
| * | 匹配前面的子表达式零次或多次。例如，zo* 能匹配 “z” 以及 “zoo”。* 等价于{0,}。 |
| + | 匹配前面的子表达式一次或多次。例如，‘zo+’ 能匹配 “zo” 以及 “zoo”，但不能匹配 “z”。+ 等价于 {1,}。 |
| ? | 匹配前面的子表达式零次或一次。例如，“do(es)?” 可以匹配 “do” 、 “does” 中的 “does” 、 “doxy” 中的 “do” 。? 等价于 {0,1}。 |
| {n} | n 是一个非负整数。匹配确定的 n 次。例如，‘o{2}’ 不能匹配 “Bob” 中的 ‘o’，但是能匹配 “food” 中的两个 o。 |
| {n,} | n 是一个非负整数。至少匹配n 次。例如，‘o{2,}’ 不能匹配 “Bob” 中的 ‘o’，但能匹配 “foooood” 中的所有 o。‘o{1,}’ 等价于 ‘o+’。‘o{0,}’ 则等价于 ‘o*’。 |
| {n,m} | m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，“o{1,3}” 将匹配 “fooooood” 中的前三个 o。‘o{0,1}’ 等价于 ‘o?’。请注意在逗号和两个数之间不能有空格。 |
特殊字符
| 特别字符 | 描述 |
|---|---|
| $ | 匹配输入字符串的结尾位置。如果设置了 RegExp 对象的 Multiline 属性，则 $ 也匹配 ‘\n’ 或 ‘\r’。要匹配 $ 字符本身，请使用 $。 |
| ( ) | 标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。要匹配这些字符，请使用 ( 和 )。 |
| * | 匹配前面的子表达式零次或多次。要匹配 * 字符，请使用 *。 |
| + | 匹配前面的子表达式一次或多次。要匹配 + 字符，请使用 +。 |
| . | 匹配除换行符 \n 之外的任何单字符。要匹配 . ，请使用 . 。 |
| [ | 标记一个中括号表达式的开始。要匹配 [，请使用 [。 |
| ? | 匹配前面的子表达式零次或一次，或指明一个非贪婪限定符。要匹配 ? 字符，请使用 ?。 |
| \ | 将下一个字符标记为或特殊字符、或原义字符、或向后引用、或八进制转义符。例如， ‘n’ 匹配字符 ‘n’。’\n’ 匹配换行符。序列 ‘\’ 匹配 “”，而 ‘(’ 则匹配 “(”。 |
| ^ | 匹配输入字符串的开始位置，除非在方括号表达式中使用，当该符号在方括号表达式中使用时，表示不接受该方括号表达式中的字符集合。要匹配 ^ 字符本身，请使用 ^。 |
| { | 标记限定符表达式的开始。要匹配 {，请使用 {。 |
| | | 指明两项之间的一个选择。要匹配 |，请使用 |。 |
非打印字符
| 字符 | 描述 |
|---|---|
| \cx | 匹配由x指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 ‘c’ 字符。 |
| \f | 匹配一个换页符。等价于 \x0c 和 \cL。 |
| \n | 匹配一个换行符。等价于 \x0a 和 \cJ。 |
| \r | 匹配一个回车符。等价于 \x0d 和 \cM。 |
| \s | 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。注意 Unicode 正则表达式会匹配全角空格符。 |
| \S | 匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。 |
| \t | 匹配一个制表符。等价于 \x09 和 \cI。 |
| \v | 匹配一个垂直制表符。等价于 \x0b 和 \cK。 |