Layui常见问题

时间:2023-03-10 01:44:41
Layui常见问题

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

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

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

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

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

表单

layui的弹出层失效的问题

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

原来的代码:

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

 layui.use('layer', function(){
var layer = layui.layer; layer.msg('hello');
});

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

     <script>
layui.use('table', function(){
var table = layui.table;
var $ = layui.$;
var 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>