Common methods of layui

layui (homophone: UI-like) is a front-end UI framework written using its own module specifications. It follows the writing and organizational form of native HTML/CSS/JS. The threshold is extremely low and can be used out of the box.

Commonly used methods in layui:

The input radio radio button in layui listens for the selection trigger event:

Search the input based on the lay-filter bound to the input, and then enter the function judgment

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

Set the button to display different buttons according to the status conditions:

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

Various pop-up windows:

Note: Because some modules have already declared layer and some have not, the layui.layer method is used here to call the layer pop-up layer:

Translucent black background prompt box, automatically closed in 666 milliseconds:

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

Blue module, animation pops up on the left, with OK button

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

Input can only enter numbers, no other input and decimal point

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

layui mask layer, upload starts, close the mask layer after success

<script type="text/javascript">

function  tanchu(){
    layui.use(&#39;layer&#39;, function(){
          var layer = layui.layer;
          
          var index = layer.load(1, {
              shade: [0.1,&#39;#fff&#39;] //0.1透明度的白色背景
            });
        }); 
}
function  tanchuclose(){
    layui.use(&#39;layer&#39;, 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: &#39;<%=basePath%>/knowledge/upload&#39; ,  
                  type: &#39;POST&#39;,  
                  data: formData,  
                  async: false,  
                  cache: false,  
                  contentType: false,  
                  processData: false,  
                  success: function (returndata) { 
                     
          
                      tanchuclose();
                      alert(returndata);
                  },  
                  error: function (returndata) {  
                      alert(returndata);  
                  }  
             });  
        }
        
        
    </script>

Click to modify:

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(&#39;idTest&#39;, {
                        //url: &#39;../user/selectmsguser.do&#39;
                        url: &#39;<%=basePath%>/sys/role/list1?q=1&#39;
                        ,where: {} 
                        //,height: 300
                      });
                },
                error:function(msg) {
                    cosole.log(msg);
                }
            }); 
            obj.update({
              sign: value
            });
          });
        }

Format date to hour, minute and second:

<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+&#39;/&#39;+m+&#39;/&#39;+d1+&#39;  &#39;+HH+&#39;:&#39;+mm+&#39;:&#39;+ss;
}; if(true){ }}
 {{ fn() }}
{{#  } }}
</script>

Format time and date:

<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+&#39;/&#39;+m+&#39;/&#39;+d1;
}; if(true){ }}
 {{ fn() }}
{{#  } }}
</script>

Password display** ***:

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

Status bar:

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

Remote data acquisition:

<script type="text/javascript">

        layui.use(&#39;form&#39;, 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=&#39;tname&#39; value="+data.data[a].id+" >"+ data.data[a].urealname + "</option>")
                    }
                    form.render(&#39;select&#39;); //用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=&#39;name&#39; value="+data.data[a].id+" >"+ data.data[a].urealname + "</option>")
                    }
                    form.render(&#39;select&#39;); //用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=&#39;tname&#39; value="+data.data[a].cid+" >"+ data.data[a].cname + "</option>")
                    }
                    form.render(&#39;select&#39;); //用ajax追加的需要这样渲染一下
                    
                },
                error : function() {
                }
            })
            
            //form.on(&#39;select(username)&#39;, function(data) {//给隐藏的input赋值（机构id）
                //$("#yincang").val(data.value);
            //});
            
        });
    </script>

The form obtains Value data:

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

This is the search button, click to trigger reload:

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

This is the reload event:

You don’t need to specify the overloaded url, you only need to reload it according to the ID of the table. The ID here is the ID declared in layui, not the id="idno" in the ordinary tag. Then pass the parameters in where

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

Add or modify After opening a page, close the page and reload the original page data table

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

For more layui related knowledge, please pay attentionlayuiframework.

The above is the detailed content of Common methods of layui. For more information, please follow other related articles on the PHP Chinese website!