专栏首页闻道于事Layui常见问题

Layui常见问题

为什么表单不显示?当你使用表单时,Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理(它们需依赖 element 模块)

1 layui.use('form', function(){
2   var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
3   
4   //……
5   
6   //但是,如果你的HTML是动态生成的,自动渲染就会失效
7   //因此你需要在相应的地方,执行下述方法来手动渲染,跟这类似的还有 element.init();
8   form.render();
9 });      

layui数据表格可以设置宽度为百分比:

根据设置每一列的百分比宽度来进行设置,不过遇到过一个页面,设置列宽百分比之后所有的列都变得挤到一起,而且上下不齐,经检查:

因为在表格中设置了宽度为 'full' 这在当前版本是不识别的,需要所以下面设置的百分比也出问题了。

表单

layui的弹出层失效的问题

加上在ajax后加上return false可以用了

原来的代码:

 1 <script>
 2 $('form').submit(function() {
 3             if($("#newname").val().length<2){
 4                 layui.use('layer', function() {
 5                     var layer = layui.layer;
 6                      layer.alert('姓名最少2个字符', {
 7                             skin: 'layui-layer-lan'
 8                             ,closeBtn: 0
 9                             ,anim: 4 //动画类型
10                           });
11                     });
12                 return false;
13             }
14         
15             
16         $.ajax({  
17             url: '<%=basePath%>/personal/msg/editname',
18             type : 'POST',
19             data : {
20                 id:$('#id').val(),
21                 name:$('#newname').val(),
22             },
23             async: false,
24             datatype:'json',
25             success : function(returndata) {
26                 tanchuclose();
27                 layui.use('layer', function() {
28                     var layer = layui.layer;
29                      layer.alert(returndata.msg, {
30                             skin: 'layui-layer-lan'
31                             ,closeBtn: 0
32                             ,anim: 4 //动画类型
33                           });
34                     });
35                 
36             },
37             error : function(returndata) {
38                 layui.use('layer', function() {
39                     var layer = layui.layer;
40                      layer.alert("ajax的error", {
41                             skin: 'layui-layer-lan'
42                             ,closeBtn: 0
43                             ,anim: 4 //动画类型
44                           });
45                     });
46                 tanchuclose();
47             }
48         });
49     });
50     </script>

修改后可以弹出的代码:

<script>
$('form').submit(function() {
            if($("#newname").val().length<2){
                layui.use('layer', function() {
                    var layer = layui.layer;
                     layer.alert('姓名最少2个字符', {
                            skin: 'layui-layer-lan'
                            ,closeBtn: 0
                            ,anim: 4 //动画类型
                          });
                    });
                return false;
            }
        
            
        $.ajax({  
            url: '<%=basePath%>/personal/msg/editname',
            type : 'POST',
            data : {
                id:$('#id').val(),
                name:$('#newname').val(),
            },
            async: false,
            datatype:'json',
            success : function(returndata) {
                tanchuclose();
                layui.use('layer', function() {
                    var layer = layui.layer;
                     layer.alert(returndata.msg, {
                            skin: 'layui-layer-lan'
                            ,closeBtn: 0
                            ,anim: 4 //动画类型
                          });
                    });
                
            },
            error : function(returndata) {
                layui.use('layer', function() {
                    var layer = layui.layer;
                     layer.alert("ajax的error", {
                            skin: 'layui-layer-lan'
                            ,closeBtn: 0
                            ,anim: 4 //动画类型
                          });
                    });
                tanchuclose();
            }
        });
        return false;
    });
    </script>

layui报错某个元素找不到

原因:laiyui中引用了没有声明的某个变量

layui中使用layer出问题,提示找不到

单独使用layer出问题,提示找不到

文档地址:http://www.layui.com/doc/modules/layer.html

1 layui.use('layer', function(){
2   var layer = layui.layer;
3   
4   layer.msg('hello');
5 });  

有些内容挤在一起,不能解析,分开就可以使用

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Layui常用方法

    layui中的input radio单选框监听选择触发事件: 根据给input绑定的 lay-filter 进行查找input,然后进入函数判断 ...

    二十三年蝉
  • Java常用工具类之发送邮件

    package com.csice.utils; import java.io.File; import java.io.FileInputSt...

    二十三年蝉
  • Linux常用操作

    二十三年蝉
  • JavaScript进阶教程(5)-一文让你搞懂作用域链和闭包

    在JS中变量可以分为局部变量和全局变量,对于变量不熟悉的可以看一下我这篇文章:搞懂JavaScript全局变量与局部变量,看这篇文章就够了 作用域就是变量的使用...

    AlbertYang
  • MySQL互动型可视化监控工具

    MySQL监控是一个很大复杂的任务,不同的应用有着不同的需求。“监控”是大家滥用的术语之一,承载了几重意思。我们讲到的监控工具被分为非互动的和互动的两类。非互...

    it妹
  • 备战秋招 面试真题: 给你一个Demo 你如何快速定位ANR?

    在Android上,如果你的应用程序有一段时间响应不够灵敏,系统会向用户显示一个对话框,这个对话框称作“应用程序无响应”(ANR:Application Not...

    Android技术干货分享
  • 幻听中语言网络、听觉网络和记忆网络的交互障碍

    听觉言语幻觉(AVH,也就是幻听)在精神病患者中出现,但也作为其他病症的一种症状,甚至在健康人中也存在。目前关于AVH起源的几种理论趋于一致,神经影像学研究表明...

    用户1279583
  • 如何在 Ubuntu 20.04 上安装 MySQL

    MySQL是最流行的开源关系数据库管理系统。它速度快,容易使用,容易扩展,并且流行的LAMP和LEMP的一部分。

    雪梦科技
  • 如何在 Ubuntu 20.04 上安装 MySQL

    https://www.itcoder.tech/posts/how-to-install-mysql-on-ubuntu-20-04/

    雪梦科技
  • 苹果iOS10开发者预览版Beta1固件下载大全

    2016-06-1407:52:19 发表评论 514℃热度 1、固件下载: 2、兼容设备列表 3、更新说明 目录 可惜我身边没有ios设备,不然必须肯...

    timhbw

扫码关注云+社区

领取腾讯云代金券