layui常用方法有哪些
创始人
2024-12-17 07:42:10
0次

layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。

layui常用的方法:

layui中的input radio单选框监听选择触发事件:

根据给input绑定的 lay-filter 进行查找input,然后进入函数判断

            长期短期                                         
        
                                    开始时间:                                                    
                结束时间:                                                    
            
        
form.on('radio(term)', function(data) {            if (data.value == "短期") {                $("#termtime").removeClass("layui-hide");            } else if (data.value == "长期") {                $("#termtime").addClass("layui-hide");            }        });

设置按钮根据状态条件显示不同的按钮:

{{#  if(d.state == true){}}           下线      {{#  } else { }}         发布  {{#  } }}

各种弹窗:

注:因为有的模块中已经声明layer有的则没有,所以这里都用layui.layer的方式来调用layer弹出层:

半透明黑色背景提示框,666毫秒自动关闭:

layui.layer.msg(returndata.msg,{time: 666});

蓝色模块,左边跳出动画,有确定按钮

layui.use('layer', function() {                 layer.alert(returndata.msg, {                        skin: 'layui-layer-lan'                        ,closeBtn: 0                        ,anim: 4 //动画类型                      });                });

input只能输入数字,不能输入其他和小数点

layui遮罩层,上传开始,成功后关闭遮罩层

function  tanchu(){    layui.use('layer', function(){          var layer = layui.layer;                    var index = layer.load(1, {              shade: [0.1,'#fff'] //0.1透明度的白色背景            });        }); }function  tanchuclose(){    layui.use('layer', function(){          var layer = layui.layer;                    layer.close(layer.index);        }); }
        function upload(){             tanchu();             var formData = new FormData($( "#uploadForm" )[0]);               $.ajax({                    url: '<%=basePath%>/knowledge/upload' ,                    type: 'POST',                    data: formData,                    async: false,                    cache: false,                    contentType: false,                    processData: false,                    success: function (returndata) {                                                      tanchuclose();                      alert(returndata);                  },                    error: function (returndata) {                        alert(returndata);                    }               });          }                    

点击修改:

if(obj.event === 'setSign'){        layer.prompt({            formType: 2            ,title: '修改 ID 为 ['+ data.id +'] 的角色页面'            ,value: data.homePage          }, function(value, index){            layer.close(index);                        $.ajax({                type:"post",                url:"<%=basePath%>/sys/role/update",                data:{role:JSON.stringify(data)},                dataType:"text",//返回的                success:function(data1) {                    layer.alert(data1.result);                    table.reload('idTest', {                        //url: '../user/selectmsguser.do'                        url: '<%=basePath%>/sys/role/list1?q=1'                        ,where: {}                         //,height: 300                      });                },                error:function(msg) {                    cosole.log(msg);                }            });             obj.update({              sign: value            });          });        }

格式化日期到时分秒:

{{#  var fn = function(){var date=new Date(d.uptime);var d1=date.getDate();var y=date.getFullYear();var m=date.getMonth() + 1;var HH=date.getHours();var mm=date.getMinutes();  var ss=date.getSeconds();   return y+'/'+m+'/'+d1+'  '+HH+':'+mm+':'+ss;}; if(true){ }} {{ fn() }}{{#  } }}

格式化时间日期:

{{#  var fn = function(){var date=new Date(d.createtime);var d1=date.getDate();var y=date.getFullYear();var m=date.getMonth() + 1;  return y+'/'+m+'/'+d1;}; if(true){ }} {{ fn() }}{{#  } }}

密码显示 ***** :

 {{#  var fn = function(){  return '***';}; if(true){ }} {{ fn() }}{{#  } }}   

状态栏:

保存冻结
  {{ d.username }}

远程获取数据:

        layui.use('form', function() {            var form = layui.form;            $("#tname").children().remove();            $.ajax({                type : "post",                url : "../user/selectallusersrole.do?role=3",                dataType : "json",                sync : "false",                success : function(data) {                    for (var a = 0; a < data.data.length; a++) {                        $("#tname").append(                                ""+ data.data[a].urealname + "")                    }                    form.render('select'); //用ajax追加的需要这样渲染一下                                    },                error : function() {                }            })                        $("#urealname").children().remove();            $.ajax({                type : "post",                url : "../user/selectallusersrole.do?role=4",                dataType : "json",                sync : "false",                success : function(data) {                    for (var a = 0; a < data.data.length; a++) {                        $("#urealname").append(                                ""+ data.data[a].urealname + "")                    }                    form.render('select'); //用ajax追加的需要这样渲染一下                                    },                error : function() {                }            })            $("#cname").children().remove();            $.ajax({                type : "post",                url : "../class/selectclass.do",                dataType : "json",                sync : "false",                success : function(data) {                    for (var a = 0; a < data.data.length; a++) {                        $("#cname").append(                                ""+ data.data[a].cname + "")                    }                    form.render('select'); //用ajax追加的需要这样渲染一下                                    },                error : function() {                }            })                        //form.on('select(username)', function(data) {//给隐藏的input赋值(机构id)                //$("#yincang").val(data.value);            //});                    });    

表单获取Value数据:

function formLoad(element,data){   var input = document.getElementById(element).getElementsByTagName('input');   for(var i =0;i < input.length;i++){   var inputname = input[i].name;      for(var j in data){         if(inputname == j){         input[i].value = data[j];         }          }       }  }

这是搜索按钮,点击触发重载:

                        搜索角色:                                                                            
                        搜索                    

这是重载事件:

不需要指定重载的url,只需要根据表格的ID就可以重载,这里的ID是在layui声明的的ID,不是普通的标签中id="idno"这样的id,然后再where里面传参数

添加或修改打开一个页面后,关闭页面重载原来页面数据表格

$("#addBookbtn").click(function(){          layer.open({              type: 2,              title:['添加新书信息','font-size:22px'],              area: ['400px', '420px'],              content: '../jsp/addbook.jsp',              cancel: function(index, layero){                   layer.confirm('是否关闭?', {icon: 3, title:'提示'}, function(index){                      layer.close(index);                      table.reload("booktable");                    });                }               });      });

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...