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

发布时间：2024-12-17 23:23

解决问题的能力：遇到问题，不回避，寻找解决办法 #生活知识# #职场指南#

LayUI 问题 & 解决

LayUI中某些插件使用需引入,如select下拉框,form表单,日期,table等!!! 1 (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 ) //表格是否全选 }

1234567891011121314151617'

2. layData:

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

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

如果想要使用弹窗层自带的确认取消按钮,去提交form表单内容,需如下步骤: 1 在每一个form表单中标签之前, 添加一个隐藏的按钮

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

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

在弹框页面

layer.open({yes: function (index, div) {var form = layui.form;var submited = $(".authorityAddOrUpdateBtn"); // 找到刚才的按钮submited.click(); // 触发隐藏按钮的点击事件} } 1234567 自定义验证可以在全局js文件里写

// 表单验证 layui.use('form', function () {var form = layui.form;form.render();// 开始表单自定义验证form.verify({// 必填项title: function(value){ //value：表单的值、item：表单的DOM对象if(value == ""){return '必填项不能为空哈哈!';}}}); }); 1234567891011121314 若想要必填项前面有小星星提示,可以引入阿里矢量图标库 iconfont,然后:

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

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

Layui hint: element is not a valid module 1

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

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

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

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

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