前言
这一篇讲解Layui使用中的小技巧分为两大类:小技巧、工具
一、表单
1.1、form表单on监听将刷新页面刷新了
form.on('submit(formSingSave)', function (data) {
return false;// 不刷新
});
这里默认刷新return true,只有返回false才不刷新
1.2、layui清空,重置表单数据的实例
表单
<form class="layui-form" action="" lay-filter="addGoodsForm" id="addGoodsForm">
主题内容
</form>
//监听提交
form.on('submit(upGoodsBtn)', function(data){
var formDate = data.field;
$.ajax({
success: function (data) {
if (data.success){
top.layer.msg("商品发布成功了,等待管理员审核", {time:3000});
// 清空表单 (“addGoodsForm”是表单的id)
$("#addGoodsForm")[0].reset();
layui.form.render();
}else{
top.layer.msg("商品发布失败,请重新发布吧!", {time:3000});
// 清空表单 (“addGoodsForm”是表单的id)
$("#addGoodsForm")[0].reset();
layui.form.render();
}
}
});
return false;
});
1.3、下拉动态数据
<select name='search_user_type'>
<option value='-1'>请选择</option>
<#if (value.manageTypeList)??>
<#list value.manageTypeList as item>
<option value="${item.pid ?c}">
${item.typeName}
</option>
</#list>
</#if>
</select>
1.4、修改赋值
// data是监听行工具事件的data
form.val("addEditFormFilter", {
"type": data.type
, "name": data.name
, "pid": data.pid
, "value": data.value
, "credits": data.credits
, "convertibleQuantity": data.convertibleQuantity
, "sort": data.sort
, "addUpDate": addUpDate
});
1.5、下拉框校验不通过
<select name='typeName' id="typeName" required lay-verify="required" style="width: 250px;">
<option value=''>请选择</option>
<#if (value.commodityList)??>
<#list value.commodityList as item>
<option value="${item.pid ?c}">${item.name}</option>
</#list>
</#if>
</select>
注意:每一个option都要包含 value,并且值要为空
1.6、表单input替换文本
<label class="layui-form-label">规则</label>
<div class="layui-form-mid layui-word-aux">填数字表示获取的心豆</div>
效果
1.7.1、修改表单lable宽度
<div class="layui-form-item">
<div class="layui-inline" style="width: 330px">
<label class="layui-form-label layui-required" style="width: 110px">一二级总金额</label>
<div class="layui-input-block">
<input required lay-verify="required|number" class="layui-input"/>
</div>
</div>
<div class="layui-inline" style="width: 330px">
<label class="layui-form-label layui-required" style="width: 110px">一级月度奖励</label>
<div class="layui-input-block">
<input required lay-verify="required|number" class="layui-input"/>
</div>
</div>
</div>
1.7.2、修改表单lable高度
.layui-form-select dl {
max-height: 200px;
}
二、表格
2.1、动态列数据翻译
后端返回数据:manageTypeList
var mfrMap = new Map();
<#if (value.manageTypeList)??>
<#list value.manageTypeList as item>
mfrMap.set(${item.pid},"${item.typeName}")
</#list>
</#if>
{field: 'type', title: '商品类型', width: 100, templet: function (val) {
return mfrMap.get(val.type);
}}
2.2、静态列翻译
{field: 'status', title: '状态', width: 100,
templet: function(value){
if(value.status == '1'){
return '<span style="color: #5FB878;">待上架</span>';
}else if(value.status == '2'){
return '<span style="color: #FF5722;">已上架</span>';
}else if(value.status == '3'){
return '<span style="color: #FFB800;">已下架</span>';
}else{
return value.status;
}
}
}
2.3、操作动态列
<script type="text/html" id="barOperation">
{{# if(d.status == 2){ }}
<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="offShelf">下架</a>
{{# } else { }}
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="onShelf">上架</a>
{{# } }}
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
绑定上面 barOperation
{fixed: 'right', title: '操作', toolbar: '#barOperation', width: 180}
2.4、操作静态列
{
fixed: 'right', width: 150, align: 'center', templet: function () {
return ' <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>\
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
}
}
2.5、自定义后台返回的数据格式
, parseData: function (res) { //res 即为原始返回的数据
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": res.data.content //解析数据列表
}
}
三、弹框
3.1、弹框介绍
layer.open({
// 基本层类型:0(信息框,默认)1(页面层)2(iframe层,也就是解析content)3(加载层)4(tips层)
type: 1, // 当type: 2时就是url
title: "标题",
content: "内容/url",
area: ['733px', '450px'], // 宽高:如果是100%就是满屏
offset: 'auto', // 坐标:auto(默认坐标,即垂直水平居中)
btn: ['按钮1', '按钮2'], // 按钮:按钮1的回调是yes(也可以是btn1),而从按钮2开始,则回调为btn2: function(){},以此类推
closeBtn: 1, // 关闭按钮:layer提供了两种风格的关闭按钮,可通过配置1和2来展示,如果不显示,则0
shade: 0.3, // 遮罩:默认:0.3透明度的黑色背景('#000')
shadeClose: false, // 是否点击遮罩关闭:默认:false
time: 0, // 自动关闭所需毫秒:默认:0不会自动关闭
maxmin: false, // 最大最小化:默认:false
fixed: true, // 固定:默认:true
resize: true, // 是否允许拉伸:默认:true
zIndex: 19891014, // 层叠顺序:默认:19891014,一般用于解决和其它组件的层叠冲突
// 层弹出后的成功回调方法:layero前层DOM,index当前层索引
success: function(layero, index){},
// 第一个按钮事件,也可以叫btn1
yes: function (index, layero) {},
btn2: function (index, layero) {
layer.close(index);
},
// 右上角关闭按钮触发的回调:默认会自动触发关闭。如果不想关闭,return false即可
cancel: function(index, layero){
if(layer.confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭
layer.close(index);
}
return false;
},
// 层销毁后触发的回调:无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数。
end: function(){},
// 最大化后触发的回调:携带一个参数,即当前层DOM
full: function(layero){},
// 最小化后触发的回调:携带一个参数,即当前层DOM
min: function(layero){},
// 还原后触发的回调:携带一个参数,即当前层DOM
restore: function(layero){},
});
3.2、给弹框提交增加事件
success: function (layero,index) {
// 添加form标识
layero.addClass('layui-form');
// 将保存按钮改变成提交按钮
layero.find('.layui-layer-btn0').attr({
'lay-filter': 'formSub',
'lay-submit': ''
});
form.render();
},
yes: function (index, layero) {
form.on('submit(formSub)', function (data) {
// 逻辑
})
},
四、上传
<button type="button" class="layui-btn" id="uploadId">
<i class="layui-icon"></i>上传图片
</button>
// 上传
let uploadInst = upload.render({
elem: '#uploadId' //绑定元素
, url: base + '/files/upload' //上传接口
, before: function (obj) {
//预读本地文件示例,不支持ie8
obj.preview(function (index, file, result) {
});
}
, done: function (res) {
let imgUrlNew = imgUrl + res.value.filepath
imgVal(imgUrlNew)
//上传完毕回调
layer.msg('上传成功')
}
, error: function () {
//请求异常回调
layer.msg('上传失败')
}
});
五、表单加一行,减一行
5.1、实现代码
html部分
<#--好友贡献-->
<div id="divContribution" style="display: none">
<div>
<label class="layui-form-label">规则</label>
<label style="color: red;">按自然周每周结算并发放心豆,不跨月结算;</label>
<label style="color: red;">每周统计当月的累计充值金额,根据月累计金额所在档位,计算月返利心豆,月返利心豆减去当月已发放心豆,得到结算周应发放心豆。</label>
<br/>
<br/>
</div>
<div class="layui-form-item">
<label class="layui-form-label layui-required">结算日</label>
<div class="layui-input-inline">
<select name='add_settlement_day' required lay-verify="required" lay-filter="add_settlement_day"
style="width: 200px">
<option value='1'>周一</option>
<option value='2'>周二</option>
<option value='3'>周三</option>
<option value='4'>周四</option>
<option value='5'>周五</option>
<option value='6'>周六</option>
<option value='7'>周七</option>
</select>
</div>
</div>
</div>
js逻辑部分思想:默认加一行,加一行点击事件和减一行事件相应触发,使用append拼加
let enuParam_index = 0;
$(function () {
// 默认加载一行
$("#divContribution").append(enuParam());
})
/**
* 加一行
*/
function addEnuParam() {
if (document.getElementById("divContribution1").childNodes.length < 10) {
++enuParam_index;
$("#divContribution1").append(enuParam());
} else {
layer.msg("最多可以添加五个");
}
}
/**
* 减一行
* @param id
*/
function delEnuParam(id) {
let idNew = id.split("_")
let ids = idNew[1] + "_" + idNew[2]
let divContribution = document.getElementById("divContribution1")
if (divContribution.childNodes.length > 6) {
divContribution.removeChild(document.getElementById(ids))
} else {
layer.msg("至少保留一个");
}
}
/**
* 初始化数据
* @returns {string}
*/
function enuParam() {
let enuParamIndex = enuParam_index
return '<div id="enuParam_' + enuParamIndex + '" class="layui-form-item" style="margin-top: 2px">' +
' <div class="layui-inline" style="width: 250px">' +
' <label class="layui-form-label layui-required" style="width: 120px">每月累计金额</label>' +
' <div class="layui-input-block">' +
' <input name="add_min_amount" placeholder="数字" required lay-verify="required|number" class="layui-input" style="width: 100px"/>' +
' </div>' +
' </div>' +
' <div style="display: inline-block;">至</div>' +
' <div class="layui-inline">' +
' <input name="add_max_amount" placeholder="数字" required lay-verify="required|number" class="layui-input" style="width: 100px"/>' +
' </div>' +
' <div class="layui-inline" style="width: 180px">' +
' <label class="layui-form-label layui-required" style="width: 50px">返利率</label>' +
' <input name="add_rabate_rate" placeholder="百分比" required lay-verify="required|verifPercentage" class="layui-input" style="width: 100px"/>' +
' </div>' +
' <div class="layui-inline">' +
' <i onclick="addEnuParam()" class="layui-icon layui-icon-addition" style="font-size: 20px; color: #1E9FFF;"></i>' +
' <i onclick="delEnuParam(id)" id="del_enuParam_' + enuParam_index + '" class="layui-icon layui-icon-subtraction" style="font-size: 20px; color: #FF5722;"></i>' +
' </div>' +
' </div>';
}
5.2、获取当前数据集
/**
* 获取加一行减一行数据
* @returns {[]}
*/
function getColumWhereOneData() {
const columnWhereData = []
for (let i = 0; i <= enuParam_index; i++) {
columnWhereData.push({
'addMinAmount': $("#enuParam_" + i).find('input[name="add_min_amount"]').val(),
'addMaxAmount': $("#enuParam_" + i).find('input[name="add_max_amount"]').val(),
'addRabateRate': $("#enuParam_" + i).find('input[name="add_rabate_rate"]').val()
})
}
return columnWhereData;
}
5.3、回显数据集
enuParam_index = 0
// 好友贡献
copeDiv('divContribution', 'divContribution1', 'div-content');
// 转json
let valueJson = JSON.parse(data.valueJson)
// 结算日
const columnWhereData = valueJson.columnWhereData
for (let i = 0; i < columnWhereData.length; i++) {
if (i > 0 && enuParam_index <= columnWhereData.length) {
addEnuParam()
}
$("#enuParam_" + i).find('input[name="add_min_amount"]').val(columnWhereData[i].addMinAmount)
$("#enuParam_" + i).find('input[name="add_max_amount"]').val(columnWhereData[i].addMaxAmount)
$("#enuParam_" + i).find('input[name="add_rabate_rate"]').val(columnWhereData[i].addRabateRate)
}
六、下拉控制显示隐藏一行
html部分
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label layui-required">分类</label>
<div class="layui-input-block">
<select name='add_type' lay-filter="add_type" required lay-verify="required|number">
<option value='1'>好友邀请</option>
<option value='2'>好友贡献</option>
<option value='3'>分享攻略</option>
<option value='4'>bug反馈</option>
<option value='5'>玩法建议</option>
<option value='6'>月度</option>
</select>
</div>
</div>
</div>
<div id="div-content">
</div>
<#--通用规则-->
<div id="divInput" style="display: none">
</div>
<#--好友贡献-->
<div id="divContribution" style="display: none">
</div>
<#--月度-->
<div id="divMonthly" style="display: none">
</div>
js部分
// 切换类别
form.on('select(add_type)', function (data) {
let oldId = ''
let newId = ''
if (data.value === '2') {
oldId = 'divContribution'
newId = 'divContribution1'
} else if (data.value === '6') {
oldId = 'divMonthly'
newId = 'divMonthly1'
} else {
oldId = 'divInput'
newId = 'divInput1'
}
copeDiv(oldId, newId, 'div-content');
// 刷新
formReset()
})
/**
* 某一个div里面复制div,删除原来节点
* @param oldId
* @param newId
* @param parenId
* @param hideIds
*/
function copeDiv(oldId, newId, parenId, hideIds) {
// 删除节点
$('#'+parenId).html('')
let sourceNode = document.getElementById(oldId)
// 克隆节点
let clonedNode = sourceNode.cloneNode(true);
// 修改一下id 值,避免id 重复
clonedNode.setAttribute("id", newId);
clonedNode.setAttribute("data-id", "data-"+newId);
// 在父节点插入克隆的节点
document.getElementById(parenId).appendChild(clonedNode)
}