layui小问题
欢迎来到生南星，让代码在青春里翻滚。
1. layui表格内放置图片，并可以点击放大。
表头：
cols: [[ //表头
{
field: 'brand_img_url',
title: '图片',
sort: true,
templet: function(d){
return '<div οnclick="show_img(this)" ><img src="'+d.brand_img_url+'" alt="" width="50px" height="50px"></a></div>';
}
}
]]cdn引入jQuery：
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>注 cdn网址：https://www.jsdelivr.com/
方法：
//显示大图片
function show_img(t) {
var t = $(t).find("img");
//页面层
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['80%', '80%'], //宽高
shadeClose: true, //开启遮罩关闭
end: function (index, layero) {
return false;
},
content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
});
}2. layui switch 开关监听，弹出确定状态转换。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="static/layui/css/layui.css">
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-input-block">
<input type="checkbox" name="zzz" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭">
</div>
</div>
</form>
<script src="static/layui/layui.js"></script>
<script>
//Demo
layui.use(['form','jquery','layer'], function () {
var form = layui.form;
var jquery = layui.jquery;
var layer = layui.layer;
//监听switch
form.on('switch(switchTest)', function (data) {
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //开关是否开启，true或者false
console.log(data.value); //开关value值，也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
var x=data.elem.checked;
layer.open({
content: 'test'
,btn: ['确定', '取消']
,yes: function(index, layero){
data.elem.checked=x;
form.render();
layer.close(index);
//按钮【按钮一】的回调
}
,btn2: function(index, layero){
//按钮【按钮二】的回调
data.elem.checked=!x;
form.render();
layer.close(index);
//return false 开启该代码可禁止点击该按钮关闭
}
,cancel: function(){
//右上角关闭回调
data.elem.checked=!x;
form.render();
//return false 开启该代码可禁止点击该按钮关闭
}
});
return false;
});
});
</script>
</body>
</html>3. 阻止form表单提交的时候页面刷新
layui表单提交 每次点击都会刷新页面，错误信息也不提示。
解决办法：把<button></button>标签改为<input type="button">或者在<button>中添加属性 type="button"
4. layui页面跳转。
// 关闭当前页面
element.tabDelete('layadmin-layout-tabs', '/user/administrators/store');
// 跳转页面
location.hash = '/user/administrators/storePrice';5. layui表格-单元格合并
定义方法：
//定义方法--单元格合并
function merge(res) {
var data = res.data;
var mergeIndex = 0;//定位需要添加合并属性的行数
var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
var columsName = ['type_name'];//需要合并的列名称
var columsIndex = [0];//需要合并的列索引值
for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
mark += 1;
tdPreArr.each(function () {//相同列的第一列增加rowspan属性
$(this).attr("rowspan", mark);
});
tdCurArr.each(function () {//当前行隐藏
$(this).css("display", "none");
});
}else {
mergeIndex = i;
mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
}
}
mergeIndex = 0;
mark = 1;
}
}
})调用：
table.render({
...
,done:function(res){
merge(res);
}
})涨知识：
关于CSS穿透：让div置于顶层但不影响下方元素点击事件
由于定位置于最顶层的div一般会影响下方元素的操作，如点击事件等等，这时就需要css穿透，在顶层div中加如下代码：
/* 元素遮罩层不遮挡下方元素的代码 */
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-01-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读