改造 layui 插件

44 篇文章 0 订阅
21 篇文章 0 订阅

 文件上传篇:

 文件上传模版

    uploadK.render({
        elem: '#dimissioCertificate' //绑定元素
        , url: ctx + '/editWorkExperience' //上传接口
        , field: 'dimissioCertificate'
        , auto: false
        , bindAction: '#submitButton' //指向一个按钮触发上传
        , accept: 'images'
        , acceptMime: 'image/*'
        , exts: 'jpg|png|gif|bmp|jpeg'
        , before: function (obj) {
            if(layui.form.verifyForm("editForm")){
                this.data=formToJson($('#editForm').serializeArray());
                if (checkDeviceK().ie <= 9) {
                    var data_IE = this.data;
                    for (var i in data_IE) {
                        var info = typeof(data_IE[i]) === "function" ? data_IE[i]() : data_IE[i];
                        $('.layui-upload-form').append('<input type="hidden" name="' + i + '" value="' + info + '">')
                    }
                }
            }else {
                return false;
            }
        }
        , progress: function (n, elem) {

        }
        , done: function (res, index, upload) {
            layerK.closeAll('loading'); //关闭loading
            if(res.status>0){
                parent.timeOut("保存成功!");
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            }
            //上传完毕回调
        }
        , error: function (index, upload) {
            //请求异常回调
            layerK.closeAll('loading'); //关闭loading
        }
    });

 修改layui.each(o, function (e, o) {}解决上传文件未选择时也能提交表单内的其他数据;

var lengthComputable=true;
r.prototype.lengthComputableK = function () {
        return lengthComputable;
    }
r.prototype.eachK = function (e, t) {
        /**/
        var n, r = this;
        if ("function" != typeof t) return r;
        if (e = e || [], e.constructor === Object) {
            for (n in e) {
                if (t.call(e[n], n, e[n])) {
                    break
                }
            }
        } else if (e = e || [], e.constructor == FileList) {
            lengthComputable=false;
            t.call(null, null, null)
        } else for (n = 0; n < e.length && !t.call(e[n], n, e[n]); n++) ;
        return r
    }, 
p.prototype.upload = function (e, i) {
        var n, a = this, l = a.config, r = a.elemFile[0], u = function () {
            var i = 0, n = 0, o = e || a.files || a.chooseFiles || r.files, u = function () {
                l.multiple && i + n === a.fileLength && "function" == typeof l.allDone && l.allDone({
                    total: a.fileLength,
                    successful: i,
                    aborted: n
                })
            };
            layui.eachK(o, function (e, o) {
                var r = new FormData;
                r.append(l.field, o), layui.each(l.data, function (e, t) {
                    t = "function" == typeof t ? t() : t, r.append(e, t)
                });
                var c = {
                    url: l.url,
                    type: "post",
                    data: r,
                    contentType: !1,
                    processData: !1,
                    dataType: "json",
                    headers: l.headers || {},
                    success: function (t) {
                        i++, d(e, t), u()
                    },
                    error: function () {
                        n++, a.msg("请求上传接口出现异常"), m(e), u()
                    }
                };
                "function" == typeof l.progress && (c.xhr = function () {
                    var e = t.ajaxSettings.xhr();
                    return e.upload.addEventListener("progress", function (e) {
                        if (e.lengthComputable&&layui.lengthComputableK()) {
                            var t = Math.floor(e.loaded / e.total * 100);
                            l.progress(t, l.item[0], e)
                        }
                    }), e
                }), t.ajax(c)
            })
        }, 
r.prototype.eachK = function (e, t) {
        var n, r = this;
        if ("function" != typeof t) return r;
        if (e = e || [], e.constructor === Object) {
            for (n in e){
                if (t.call(e[n], n, e[n])){
                    break
                }
            }
        }else if(e = e || [], e.constructor==FileList){
            //e.lengthComputable=false;
            t.call(null, null, null)
        }
        else for (n = 0; n < e.length && !t.call(e[n], n, e[n]); n++) ;
        return r
    },

 修改if (v = 0 === v.length ? r.value.match(/[^\/\\]+\..+/g) || [] || "" : v) {}解决未选择上传文件时before方法不执行,(在before函数内可以进行数据验证);

if (v = 0 === v.length ? r.value.match(/[^\/\\]+\..+/g) || [] || "" : v) {
            switch (l.accept) {
                case"file":
                    if (h && !RegExp("\\w\\.(" + h + ")$", "i").test(escape(v))) return a.msg("选择的文件中包含不支持的格式"), r.value = "";
                    break;
                case"video":
                    if (!RegExp("\\w\\.(" + (h || "avi|mp4|wma|rmvb|rm|flash|3gp|flv") + ")$", "i").test(escape(v))) return a.msg("选择的视频中包含不支持的格式"), r.value = "";
                    break;
                case"audio":
                    if (!RegExp("\\w\\.(" + (h || "mp3|wav|mid") + ")$", "i").test(escape(v))) return a.msg("选择的音频中包含不支持的格式"), r.value = "";
                    break;
                default:
                    if (layui.each(v, function (e, t) {
                        RegExp("\\w\\.(" + (h || "jpg|png|gif|bmp|jpeg$") + ")", "i").test(escape(t)) || (n = !0)
                    }), n) return a.msg("选择的图片中包含不支持的格式"), r.value = ""
            }

 修改 if ("choose" !== i && !l.auto || (l.choose && l.choose(g), "choose" !== i)) {}里面的内容,可以在before函数内使用return false;进行终止上传动作;

y = function () {
            if ("choose" !== i && !l.auto || (l.choose && l.choose(g), "choose" !== i)) {
                //ie8>c();c()是form.submit();
                if (o.ie === false) {
                    return (l.before && l.before(g)) == false ? '' : void u();
                } else if (o.ie > 9) {
                    return (l.before && l.before(g)) == false ? '' : u();
                } else {
                    return (l.before && l.before(g)) == false ? '' : c();
                }
                /*
                                return (l.before && l.before(g))==false? '' : o.ie ? o.ie > 9 ? u() : c() : void u()
                */
            }
        };

 form表单篇:

增加主动调用表单验证(更新上传文件非空验证颜色改变)(兼容了ie8,9,10)

优化上传文件按钮选择文件状态颜色提示

.layui-file-danger:hover {
    background-color: #FF5722 !important
}

.layui-file-danger:focus {
    background-color: #FF5722 !important
}
u.prototype.verifyForm = function (formId) {
        var e = null, a = f.config.verify, s = "layui-form-danger", s1 = "layui-file-danger", c = t("#" + formId),
            deviceK = (layui.hint(), layui.device()), d = c.find("*[lay-verify]");
        layui.each(d, function (l, r) {
            var o = t(this), c = o.attr("lay-verify").split("|"), u = o.attr("lay-verType"), d = o.val();
            if (o.attr("type") == "file" ? (deviceK.ie && deviceK.ie <= 9 ? o.parent().prev().removeClass(s1) : o.prev().removeClass(s1)) : o.removeClass(s), layui.each(c, function (t, l) {
                var c, f = "", v = "function" == typeof a[l];
                if (a[l]) {
                    var c = v ? f = a[l](d, r) : !a[l][0].test(d);
                    if (f = f || a[l][1], "required" === l && (f = o.attr("lay-reqText") || f), c) {
                        return "tips" === u ? i.tips(f, function () {
                            return "string" == typeof o.attr("lay-ignore") || "select" !== r.tagName.toLowerCase() && !/^checkbox|radio$/.test(r.type) ? o : o.next()
                        }(), {tips: 1}) : "alert" === u ? i.alert(f, {title: "提示", shadeClose: !0}) : i.msg(f, {
                            icon: 2,
                            shift: 6
                        }), n.android || n.ios || setTimeout(function () {
                            if(r.type == "file"){
                                if(deviceK.ie && deviceK.ie <= 9){
                                    o.parent().prev().focus();
                                }else {
                                    o.prev().focus();
                                }
                            }else {
                                r.focus()
                            }
                        }, 7), o.attr("type") == "file" ? (deviceK.ie && deviceK.ie <= 9 ? o.parent().prev().addClass(s1) : o.prev().addClass(s1)) : o.addClass(s), e = !0
                    }
                }
            }), e) {
                return e
            }
        });
        return !e
    }
原版:
.layui-form-danger + .layui-form-select .layui-input, .layui-form-danger:focus {
    border-color: #FF5722 !important
}

替换为如下(解决下拉框验证一直红框的问题):
.layui-form-danger + .layui-form-select .layui-input:focus, .layui-form-danger:focus {
    border-color: #FF5722 !important
}

优化表单验证逻辑,当没有required有其他number、phone验证时,字符串为空不进行required验证以及其他验证,当有值时进行number、phone以及其他验证;

    var d = function () {
        var e = null, a = f.config.verify, o = "layui-form-danger", s = {}, c = t(this), u = c.parents(r).eq(0),
            d = u.find("*[lay-verify]"), h = c.parents("form")[0], y = c.attr("lay-filter");
        return layui.each(d, function (l, r) {
            var s = t(this), c = s.attr("lay-verify").split("|"), u = s.attr("lay-verType"), d = s.val();
            if (RegExp("required").test(s.attr("lay-verify"))) {
                c.splice(c.indexOf("required"), 1);
                c.unshift("required");
            }
            if (s.removeClass(o), layui.each(c, function (t, l) {
                var c, f = "", h = "function" == typeof a[l];
                if (a[l]) {
                    console.log(s.attr('name') + ':' + h);
                    console.log(s.attr('name') + 'display:' + s.css("display"));
                    var flag = s.css("display") !== "none" ? (s.val() === '' && RegExp("required").test(s.attr("lay-verify"))) || (s.val() !== '' && s.attr("lay-verify").split("|").length > 0) : false;
                    var c = h ? f = a[l](d, r) : !a[l][0].test(d),
                        y = "select" === r.tagName.toLowerCase() || /^checkbox|radio$/.test(r.type);

                    if (f = f || a[l][1], "required" === l && (f = s.attr("lay-reqText") || f), c && flag) {
                        console.log(s.attr('name') + "是否是必填项或者非空命中校验:" + c)
                        console.log(s.attr('name') + "是否是必填项或者非空命中校验修改后:" + flag)
                        console.log(s.attr('name') + " 是否属于美化元素:" + y)
                        /*if(s.css("display") !== "none"){
                            console.log("需要验证")
                        } else if(s.val() === '' && RegExp("required").test(s.attr("lay-verify"))){
                            console.log("需要验证")
                        }else if(s.val() !== '' && c.length>0){
                            console.log("需要验证")
                        }else {
                            console.log("跳过验证")
                        }*/
                        return "tips" === u ? i.tips(f, function () {

open弹出层篇:

点击阴影层关闭弹出层关联cancel函数

 n.find("." + l[7]).on("click", e), a.shadeClose && i("#layui-layer-shade" + t.index).on("click", function () {
            var e = a.cancel && a.cancel(t.index, n);
            e === !1 || r.close(t.index)
        })

 修复success函数在ie8下提前执行导致表单组件未渲染完成的问题

var t = this, n = t.layero, a = t.config;
        t.openLayer(), 6 == r.ie && t.IE6(n), n.find("." + l[6]).children("a").on("click", function () {
            var e = i(this).index();
            if (0 === e) a.yes ? a.yes(t.index, n) : a.btn1 ? a.btn1(t.index, n) : r.close(t.index); else {
                var o = a["btn" + (e + 1)] && a["btn" + (e + 1)](t.index, n);
                o === !1 || r.close(t.index)
            }
        }), 
 s.pt.creat = function () {
        var e = this, t = e.config, a = e.index, s = t.content, f = "object" == typeof s, c = i("body");
        if (!t.id || !i("#" + t.id)[0]) {
            switch ("string" == typeof t.area && (t.area = "auto" === t.area ? ["", ""] : [t.area, ""]), t.shift && (t.anim = t.shift), 6 == r.ie && (t.fixed = !1), t.type) {
                case 0:
                    t.btn = "btn" in t ? t.btn : o.btn[0], r.closeAll("dialog");
                    break;
                case 2:
                    var s = t.content = f ? t.content : [t.content || "", "auto"];
                    t.content = '<iframe scrolling="' + (t.content[1] || "auto") + '" allowtransparency="true" id="' + l[4] + a + '" name="' + l[4] + a + '" onload="this.className=\'\';" class="layui-layer-load" frameborder="0" src="' + t.content[0] + '"></iframe>';
                    break;
                case 3:
                    delete t.title, delete t.closeBtn, t.icon === -1 && 0 === t.icon, r.closeAll("loading");
                    break;
                case 4:
                    f || (t.content = [t.content, "body"]), t.follow = t.content[1], t.content = t.content[0] + '<i class="layui-layer-TipsG"></i>', delete t.title, t.tips = "object" == typeof t.tips ? t.tips : [t.tips, !0], t.tipsMore || r.closeAll("tips")
            }
            if (e.vessel(f, function (n, r, u) {
                c.append(n[0]), f ? function () {
                    2 == t.type || 4 == t.type ? function () {
                        i("body").append(n[1])
                    }() : function () {
                        s.parents("." + l[0])[0] || (s.data("display", s.css("display")).show().addClass("layui-layer-wrap").wrap(n[1]), i("#" + l[0] + a).find("." + l[5]).before(r))
                    }()
                }() : c.append(n[1]), i(".layui-layer-move")[0] || c.append(o.moveElem = u), e.layero = i("#" + l[0] + a), t.scrollbar || l.html.css("overflow", "hidden").attr("layer-full", a)
            }).auto(a), i("#layui-layer-shade" + e.index).css({
                "background-color": t.shade[1] || "#000",
                opacity: t.shade[0] || t.shade
            }), 2 == t.type && 6 == r.ie && e.layero.find("iframe").attr("src", s[0]), 4 == t.type ? e.tips() : e.offset(), t.fixed && n.on("resize", function () {
                e.offset(), (/^\d+%$/.test(t.area[0]) || /^\d+%$/.test(t.area[1])) && e.auto(a), 4 == t.type && e.tips()
            }), t.time <= 0 || setTimeout(function () {
                r.close(e.index)
            }, t.time), e.move().callback(), l.anim[t.anim]) {
                var u = "layer-anim " + l.anim[t.anim];
                e.layero.addClass(u).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function () {
                    i(this).removeClass(u)
                })
            }
            t.isOutAnim && e.layero.data("isOutAnim", !0);
            t.success && t.success(e.layero, e.index)
        }
    }, 

数据表格篇

解决表格筛选列不靠左情况<span style='float: left'>

                i.each(function (i, n) {
                    var l = t(this), r = l.attr("lay-skin"), s = (l.attr("lay-text") || "").split("|"),
                        o = this.disabled;
                    "switch" === r && (r = "_" + r);
                    var u = e[r] || e.checkbox;
                    if ("string" == typeof l.attr("lay-ignore")) return l.show();
                    var d = l.next("." + u[0]),
                        f = t(['<div class="layui-unselect ' + u[0], n.checked ? " " + u[1] : "", o ? " layui-checkbox-disbaled " + c : "", '"', r ? ' lay-skin="' + r + '"' : "", ">", function () {
                            var e = n.title.replace(/\s/g, ""), t = {
                                checkbox: [e ? "<span style='float: left'>" + n.title + "</span>" : "", '<i class="layui-icon layui-icon-ok"></i>'].join(""),
                                _switch: "<em>" + ((n.checked ? s[0] : s[1]) || "") + "</em><i></i>"
                            };
                            return t[r] || t.checkbox
                        }(), "</div>"].join(""));
                    d[0] && d.remove(), l.after(f), a.call(this, f, u)
                })

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值