layui小白不得不看的踩坑经验(持续更新)

1. layui的select下拉框不显示
描述:由于是通过ajax获取列表数据后,去渲染select,出现了option不能显示的问题
解决方法:select需要layui.use引用form,而且动态生成的元素,需要主动调用form.render()更新渲染,参数可传入type和lay-filter,见表单更新渲染。

layui.use(['form'], function() {
	var form = layui.form
	...
	ajax获取数据
	$.ajax(ajax参数).done(function() {
		...其他业务
		form.render('select', 'queryform')
	})
	...
})

2. layui的form提交后会自动刷新页面
在事件监听里面需要return false;

form.on('submit(query)', function(data){
    ...其他业务
    return false;
})

3. 动态渲染的nav不能正常使用
与select同理,需要通过element.render()更新渲染,参数可传入type和lay-filter,见element更新渲染。

layui.use(['element'], function() {
	var element = layui.element
	...
	ajax获取导航数据
	$.ajax(ajax参数).done(function() {
		...其他业务
		element.render('nav')
	})
	...
})

4. layui弹出式表单发生表单校验时,弹出层自动关闭
原因是layer.open不能使用默认的type,默认的type是信息框,被表单校验后弹出的信息框影响导致一起关闭了。type改为1后解决。

addDialog = layer.open({
	type: 1,
	title: '添加学校',
	content: $('#tpl-add').html(),
	move: false,
	success: function() {
	  form.render(null, 'addform');
	}
});

5. layui 表单两个按钮都触发了submit
layui表单中的按钮默认type是submit,所以都会触发submit事件。当我们需要一个确认按钮和一个取消按钮时,需要将取消按钮的type设置为button


你可能感兴趣的:(WEB前端)