Problems encountered in the use LayUI & solutions

LayUI problem solving &

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

(1) table table in question:

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. Writing rule verification box shells:

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

1. Prior to label each form form, add a hidden button

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

globally unique class attribute value, comprising a lay-submit display: none

2. In the bomb box page

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

3. Custom validation can be written in the global js file

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

4. If you want to have a little star in front of mandatory tips can be introduced Ali vector icon library iconfont, then:

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

4. style lay not find, access and other js

Layui hint: element is not a valid module

Solve: css or js introduced or multi-repeat. For example, in each jsp file more than once introduced common.js

5.form form input, textarea and other forms of disabled

1. Add the class name layui-btn-disabled to disable

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

2. Add the primary attribute readonly.

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