Layui_使用_问题_总结__一蓑烟雨任平生

---

前言

用layui开发了一段时间了,总结一些东西吧

---

一、layui表格内放置图片，并点击放大

废话不哆嗦,直接上代码

{
  field: 'imageUrl', title: '项目图片', templet: function (d) {
  if (d.imageUrl != null){
  return '<img onclick="showimg(this)" 
  id="driimg" 
  style="display: inline-block; width: 50%; height: 100%;" 
  src="' + d.imageUrl + '">';}
  else{return "";}}},

       //显示大图
        window.showimg = function (t) {
            //页面层
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: '516px',
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: '<img style="display: inline-block; width: 100%; height: 100%;" src="' + t.src + '">'
            });
        }

二、layui下select下拉框不显示或没有效果

form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
//……

三、全局变量存储table条件渲染

第一步:table表格数据添加templet

{
      field: 'name', minWidth: 100, title: '项目名称', templet: function (d) {
             quan.forEach(item => {
                     if (item.id == d.name) {
                          res = item.orgName
                                }
                            })
                            return res;
                        }
                    },

第二步:获取数据放入全局变量

 $.ajax({
      type: "GET", //提交方式
      url: "http://nywlw.hnyfkj.com/api/v1/org/getOrgNameForCompany",//路径
      dataType: "json",
      success: function (result) {//返回数据根据结果进行相应的处理
                    console.log(result)
                    data = result.data
                    var job = "<option value=\"\">==请选择==</option>";
                    if (result.meta.success) {
                        for (var i in data) {
                            job += "<option value='" + data[i].id + "'>" + data[i].orgName + "</option>"

                            quan.push({orgName: data[i].orgName, id: data[i].id})
                        }
                        $("#companyList").html(job)
                        form.render('select')
                    }
                }
            });

四、layui下弹窗关闭不刷新问题

layer.open加入如下属性,reload里面是table的id

end: function () {
     table.reload('currentTableId')
       }

五、layui下时间范围切割

 //日期范围
        laydate.render({
            elem: '#qihou-time',
            range: true,
            done: (val) => {
                $("#startTime").val(val.substring(0,10)) //开始日期
                $("#endTime").val(val.substring(13,val.length)) //结束日期
            }
        });

六、layui文本框

 <textarea class="layui-textarea" name="financialAuditSuggest" maxlength="300"></textarea>

七、自定义校验

lay-verify="required|lengthVerify"

form.verify(
            {
                lengthVerify:function (value, item) {
                    if (value.length>30){
                        return '字段长度不能超过30'
                    }
                },
              
                soilArea:function (value,item) {
                    if (value.length>500){
                        return '字段长度不能超过500'
                    }
                }
            }
        );

八、多久之后关闭弹框

var index = layer.msg("成功", {
                            time: 300 //如果不配置，默认是3秒）
                        },function () {
                        	// 关闭弹出层
                            layer.close(index);
                            parent.layer.close(iframeIndex);
                        })

九、取消添加编辑

$('#cancel').on("click", function () {
             parent.layer.close(iframeIndex);
        });

十、确定是否删除

 if (table.checkStatus('currentTableId').data.length == 0) {
                    layer.msg("请选择删除项", {time: 800});
                    return;
                }

  layer.confirm('是否确定删除?', function (index) {

十一、页面加载事件

1.刚进页面未加载layui

 $(function () {

2.刚进页面已加载layui

layer.ready(function(){

十二、监听下拉事件

 form.on('select(piType)', function (data) {
            if (data.value == "1") {
                console.log('进来图片了')
                //图片
                $("#wordContent").css("display", "none")
                $("#words").attr("lay-verify", "");
                $("#picture").css("display", "block")
            } else {
                //文字
                $("#wordContent").css("display", "block")
                $("#picture").css("display", "none")
            }

十三、页面填充下拉

//初始化
        $.ajax({
            type: "POST", //提交方式
            url: "../pi_area/listNoPage",//路径
            contentType: "application/json;charset=utf-8",
            //data: JSON.stringify({"remark1": "4"}),//数据，这里使用的是Json格式进行传输
            dataType: "json",
            success: function (result) {//返回数据根据结果进行相应的处理
                if (result.code == "0" && result.data) {
                    $("#areaType").html("")
                    var html = '<option value="">请选择</option>';
                    $.each(result.data, function (index, item) {
                        // if (result_industry == item.id) {
                        //     html += '<option value="' + item.id + '" selected>' + item.typeName + '</option>';
                        // } else {
                        html += '<option value="' + item.id + '">' + item.areaName + '</option>';
                        // }
                    })
                    $("#areaType").html(html)
                } else {
                    layer.msg(result.msg);
                }
            }
        });

总结

代码很简单,看懂很容易,就是需要积累