专栏首页闻道于事Layui常用方法

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • =.=

    hibernate.show_sql=false hibernate.format_sql=false 将double类型返回两位小数的double类型: Bi...

    二十三年蝉
  • JavaScript循环实例

    几个经典的循环案例: 1.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米 var i=0; var h=0.000...

    二十三年蝉
  • Layui常见问题

    为什么表单不显示?当你使用表单时,Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以...

    二十三年蝉
  • Fast Refresh 原理剖析

    关注「前端向后」微信公众号,你将收获一系列「用心原创」的高质量技术文章,主题包括但不限于前端、Node.js以及服务端技术

    ayqy贾杰
  • 前端基础-Node.js核心模块的使用

    要求2:向 hzw.json 文件中添加一条数据 {id:'4',names:'罗宾',sex:'女',img:''} ;

    cwl_java
  • Javascript快速入门(下篇)

    Javascript, cheer up。 ? ? Ajax:其通过在Web页面与服务器之间建立一个额外的处理层,这个处理层就被称为Ajax引擎,它解释来自用...

    用户1216676
  • Webassembly初识

    首先,它是一种解释性语言,大神最开始的设计目标用户就是“非专业编程人员和设计师”,避免了非专业人士对编译器了解的需要,解释性语言就是边解释边执行,与编译性语言的...

    CIKEY
  • SpringBoot整合外部servelt容器

    用户5927264
  • 新冠病毒Logistic增长模型:中国+钻石公主号游轮

    Rimmer 博士是一位退休的心脏病专家,自1988年以来一直使用Mathematica。他对数学统计,金融市场,全球定位系统,信息知识和医学感兴趣;他在 Ma...

    WolframChina
  • 「小程序JAVA实战」小程序的横向视频和页面拦截(59)

    PS:小程序一般的开发思路就是尽量前端能办的少麻烦后端,减少交互。这样用户体验就上去了。

    IT故事会

扫码关注云+社区

领取腾讯云代金券