zoukankan      html  css  js  c++  java
  • 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遮罩层,上传开始,成功后关闭遮罩层

     1 <script type="text/javascript">
     2 
     3 function  tanchu(){
     4     layui.use('layer', function(){
     5           var layer = layui.layer;
     6           
     7           var index = layer.load(1, {
     8               shade: [0.1,'#fff'] //0.1透明度的白色背景
     9             });
    10         }); 
    11 }
    12 function  tanchuclose(){
    13     layui.use('layer', function(){
    14           var layer = layui.layer;
    15           
    16           layer.close(layer.index);
    17         }); 
    18 }
    19 </script>
     1     <script type="text/javascript">
     2         function upload(){
     3              tanchu();
     4              var formData = new FormData($( "#uploadForm" )[0]);  
     5              $.ajax({  
     6                   url: '<%=basePath%>/knowledge/upload' ,  
     7                   type: 'POST',  
     8                   data: formData,  
     9                   async: false,  
    10                   cache: false,  
    11                   contentType: false,  
    12                   processData: false,  
    13                   success: function (returndata) { 
    14                      
    15           
    16                       tanchuclose();
    17                       alert(returndata);
    18                   },  
    19                   error: function (returndata) {  
    20                       alert(returndata);  
    21                   }  
    22              });  
    23         }
    24         
    25         
    26     </script>

    点击修改:

     1  if(obj.event === 'setSign'){
     2         layer.prompt({
     3             formType: 2
     4             ,title: '修改 ID 为 ['+ data.id +'] 的角色页面'
     5             ,value: data.homePage
     6           }, function(value, index){
     7             layer.close(index);
     8             
     9             $.ajax({
    10                 type:"post",
    11                 url:"<%=basePath%>/sys/role/update",
    12                 data:{role:JSON.stringify(data)},
    13                 dataType:"text",//返回的
    14                 success:function(data1) {
    15                     layer.alert(data1.result);
    16                     table.reload('idTest', {
    17                         //url: '../user/selectmsguser.do'
    18                         url: '<%=basePath%>/sys/role/list1?q=1'
    19                         ,where: {} 
    20                         //,height: 300
    21                       });
    22                 },
    23                 error:function(msg) {
    24                     cosole.log(msg);
    25                 }
    26             }); 
    27             obj.update({
    28               sign: value
    29             });
    30           });
    31         }

    格式化日期到时分秒:

     1 <script type="text/html" id="timeTpl">
     2 {{#  var fn = function(){
     3 var date=new Date(d.uptime);
     4 var d1=date.getDate();
     5 var y=date.getFullYear();
     6 var m=date.getMonth() + 1;
     7 var HH=date.getHours();
     8 var mm=date.getMinutes();  
     9 var ss=date.getSeconds(); 
    10   return y+'/'+m+'/'+d1+'  '+HH+':'+mm+':'+ss;
    11 }; if(true){ }}
    12  {{ fn() }}
    13 {{#  } }}
    14 </script>

    格式化时间日期:

     1 <script type="text/html" id="timeTpl">
     2 {{#  var fn = function(){
     3 var date=new Date(d.createtime);
     4 var d1=date.getDate();
     5 var y=date.getFullYear();
     6 var m=date.getMonth() + 1;
     7   return y+'/'+m+'/'+d1;
     8 }; if(true){ }}
     9  {{ fn() }}
    10 {{#  } }}
    11 </script>

    密码显示 ***** :

    1 <script type="text/html" id="pwd">
    2  {{#  var fn = function(){
    3   return '***';
    4 }; if(true){ }}
    5  {{ fn() }}
    6 {{#  } }}   
    7 </script>

    状态栏:

    1 <script type="text/html" id="barDemo1">
    2   <a class="layui-btn layui-btn-mini" id="edit" lay-event="edit">保存</a>
    3   <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">冻结</a>
    4 </script>
    1 <script type="text/html" id="usernameTpl">
    2   <a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.username }}</a>
    3 </script>

    远程获取数据:

     1     <script type="text/javascript">
     2 
     3         layui.use('form', function() {
     4             var form = layui.form;
     5             $("#tname").children().remove();
     6             $.ajax({
     7                 type : "post",
     8                 url : "../user/selectallusersrole.do?role=3",
     9                 dataType : "json",
    10                 sync : "false",
    11                 success : function(data) {
    12                     for (var a = 0; a < data.data.length; a++) {
    13                         $("#tname").append(
    14                                 "<option class='tname' value="+data.data[a].id+" >"+ data.data[a].urealname + "</option>")
    15                     }
    16                     form.render('select'); //用ajax追加的需要这样渲染一下
    17                     
    18                 },
    19                 error : function() {
    20                 }
    21             })
    22             
    23             $("#urealname").children().remove();
    24             $.ajax({
    25                 type : "post",
    26                 url : "../user/selectallusersrole.do?role=4",
    27                 dataType : "json",
    28                 sync : "false",
    29                 success : function(data) {
    30                     for (var a = 0; a < data.data.length; a++) {
    31                         $("#urealname").append(
    32                                 "<option class='name' value="+data.data[a].id+" >"+ data.data[a].urealname + "</option>")
    33                     }
    34                     form.render('select'); //用ajax追加的需要这样渲染一下
    35                     
    36                 },
    37                 error : function() {
    38                 }
    39             })
    40             $("#cname").children().remove();
    41             $.ajax({
    42                 type : "post",
    43                 url : "../class/selectclass.do",
    44                 dataType : "json",
    45                 sync : "false",
    46                 success : function(data) {
    47                     for (var a = 0; a < data.data.length; a++) {
    48                         $("#cname").append(
    49                                 "<option class='tname' value="+data.data[a].cid+" >"+ data.data[a].cname + "</option>")
    50                     }
    51                     form.render('select'); //用ajax追加的需要这样渲染一下
    52                     
    53                 },
    54                 error : function() {
    55                 }
    56             })
    57             
    58             //form.on('select(username)', function(data) {//给隐藏的input赋值(机构id)
    59                 //$("#yincang").val(data.value);
    60             //});
    61             
    62         });
    63     </script>

    表单获取Value数据:

     1  function formLoad(element,data){
     2    var input = document.getElementById(element).getElementsByTagName('input');
     3    for(var i =0;i < input.length;i++){ 
     4   var inputname = input[i].name;
     5       for(var j in data){
     6          if(inputname == j){
     7          input[i].value = data[j];
     8          }    
     9       }    
    10    }
    11   }

    数据表格重载传参数,模糊查询:

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

    1                     <div class="demoTable">
    2                         搜索角色:
    3                         <div class="layui-inline">
    4                             <input class="layui-input" name="name" id="demoReload"
    5                                 autocomplete="off">
    6                         </div>
    7                         <button class="layui-btn" style="transform: translateY(-10px);"
    8                             data-type="reload">搜索</button>
    9                     </div>

    这是重载事件:

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

     1 <script>
     2 layui.use('table', function(){
     3   var table = layui.table;
     4   var $ = layui.$, active = {
     5     reload: function(){
     6       var demoReload = $('#demoReload');
     7       
     8       //执行重载
     9       table.reload('idTest', {
    10         page: {
    11           curr: 1 //重新从第 1 页开始
    12         },
    13         where: {
    14           name:  demoReload.val() 
    15         }
    16       });
    17     }
    18   };
    19   
    20   $('.demoTable .layui-btn').on('click', function(){
    21     var type = $(this).data('type');
    22     active[type] ? active[type].call(this) : '';
    23   });
    24 });
    25 </script>

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

     1  $("#addBookbtn").click(function(){
     2           layer.open({
     3               type: 2,
     4               title:['添加新书信息','font-size:22px'],
     5               area: ['400px', '420px'],
     6               content: '../jsp/addbook.jsp',
     7               cancel: function(index, layero){ 
     8                   layer.confirm('是否关闭?', {icon: 3, title:'提示'}, function(index){
     9                       layer.close(index);
    10                       table.reload("booktable");
    11                     });
    12                 }   
    13             });
    14       });
  • 相关阅读:
    solaris如何启动ssh服务
    网页实现插入图片—css与html的区别
    Python与RPC -- (转)
    Python中的异常处理 -- (转)
    Python的异常处理机制 -- (转)
    HTML 学习
    链表练习 链表反转 链表插入..
    php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
    PHP队列的实现 算法
    利用redis List队列简单实现秒杀 PHP代码实现
  • 原文地址:https://www.cnblogs.com/jiangwz/p/7899424.html
Copyright © 2011-2022 走看看