LayUI 问题 & 解决

LayUI中某些插件使用需引入,如select下拉框,form表单,日期,table等!!!

(1) 表格table中的问题:

1. checkbox:

// 获取选中行
// var checkStatus = table.checkStatus('idTable'); //idTest 即为基础参数lay-data id属性 对应的值
// 注意：(1) table必须有 lay-data="{id: 'idTable'}" (2) table.render({})方法里要有id: 'idTable' 字段属性
table.on('checkbox(test)', function(obj){
	console.log(obj)
});
// 禁用方法
function stop() {
   	console.log(123)
   	var table = layui.table;

   	var checkStatus = table.checkStatus('idTable'); //idTest 即为基础参数 id 对应的值

   	console.log(checkStatus.data) //获取选中行的数据
   	console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
   	console.log(checkStatus.isAll ) //表格是否全选
}

2. layData:

// 日期插件会默认加载一个属性 lay-key="1" ,如果页面中使用多个日期插件,这个属性相同时另一个日期插件就不能弹出

3. 弹框中的规则验证书写:

如果想要使用弹窗层自带的确认取消按钮,去提交form表单内容,需如下步骤:

在每一个form表单中标签之前, 添加一个隐藏的按钮

	<button class="authorityAddOrUpdateBtn" lay-submit style="display: none;"></button>

class 属性值全局唯一, 包含 lay-submit display:none

在弹框页面

layer.open({
	yes: function (index, div) {
    	var form = layui.form;
   		var submited = $(".authorityAddOrUpdateBtn");   // 找到刚才的按钮
    	submited.click();   // 触发隐藏按钮的点击事件
	}
}

自定义验证可以在全局js文件里写

// 表单验证
layui.use('form', function () {
	var form = layui.form;
  	form.render();
  	// 开始表单自定义验证
  	form.verify({
    	// 必填项
    	title: function(value){ //value：表单的值、item：表单的DOM对象
    		if(value == ""){
        		return '必填项不能为空哈哈!';
        	}
    	}
 	});
});

若想要必填项前面有小星星提示,可以引入阿里矢量图标库 iconfont,然后:

<-- 比如输入框,就在label前加上这句话就行 -->
<label class="layui-form-label"><i class="iconfont icon--bitian"></i>姓名：</label>

4.找不到lay样式，获取js等

Layui hint: element is not a valid module

解决：css或者js多引入或者重复。例如在每个jsp文件中多引入一次common.js

5.form表单input、textarea等表单的禁用状态

添加类名 layui-btn-disabled 表示禁用

<input type="text" name="" placeholder="" class="layui-btn-disabled layui-input" value="">

在这里插入图片描述
2. 添加原生属性 readonly 。

<input type="text" readonly placeholder="" class="layui-input inp-code" value="">

LayUI使用中遇到的问题 & 解决办法

LayUI 问题 & 解决

(1) 表格table中的问题:

猜你喜欢