layui form.render更新渲染失效或无效解决方案
我的项目是这样的，表单是一个独立的层，用layui的弹窗layer.open()弹出这个层来编辑数据，在编辑数据时，如果操作过快；弹出层>>赋值数据>>接着用form.render()更新渲染表单的单选组无效（失效）；单选组没有赋值；网上也没有解决方案，最后，无奈只得看源码：
layui form.render()源码：
u.prototype.render = function(e, i) {
var n = this
, u = t(r + function() {
return i ? '[lay-filter="' + i + '"]' : ""
}())
, d = {
select: function() {
var e, i = "请选择", a = "layui-form-select", n = "layui-select-title", r = "layui-select-none", d = "", f = u.find("select"), v = function(i, l) {
t(i.target).parent().hasClass(n) && !l || (t("." + a).removeClass(a + "ed " + a + "up"),
e && d && e.val(d)),
e = null
}, y = function(i, u, f) {
var y, p = t(this), m = i.find("." + n), k = m.find("input"), g = i.find("dl"), x = g.children("dd"), b = this.selectedIndex;
if (!u) {
var C = function() {
var e = i.offset().top + i.outerHeight() + 5 - h.scrollTop()
, t = g.outerHeight();
b = p[0].selectedIndex,
i.addClass(a + "ed"),
x.removeClass(o),
y = null,
x.eq(b).addClass(s).siblings().removeClass(s),
e + t > h.height() && e >= t && i.addClass(a + "up"),
T()
}
, w = function(e) {
i.removeClass(a + "ed " + a + "up"),
k.blur(),
y = null,
e || $(k.val(), function(e) {
var i = p[0].selectedIndex;
e && (d = t(p[0].options[i]).html(),
0 === i && d === k.attr("placeholder") && (d = ""),
k.val(d || ""))
})
}
, T = function() {
var e = g.children("dd." + s);
if (e[0]) {
var t = e.position().top
, i = g.height()
, a = e.height();
t > i && g.scrollTop(t + g.scrollTop() - i + a - 5),
t < 0 && g.scrollTop(t + g.scrollTop() - 5)
}
};
m.on("click", function(e) {
i.hasClass(a + "ed") ? w() : (v(e, !0),
C()),
g.find("." + r).remove()
}),
m.find(".layui-edge").on("click", function() {
k.focus()
}),
k.on("keyup", function(e) {
var t = e.keyCode;
9 === t && C()
}).on("keydown", function(e) {
var t = e.keyCode;
9 === t && w();
var i = function(t, a) {
var n, l;
e.preventDefault();
var r = function() {
var e = g.children("dd." + s);
if (g.children("dd." + o)[0] && "next" === t) {
var i = g.children("dd:not(." + o + ",." + c + ")")
, n = i.eq(0).index();
if (n >= 0 && n < e.index() && !i.hasClass(s))
return i.eq(0).prev()[0] ? i.eq(0).prev() : g.children(":last")
}
return a && a[0] ? a : y && y[0] ? y : e
}();
return l = r[t](),
n = r[t]("dd:not(." + o + ")"),
l[0] ? (y = r[t](),
n[0] && !n.hasClass(c) || !y[0] ? (n.addClass(s).siblings().removeClass(s),
void T()) : i(t, y)) : y = null
};
38 === t && i("prev"),
40 === t && i("next"),
13 === t && (e.preventDefault(),
g.children("dd." + s).trigger("click"))
});
var $ = function(e, i, a) {
var n = 0;
layui.each(x, function() {
var i = t(this)
, l = i.text()
, r = l.indexOf(e) === -1;
("" === e || "blur" === a ? e !== l : r) && n++,
"keyup" === a && i[r ? "addClass" : "removeClass"](o)
});
var l = n === x.length;
return i(l),
l
}
, q = function(e) {
var t = this.value
, i = e.keyCode;
return 9 !== i && 13 !== i && 37 !== i && 38 !== i && 39 !== i && 40 !== i && ($(t, function(e) {
e ? g.find("." + r)[0] || g.append('<p class="' + r + '">无匹配项</p>') : g.find("." + r).remove()
}, "keyup"),
"" === t && g.find("." + r).remove(),
void T())
};
f && k.on("keyup", q).on("blur", function(i) {
var a = p[0].selectedIndex;
e = k,
d = t(p[0].options[a]).html(),
0 === a && d === k.attr("placeholder") && (d = ""),
setTimeout(function() {
$(k.val(), function(e) {
d || k.val("")
}, "blur")
}, 200)
}),
x.on("click", function() {
var e = t(this)
, a = e.attr("lay-value")
, n = p.attr("lay-filter");
return !e.hasClass(c) && (e.hasClass("layui-select-tips") ? k.val("") : (k.val(e.text()),
e.addClass(s)),
e.siblings().removeClass(s),
p.val(a).removeClass("layui-form-danger"),
layui.event.call(this, l, "select(" + n + ")", {
elem: p[0],
value: a,
othis: i
}),
w(!0),
!1)
}),
i.find("dl>dt").on("click", function(e) {
return !1
}),
t(document).off("click", v).on("click", v)
}
};
f.each(function(e, l) {
var r = t(this)
, o = r.next("." + a)
, u = this.disabled
, d = l.value
, f = t(l.options[l.selectedIndex])
, v = l.options[0];
if ("string" == typeof r.attr("lay-ignore"))
return r.show();
var h = "string" == typeof r.attr("lay-search")
, p = v ? v.value ? i : v.innerHTML || i : i
, m = t(['<div class="' + (h ? "" : "layui-unselect ") + a, (u ? " layui-select-disabled" : "") + '">', '<div class="' + n + '">', '<input type="text" placeholder="' + p + '" ' + ('value="' + (d ? f.html() : "") + '"') + (!u && h ? "" : " readonly") + ' class="layui-input' + (h ? "" : " layui-unselect") + (u ? " " + c : "") + '">', '<i class="layui-edge"></i></div>', '<dl class="layui-anim layui-anim-upbit' + (r.find("optgroup")[0] ? " layui-select-group" : "") + '">', function(e) {
var t = [];
return layui.each(e, function(e, a) {
0 !== e || a.value ? "optgroup" === a.tagName.toLowerCase() ? t.push("<dt>" + a.label + "</dt>") : t.push('<dd lay-value="' + a.value + '" class="' + (d === a.value ? s : "") + (a.disabled ? " " + c : "") + '">' + a.innerHTML + "</dd>") : t.push('<dd lay-value="" class="layui-select-tips">' + (a.innerHTML || i) + "</dd>")
}),
0 === t.length && t.push('<dd lay-value="" class="' + c + '">没有选项</dd>'),
t.join("")
}(r.find("*")) + "</dl>", "</div>"].join(""));
o[0] && o.remove(),
r.after(m),
y.call(this, m, u, h)
})
},
checkbox: function() {
var e = {
checkbox: ["layui-form-checkbox", "layui-form-checked", "checkbox"],
_switch: ["layui-form-switch", "layui-form-onswitch", "switch"]
}
, i = u.find("input[type=checkbox]")
, a = function(e, i) {
var a = t(this);
e.on("click", function() {
var t = a.attr("lay-filter")
, n = (a.attr("lay-text") || "").split("|");
a[0].disabled || (a[0].checked ? (a[0].checked = !1,
e.removeClass(i[1]).find("em").text(n[1])) : (a[0].checked = !0,
e.addClass(i[1]).find("em").text(n[0])),
layui.event.call(a[0], l, i[2] + "(" + t + ")", {
elem: a[0],
value: a[0].value,
othis: e
}))
})
};
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>" + 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)
})
},
radio: function() {
var e = "layui-form-radio"
, i = ["", ""]
, a = u.find("input[type=radio]")
, n = function(a) {
var n = t(this)
, s = "layui-anim-scaleSpring";
a.on("click", function() {
var o = n[0].name
, c = n.parents(r)
, u = n.attr("lay-filter")
, d = c.find("input[name=" + o.replace(/(\.|#|\[|\])/g, "\\$1") + "]");
n[0].disabled || (layui.each(d, function() {
var a = t(this).next("." + e);
this.checked = !1,
a.removeClass(e + "ed"),
a.find(".layui-icon").removeClass(s).html(i[1])
}),
n[0].checked = !0,
a.addClass(e + "ed"),
a.find(".layui-icon").addClass(s).html(i[0]),
layui.event.call(n[0], l, "radio(" + u + ")", {
elem: n[0],
value: n[0].value,
othis: a
}))
})
};
a.each(function(a, l) {
var r = t(this)
, s = r.next("." + e)
, o = this.disabled;
if ("string" == typeof r.attr("lay-ignore"))
return r.show();
s[0] && s.remove();
var u = t(['<div class="layui-unselect ' + e, l.checked ? " " + e + "ed" : "", (o ? " layui-radio-disbaled " + c : "") + '">', '<i class="layui-anim layui-icon">' + i[l.checked ? 0 : 1] + "</i>", "<div>" + function() {
var e = l.title || "";
return "string" == typeof r.next().attr("lay-radio") && (e = r.next().html(),
r.next().remove()),
e
}() + "</div>", "</div>"].join(""));
r.after(u),
n.call(this, u)
})
}
};
return e ? d[e] ? d[e]() : a.error("不支持的" + e + "表单渲染") : layui.each(d, function(e, t) {
t()
}),
n
}
;我的是单选按钮“radio”无效所以只需要看radio就行了它的方法是：radio: function() {｝
取消选中时，他的代码逻辑是这样的
var a = t(this).next("." + e);
this.checked = !1,
a.removeClass(e + "ed"),
a.find(".layui-icon").removeClass(s).html(i[1])选中时，他的代码逻辑是这样的
n[0].checked = !0,
a.addClass(e + "ed"),
a.find(".layui-icon").addClass(s).html(i[0]),其中用到的变量
e = "layui-form-radio"
i = ["", ""]
a = u.find("input[type=radio]")
s = "layui-anim-scaleSpring";变量“i”估计对layUI不熟悉的朋友不知道是什么，我这里做下说明；
变量“i”里放的值是layui的图标库里的东西
layui的图标：https://www.layui.com/doc/element/icon.html
解决form.render更新渲染radio时无效
知道了源码的操作逻辑，根据逻辑修改成自己的代码就行了
//layui radio选中
obj.radioTrue = function (domid) {
$(domid).next().find("i").text("");
$(domid).next().addClass("layui-form-radio layui-form-radioed");
$(domid).next().find("i").html("");
};
//layui radio 取消选中
obj.radioFalse = function (domid) {
$(domid).next().find("i").text("");
$(domid).next().removeClass("layui-form-radioed");
$(domid).next().find("i").html("");
};调用
//layui radio选中
obj.radioTrue("#domid");
//layui radio 取消选中
obj.radioFalse("#domid");这个#domid是你radio标签上的id值
<input type="radio" name="Condition" id="domid" value="true" title="是">
扫一扫
4061
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
