Layui小知识

最新推荐文章于 2022-07-08 11:05:53 发布

Bs21_9_19

最新推荐文章于 2022-07-08 11:05:53 发布

阅读量568

点赞数

文章标签： layui javascript 前端

本文链接：https://blog.csdn.net/Bs21_9_19/article/details/121106428

版权

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	手机号
email	邮箱
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。

Bs21_9_19

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Layui小知识

Layuilayui是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，基本都是套用内容。但是想用它，必须要按照他的规矩来，毕竟拿人的手短。预先加载模块layui 通过 use 方法加载模块。当你的 JS 需要用到 layui 模块的时候，且避免到处写 layui.use() 的麻烦。你应该在最外层如此定义：layui.use(['form', 'upload'], function(){ //如果只加载一个模块，...
复制链接

扫一扫