开发笔记
推荐链接
查看layui的版本
在控制台查看版本:在页面上使用layui框架时,可以在浏览器的控制台中查看layui的版本信息。在 Chrome 浏览器中,可以按 F12 打开控制台,然后切换到 Console 标签,输入 “layui” 并回车,控制台会显示 layui 的版本号。
子页面代码传递到父页面
//layui 2.3.0
// 子页面代码
// 触发自定义事件并传递数据
var data = {name: '张三', age: 18};
parent.layui.event('myEvent', 'myEvent', data);
// 父页面代码
layui.onevent('myEvent', 'myEvent', function(data){
console.log(data); // 输出 {name: '张三', age: 18}
});
// 子页面重载父页面表格
parent.layui.table.reload('表格的lay-filter');
//windows中进行子页面向父页面传递数据
//在子页面中,可以使用 window.postMessage() 方法向父页面发送消息,并在父页面中通过监听 message 事件来接收消息。
// window.parent.postMessage(data, targetOrigin) 中,targetOrigin 参数指定了消息的目标来源。该参数可以是一个具体的 URL,或者是特定的字符串,如果 targetOrigin 参数设置为具体的 URL,那么只有与该 URL 相匹配的父窗口才能接收到消息。例如,targetOrigin 参数设置为 "https://example.com",则只有来自该 URL 的父窗口才能接收到消息。如果 targetOrigin 参数设置为 "*"(星号),则表示消息可以被任意父窗口接收,无论来源是什么。这样做存在一定的安全风险,因为任何窗口都可以监听并接收消息。
// 子页面发送消息给父页面,
var data = { key: 'value' };
window.parent.postMessage(data, '*');
// 父页面监听 message 事件来接收消息
window.addEventListener('message', function(event) {
var data = event.data; // 接收到的数据
console.log(data);
});
数据表格删除功能之后的补充检查(可以用作判断是否还有数据)
// 将导入的数据存入到数据库里面
let WefdlPurchase = [];
// $.isEmptyObject() 函数用于检查对象是否为空(不包含任何属性)。
$.each(table.cache.ContractNumberTable,function (index,value){
// console.log(index,value.length,$.isEmptyObject(value),value);
if(!($.isEmptyObject(value))){
WefdlPurchase.push(value)
}
})
动态执行 select 选择框的 事件
layui.event.call(elem,'form','select(lay-filter)',data);
//elem,表示事件函数中的this,
//form,表示模块,固定值
/'select(lay-filter),需要触发的filter
//data,事件函数接受的参数
form.on('select(lay-filter)',function(data){
//data 就是上面的
//this就是上面的elem
})
//正常情况下很少使用完整的data,只会用到 data.value,那么可以伪造一个对象来传过去
var data = {value: value};
layui.event.call($('#ID'),'form','select(lay-id)',{data});
//子页面控制父页面select 则parent.layui.event.call
动态设置是否必填
//增加必填
$('#id').attr('lay-verify', 'required');
//删除必填
$('#id').removeAttr('lay-verify');
获取表格数据
// 里面的id也可以换成表格的elem
let data = layui.table.cache[id]
console.log(data);
表格无刷新修改某一行数据
table.on('edit(tableContent)', function (obj) {
console.log(obj.value); // 得到编辑修改后的值
console.log(obj.field); // 得到编辑的字段名
console.log(obj.data); // 得到修改后该行的数据
var dataIndex = obj.data.LAY_TABLE_INDEX; // 要修改的行的索引,根据实际情况进行设置
//如果obj.data里面没有LAY_TABLE_INDEX这个键值就可以使用下面这个
//var dataIndex = $(obj.tr).attr("data-index");
var tableRow = document.querySelector('tr[data-index="' + dataIndex + '"]'); // 获取指定索引的行元素
if (tableRow) {
var tableCells = tableRow.querySelectorAll('td[data-field]'); // 获取行中带有 data-field 属性的单元格元素
tableCells.forEach(function(cell) {
var field = cell.getAttribute('data-field'); // 获取单元格的字段名
var cellValue = cell.querySelector('.layui-table-cell').innerText; // 获取单元格的值
console.log('cell',cellValue);
// 在这里根据需要修改单元格的值
if (field === 'xxxx') {
// 修改字段对应的单元格值
cell.querySelector('.layui-table-cell').innerText = 'New Value';
}
});
//确定需要修改的字段名称(不用循环处理)
//var cell = tableRow.querySelector('td[data-field="字段名称"]');
//var cellValue = cell.querySelector('.layui-table-cell').innerText;
//console.log('123',cell,cellValue);
//cell.querySelector('.layui-table-cell').innerText = '新的值';
//如果不满意用户输入的值,可以置空
//$(this).val(0);
}
})
表单在iframe页面关闭自身
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
开启复选框并动态设置选中
//这句才是真正选中,通过设置关键字LAY_CHECKED为true选中
obj.data[i]["LAY_CHECKED"] = 'true';
//在表格中也可以通过这样设置复选框
if (!obj.data.hasOwnProperty("LAY_CHECKED")) {
obj.data.LAY_CHECKED = true;
//如果上面的LAY_CHECKED 不起作用则解除下面的注释
//layui.table.cache.table[dataIndex].LAY_CHECKED = true;
}
//下面三句是通过更改css来实现选中的效果,主要是LAY_TABLE_INDEX这个键值,其他都不重要
var index= obj.data[i]['LAY_TABLE_INDEX'];
$('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
$('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
表格在done回调中修改表格数据
res.data.forEach(function (obj2) {
obj2.LAY_CHECKED = true;
$('tr[data-index=' + LAY_TABLE_INDEX + '] input[type="checkbox"]').prop('checked', true);
$('tr[data-index=' + LAY_TABLE_INDEX + '] input[type="checkbox"]').next().addClass('layui-form-checked');
//data-field="htsl" 这个需要注意
let htsl = document.querySelector('tr[data-index="' + LAY_TABLE_INDEX + '"] td[data-field="htsl"]');
htsl.getElementsByClassName('layui-table-cell')[0].innerText = value;
})
认为原本数据表格的edit功能不好,通过 templet 进行重写
<style>
.sel{
font-size: 12px;
height: 28px;
}
</style>
<!--调整分数-->
<script type="text/html" id="AdjustScore">
<input type="text" name="AdjustScore" class="form-control sel" data-id="AdjustScore-{{d.ID}}" value="{{d.Adjust_Score}}" autocomplete="off" placeholder="分数" onchange = "if(/\D/.test(this.value)){layer.alert('只能输入数字');this.value='';}">
<span data-id="AdjustScore-{{d.ID}}">{{d.Adjust_Score || 0}}</span>
</script>
<!--调整备注-->
<script type="text/html" id="AdjustRemark">
<input type="text" name="AdjustRemark" class="form-control sel" data-id="AdjustRemark-{{d.ID}}" value="{{d.Adjust_Remark}}" autocomplete="off" placeholder="备注" >
<span data-id="AdjustRemark-{{d.ID}}">{{d.Adjust_Remark || ""}}</span>
</script>
table.on('checkbox(tableContent)', function(obj){
// console.log(obj); //当前行的一些常用操作集合
// console.log(obj.checked); //当前是否选中状态
// console.log(obj.data); //选中行的相关数据
// console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one
var id = obj.data.ID;
var checkStatus = table.checkStatus('table'),
data = checkStatus.data ;
if(obj.checked){
for(let i=0;i<data.length;i++){
$("input[data-id='AdjustScore-"+id+"']").show();
$("span[data-id='AdjustScore-"+id+"']").hide();
$("input[data-id='AdjustRemark-"+id+"']").show();
$("span[data-id='AdjustRemark-"+id+"']").hide();
}
}else{
$("input[data-id='AdjustScore-"+id+"']").hide();
$("span[data-id='AdjustScore-"+id+"']").show();
$("input[data-id='AdjustRemark-"+id+"']").hide();
$("span[data-id='AdjustRemark-"+id+"']").show();
}
//用来控制显隐
//控制按钮是否能被点击
if(data.length === 0) {
$("a[data-type='saveEdit']").attr("class","btn btn-warning btn-edit btn-disabled disabled");
}else if(data.length > 1){
$("a[data-type='saveEdit']").attr("class","btn btn-warning btn-edit btn-disabled disabled");
} else{
$("a[data-type='saveEdit']").attr("class","btn btn-warning btn-edit");
}
});
验证规则
单选框必填限制
radioRequired: function(value,item){
var verifyName=$(item).attr('name'),
verifyType=$(item).attr('type');
let radio_checked = false;
$('input[name= "' + verifyName +'"]').each(function() {
if ($(this).is(":checked")) {
radio_checked = true;
}
});
if (!radio_checked) {
var focusElem = $('input[name= "' + verifyName +'"]').next().find('i.layui-anim.layui-icon');//焦点元素
focusElem.css(verifyType=='radio'?{"color":"#FF5722"}:{"border-color":"#FF5722"});
//对非输入框设置焦点
focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {
focusElem.css(verifyType=='radio'?{"color":""}:{"border-color":""});
}).focus();
return '必填项不能为空';
}
},
多选框必填限制
checkboxRequired: function(value, item) {
var verifyName=$(item).attr('name'),
verifyType=$(item).attr('type');
let checkbox_checked = false;
$('input[name= "' + verifyName +'"]').each(function() {
if ($(this).is(":checked")) {
checkbox_checked = true;
}
});
if (!checkbox_checked) {
var focusElem = $('input[name= "' + verifyName +'"]').next().find('i.layui-icon-ok.layui-icon');//焦点元素
focusElem.css(verifyType=='checkbox'?{"color":"#FF5722"}:{"border-color":"#FF5722"});
//对非输入框设置焦点
focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {
focusElem.css(verifyType=='checkbox'?{"color":""}:{"border-color":""});
}).focus();
return '必填项不能为空';
}
}