layui常用方法有哪些

這篇文章主要介紹layui常用方法有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

layui(諧音:類UI) 是一款采用自身模塊規(guī)范編寫的前端 UI 框架,遵循原生 HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來(lái)即用。

layui常用的方法：

layui中的input radio單選框監(jiān)聽選擇觸發(fā)事件：

根據(jù)給input綁定的 lay-filter 進(jìn)行查找input，然后進(jìn)入函數(shù)判斷

<div class="layui-form-item">            <label class="layui-form-label">長(zhǎng)期短期</label>            <div class="layui-input-block">                <input type="radio" name="term" value="長(zhǎng)期" title="長(zhǎng)期有效"                    lay-filter="term"> <input type="radio" name="term"                    value="短期" title="短期有效" lay-filter="term">            </div>        </div>        <div id="termtime" class="layui-hide">            <div id="classdate" class="layui-form-item" style="">                <label class="layui-form-label">開始時(shí)間：</label>                <div class="layui-input-block">                    <input type="text" name="startdate" id="startdate"                        lay-verify="startdate" autocomplete="off" class="layui-input">                </div>                <label class="layui-form-label">結(jié)束時(shí)間：</label>                <div class="layui-input-block">                    <input type="text" name="enddate" id="enddate"                        lay-verify="enddate" autocomplete="off" class="layui-input">                </div>            </div>        </div>

form.on('radio(term)', function(data) {            if (data.value == "短期") {                $("#termtime").removeClass("layui-hide");            } else if (data.value == "長(zhǎng)期") {                $("#termtime").addClass("layui-hide");            }        });

設(shè)置按鈕根據(jù)狀態(tài)條件顯示不同的按鈕：

<script type="text/html" id="toolbtn">{{#  if(d.state == true){}}           <a  class="layui-btn layui-btn-mini layui-btn-danger" lay-event="down">下線</a>      {{#  } else { }}         <a class="layui-btn layui-btn-mini " lay-event="up">發(fā)布</a>  {{#  } }}</script>

各種彈窗：

注：因?yàn)橛械哪K中已經(jīng)聲明layer有的則沒有，所以這里都用layui.layer的方式來(lái)調(diào)用layer彈出層：

半透明黑色背景提示框，666毫秒自動(dòng)關(guān)閉：

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

藍(lán)色模塊，左邊跳出動(dòng)畫，有確定按鈕

layui.use('layer', function() {                 layer.alert(returndata.msg, {                        skin: 'layui-layer-lan'                        ,closeBtn: 0                        ,anim: 4 //動(dòng)畫類型                      });                });

input只能輸入數(shù)字，不能輸入其他和小數(shù)點(diǎn)

<input type="text" id="num" name="num" placeholder="請(qǐng)輸入" autocomplete="off" class="layui-input"  onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

layui遮罩層，上傳開始，成功后關(guān)閉遮罩層

<script type="text/javascript">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);        }); }</script>

<script type="text/javascript">        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);                    }               });          }                    </script>

點(diǎn)擊修改：

if(obj.event === 'setSign'){        layer.prompt({            formType: 2            ,title: '修改 ID 為 ['+ data.id +'] 的角色頁(yè)面'            ,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            });          });        }

格式化日期到時(shí)分秒：

<script type="text/html" id="timeTpl">{{#  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() }}{{#  } }}</script>

格式化時(shí)間日期：

<script type="text/html" id="timeTpl">{{#  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() }}{{#  } }}</script>

密碼顯示 ***** ：

<script type="text/html" id="pwd"> {{#  var fn = function(){  return '***';}; if(true){ }} {{ fn() }}{{#  } }}   </script>

狀態(tài)欄：

<script type="text/html" id="barDemo1"><a class="layui-btn layui-btn-mini" id="edit" lay-event="edit">保存</a><a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">凍結(jié)</a></script>

<script type="text/html" id="usernameTpl">  <a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.username }}</a></script>

遠(yuǎn)程獲取數(shù)據(jù)：

<script type="text/javascript">        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(                                "<option class='tname' value="+data.data[a].id+" >"+ data.data[a].urealname + "</option>")                    }                    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(                                "<option class='name' value="+data.data[a].id+" >"+ data.data[a].urealname + "</option>")                    }                    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(                                "<option class='tname' value="+data.data[a].cid+" >"+ data.data[a].cname + "</option>")                    }                    form.render('select'); //用ajax追加的需要這樣渲染一下                                    },                error : function() {                }            })                        //form.on('select(username)', function(data) {//給隱藏的input賦值（機(jī)構(gòu)id）                //$("#yincang").val(data.value);            //});                    });    </script>

表單獲取Value數(shù)據(jù)：

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];         }          }       }  }

這是搜索按鈕，點(diǎn)擊觸發(fā)重載：

<div class="demoTable">                        搜索角色：                        <div class="layui-inline">                            <input class="layui-input" name="name" id="demoReload"                                autocomplete="off">                        </div>                        <button class="layui-btn" style="transform: translateY(-10px);"                            data-type="reload">搜索</button>                    </div>

這是重載事件：

不需要指定重載的url，只需要根據(jù)表格的ID就可以重載，這里的ID是在layui聲明的的ID，不是普通的標(biāo)簽中id="idno"這樣的id，然后再where里面?zhèn)鲄?shù)

<script>layui.use('table', function(){  var table = layui.table;  var $ = layui.$, active = {    reload: function(){      var demoReload = $('#demoReload');            //執(zhí)行重載      table.reload('idTest', {        page: {          curr: 1 //重新從第 1 頁(yè)開始        },        where: {          name:  demoReload.val()         }      });    }  };    $('.demoTable .layui-btn').on('click', function(){    var type = $(this).data('type');    active[type] ? active[type].call(this) : '';  });});</script>

添加或修改打開一個(gè)頁(yè)面后，關(guān)閉頁(yè)面重載原來(lái)頁(yè)面數(shù)據(jù)表格

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

以上是“l(fā)ayui常用方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！