layu常用知识点笔记

layui帮助文档

layui 官网在 2021年10月13日已下线，以下可参考

layui迁移地址
在线文档： https://www.layuion.com/

1、上传图片

layui.use('upload', function () {
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#up' //绑定元素
            , url: '/fastPath/getUpload' //上传接口
            ,size: 1024*8 //限制文件大小，单位 KB
             ,acceptMime: 'image/*'
            ,before:function(){
                layer.msg("图片上传中，请稍等......",{icon:16,
                    shade:0.01, time: 60*60*10
                })
            }
            , done: function (res) {
                layer.closeAll();
                if (res.message == "failed") {
                    layer.msg(res.data, {icon: 5});
                    return false;
                }
                //上传完毕回调
                $("#textHidden").val(res.data.path);
                if (res.data.url != "") {
                    $("#imgInit").attr('src', res.data.url);
                }

            }
            , error: function () {
                //请求异常回调
                layer.closeAll();
                layer.msg('请稍后重试', {icon: 5});
            }
        });
    });

2、loading

layer.msg("正在提交中.....",  {icon: 16,time: 100000,
shade : [0.5 , '#000' , true]});

3、时间格式化

//格式化时间
//格式化时间
function timeFormat(data) {
    var date = new Date(data);
    Y = date.getFullYear() + '-';
    M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
    h = date.getHours() + ':';
    m = date.getMinutes() + ':';
    s = date.getSeconds();

    var time = Y + M + D;
    return time;
}
表格调用：  templet: timeFormat

4、layui值判断

{{# if(d.start == 1){ }}
        <a class="" lay-event="view">下架</ a>
    {{# } }}

5、组件内容回显

1）固定下拉项的选中实现

//下拉框内容 动态加载/联动时 无效
var layer = layui.layer；
$("#productCategoryId option[value="+$("#hiddenProductId").val()+"]").attr("selected","selected"); 
console.log($("#applicationUnit").val());
console.log($("#applicationUnit").find("option:selected").text());

  //从新刷新了一下下拉框
form.render('select');      //重新渲染

form.render() //重新渲染表单

2）下拉框内容动态获取或回显实现思路

<label class="layui-form-label" ><span style="color: red;margin: 0 4px;">*</span>这是下拉框</label>
<div class="layui-input-inline" >
    <select  id="classification" name="classification" lay-verify="required"
           lay-filter="classification"> </select>
</div>
                                        
 function qeslIdchange(data,id) {
            $.getJSON("/manage/?id="+data.value, function (result) {
                var data = result.data;
                var optionstring;
                $.each(data, function (i, item) {
                    if(id==item.id){
                        optionstring += "<option value=\"" + item.id + "\"  selected='selected'>" + item.name + "</option>";
                    }else{
                        optionstring += "<option value=\"" + item.id + "\" >" + item.name + "</option>";
                    }

                });
                $("#classification").html('<option value=""></option>' + optionstring);
                layui.form.render('select'); //这个很重要
            });
        }

3）单选回显

<div class="layui-inline">
     <label class="layui-form-label">
     <span style="color: red;margin: 0 4px;">*</span>是否重点</label>
     <div class="layui-input-inline ">
           <input type="radio" name="isMain" class="isMain2" value="1" title="是">
           <input type="radio" name="isMain" class="isMain2" value="0" title="否"
            checked>
     </div>
</div>
     
 //单选回显                                   
 var obj = document.getElementsByClassName("isMain2");
                var check_val = [];
                if (data.isMainName != undefined) {
                    check_val = data.isMainName.split(',');
                    for (i in check_val) {
                        for (k in obj) {
                            if (obj[k].title === check_val[i]) {
                                obj[k].checked = true;
                                break
                            }
                        }
                    }
                }
 layui.form.render();
  

4）复选框渲染及回显

//复选框回显
checkbooxstatus(true,data.qeslIds);

//复选框内容加载及回显
 function checkbooxstatus(disabled,ids){
        var form = layui.form;
        var array=[];
        if(ids){
            array=ids.split(",");
        }
        $.getJSON("/manage/xxxx", function (result) {
            var data = result.data[0];
            var optionstring='';
            $.each(data, function (i, item) {
                console.log(item);
                if($.inArray(item.id+'', array)>-1){
                    optionstring += " <input type=\"checkbox\"   lay-filter=\"qescheckbox\" name=\""+item.id+"\" title=\""+item.name+"\" "+(disabled?" disabled":"")+"  checked>";

                }else{
                    //如果禁用且不是选中则不显示
                    if(disabled){
                        return;
                    }
                    optionstring += " <input type=\"checkbox\"   lay-filter=\"qescheckbox\" name=\""+item.id+"\" title=\""+item.name+"\" "+(disabled?" disabled":"")+">";
                }
            });

            $("#qeslIds").html(optionstring);
            form.render();
        })
    }
 //获取复选框选中的value值
layui.form.on('checkbox(qescheckbox)', function (data) {
            console.log('data',$("input[name=qeslIdscheck] option:checked").val())
            let str='';
            $.each($('#qeslIds  input:checkbox'), function () {
                if (this.checked) {
                    let value=$(this).attr('name').trim();
                    str+=  (str!=''?(","+value):value)
                }
            });
            $('input[name="qeslIds"]').val(str);
 });

6、表单内容重置

 $("#updateForm")[0].reset();
 //如果jq不生效，则用js
 document.getElementById("updateForm").reset();
 
 layui.form.render();

7、错误遍历信息

if (result.code != 1) {
        if (result.data instanceof Array) {
            if (result.data instanceof Array) {
                $.each(result.data, function (index, value) {
                    layer.msg(value, {icon: 5});
                });
            }
        } else {
            layer.msg(result.data, {icon: 5});
        }
    }

8、laydate在谷歌浏览器弹出日期选择框后消失

修改了laydate.js，把trigger:“focus”,show:!1改为trigger:“click”,show:!1 ，目前运作正常

9、实现弹窗自带按钮、触发表单校验

//表单内容
<div id="product" class="amend">
                        <form id="productForm" class="layui-form" action="">
                            <div style="padding-bottom: 62px;">

                                <div class="layui-form-item current-form-item">
                                   
                                </div>
                                <div class="clear">
                                    <button type="button" class="am_btn am_btn_add save_submit "
                                            style=" 24px;display: none" lay-submit=""
                                            lay-filter="product_submit"
                                            st>保存
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>

//弹窗
layer.open({
                    type: 1,
                    title: '修改',
                    skin: 'check-demo',
                    area: ['900px', '500px'],
                    moveType: 1, //拖拽模式，0或者1
                    shade: false, //遮罩层
                    maxmin: false, //开启最大化最小化按钮
                    btn: ['保存', '取消'],
                    content: $("#product"),
                    end: function () { //关闭时重置表单
                         //重置表单
                        document.getElementById("productForm").reset();
                        //重置下拉框值
                        $("#classification").val('');
                        layui.form.render();
                 
                    },
                    yes: function () {
                        $("#productForm .save_submit").click();
                    },
                    btn2: function (index) {
                        layer.close(index);
                    }
            });

form.on('submit(product_submit)', function (data) {
  //调用表单提交接口 进行表单提交
}

9、即时验证

//即时验证
//formdiv 验证指定div里面的控件  
//currentObject 验证指定控件
//输入控件光标离开时验证
$(".layui-input").blur(function () {
    immediateVerify(null,$(this));
});

//下拉框控件选中时触发
form.on('select(province)', function(data){
    immediateVerify(null,data.elem);
});

//验证指定div里的控件是否全部通过校验,通过则返回true,否则返回false
$('.loveJuan001').click(function(){
   var val=  immediateVerify($(".loveJuan01"));
   if(val){
      $('.middle-boxTopImg01').addClass('middle-boxTopImg02');
      $('.gree').next().addClass('gree');
    $('.loveJuan01').hide();
    $('.loveJuan02').show();
   }

});



function  immediateVerify(formdiv,currentObject) {
    var state = true;
    layui.use(['form', 'layer'], function () {
        var form = layui.form,
            layer = layui.layer;
        if (formdiv == undefined || formdiv == null) formdiv = $(".layui-form");

        var t = layui.$;
        var i = layer;
        var currentObj = currentObject;
        // var  n = layui.device();
        var e = layui.$(this), a = form.config.verify, s = null, o = "layui-form-danger", u = {}, c = formdiv,
            d = c.find("*[lay-verify]"), y = e.parents("form")[0], v = c.find("input,select,textarea"),
            h = e.attr("lay-filter");
        layui.each(d, function (e, l) {
            var r = t(this), u = r.attr("lay-verify").split("|"), c = r.attr("lay-verType"), d = r.val();
            if (currentObj != undefined && currentObj != null) {
                if (currentObj.tagName != undefined && currentObj.tagName.toLowerCase() == "select") {
                    if (currentObj != l) {
                        return;
                    }

                } else if (currentObj[0] != l) {
                    return
                }
            }
            if (r.removeClass(o), layui.each(u, function (e, t) {
                    var u, f = "", y = "function" == typeof a[t];
                    if (a[t]) {
                        var u = y ? f = a[t](d, l) : !a[t][0].test(d);

                        if (f = f || a[t][1], u) {
                            state = false;
                            if (currentObj != undefined && currentObj != null) {
                                var yesImage = $(currentObj).siblings(".yesImage");
                                if (yesImage != undefined && yesImage != null) {
                                    $(yesImage).removeClass("yesImage");
                                    $(yesImage).addClass("noImage");
                                }
                            }
                            if ("select" == l.tagName.toLowerCase()) {
                                return layer.tips(f, $(currentObj).parentElement, {
                                    tips: [2, '#ba0d02']
                                });
                            } else {
                                if (currentObj == undefined || currentObj == null) {
                                    return i.msg(f, {icon: 5, shift: 6}), l.focus(), r.addClass(o), s = !0

                                }
                                else {
                                    return layer.tips(f, currentObj, {
                                        tips: [2, '#ba0d02']
                                    });
                                }
                            }


                        } else if (currentObj != undefined && currentObj != null) {
                            var yesImage = $(currentObj).siblings(".noImage");
                            if (yesImage != undefined && yesImage != null) {
                                $(yesImage).removeClass("noImage");
                                $(yesImage).addClass("yesImage");
                            }
                        }

                    }
                }), s) return s

        });

    })
    return state;
}

//样式
.yesImage {
    position: absolute;
    right: -28px;
    top: 10px;
    width: 18px;
    height: 18px;
    background: url(../img/public/yes.png);
}

<div class="layui-form-item">
    <label class="layui-form-label label-long"><span class="red-star">*</span>产品适用范围：</label>
    <div class="layui-input-block">
        <input type="text" name="productscope" th:value="${OnlineProductUp?.productscope}" maxlength="100"
               required lay-verify="required" autocomplete="off" class="layui-input">
        <div class="noImage"></div>  
    </div>
</div>