前言

这一篇讲解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">&#xe67c;</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)
}