Layui (一) |
您所在的位置：网站首页 › vivos1手机如何设置经典桌面 › Layui (一) |
Layui (一)
|
文章已参与[新人创作礼]活动，一起开启掘金创作之路. 微信公众号：秀基宝。如有问题，请后台留言，反正我也不会听。 前言这一篇讲解Layui使用中的小技巧分为两大类：小技巧、工具 一、表单 1.1、form表单on监听将刷新页面刷新了 form.on('submit(formSingSave)', function (data) { return false;// 不刷新 }); 复制代码这里默认刷新return true，只有返回false才不刷新 1.2、layui清空,重置表单数据的实例表单 主题内容 复制代码 //监听提交 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、下拉动态数据 请选择 ${item.typeName} 复制代码 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、下拉框校验不通过 请选择 ${item.name} 复制代码注意：每一个option都要包含 value，并且值要为空 1.6、表单input替换文本 规则 填数字表示获取的心豆 复制代码效果 后端返回数据：manageTypeList var mfrMap = new Map(); mfrMap.set(${item.pid},"${item.typeName}") 复制代码 {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 '待上架'; }else if(value.status == '2'){ return '已上架'; }else if(value.status == '3'){ return '已下架'; }else{ return value.status; } } } 复制代码 2.3、操作动态列 {{# if(d.status == 2){ }} 下架 {{# } else { }} 上架 {{# } }} 编辑 删除 复制代码绑定上面 barOperation {fixed: 'right', title: '操作', toolbar: '#barOperation', width: 180} 复制代码 2.4、操作静态列 { fixed: 'right', width: 150, align: 'center', templet: function () { return ' 编辑\ 删除'; } } 复制代码 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) { // 逻辑 }) }, 复制代码 四、上传 上传图片 复制代码 // 上传 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部分 规则 按自然周每周结算并发放心豆，不跨月结算； 每周统计当月的累计充值金额，根据月累计金额所在档位，计算月返利心豆，月返利心豆减去当月已发放心豆，得到结算周应发放心豆。 结算日 周一 周二 周三 周四 周五 周六 周七 复制代码js逻辑部分思想：默认加一行，加一行点击事件和减一行事件相应触发，使用append拼加 let enuParam_index = 0; $(function () { // 默认加载一行 $("#divContribution").append(enuParam()); }) /** * 加一行 */ function addEnuParam() { if (document.getElementById("divContribution1").childNodes.length 6) { divContribution.removeChild(document.getElementById(ids)) } else { layer.msg("至少保留一个"); } } /** * 初始化数据 * @returns {string} */ function enuParam() { let enuParamIndex = enuParam_index return '' + ' ' + ' 每月累计金额' + ' ' + ' ' + ' ' + ' ' + ' 至' + ' ' + ' ' + ' ' + ' ' + ' 返利率' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' '; } 复制代码 5.2、获取当前数据集 /** * 获取加一行减一行数据 * @returns {[]} */ function getColumWhereOneData() { const columnWhereData = [] for (let i = 0; i 0 && enuParam_index |
【本文地址】
今日新闻 |
推荐新闻 |