layui常用方法

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

layui常用的方法：

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

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

<div class="layui-form-item">             <label class="layui-form-label">长期短期</label>             <div class="layui-input-block">                 <input type="radio" name="term" value="长期" title="长期有效"                     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">开始时间：</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">结束时间：</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 == "长期") {                 $("#termtime").addClass("layui-hide");             }         });

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

<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">发布</a>   {{#  } }} </script>

各种弹窗：

注：因为有的模块中已经声明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只能输入数字，不能输入其他和小数点

<input type="text" id="num" name="num" placeholder="请输入"  autocomplete="off" class="layui-input"  onkeyup="this.value=this.value.replace(/D/g,'')"  onafterpaste="this.value=this.value.replace(/D/g,'')">

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

<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>

点击修改：

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

格式化日期到时分秒：

<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>

格式化时间日期：

<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>

状态栏：

<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">冻结</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>

远程获取数据：

<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赋值（机构id）                 //$("#yincang").val(data.value);             //});                      });     </script>

表单获取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];          }           }        }   }

这是搜索按钮，点击触发重载：

<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，只需要根据表格的ID就可以重载，这里的ID是在layui声明的的ID，不是普通的标签中id="idno"这样的id，然后再where里面传参数

<script> layui.use('table', function(){   var table = layui.table;   var $ = layui.$, active = {     reload: function(){       var demoReload = $('#demoReload');              //执行重载       table.reload('idTest', {         page: {           curr: 1 //重新从第 1 页开始         },         where: {           name:  demoReload.val()          }       });     }   };      $('.demoTable .layui-btn').on('click', function(){     var type = $(this).data('type');     active[type] ? active[type].call(this) : '';   }); }); </script>

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

$("#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");                     });                 }                });       });