其中有一个字段是status,使用radio来做,发现无法赋值(赋值后无法显示当前选中)
查看layui文档、询问chatgpt后:
尝试手动赋值渲染
document.querySelector('input[name="status"][value="' + res.data[0].status + '"]').checked = true;
form.render('radio');
这样是渲染当前项了,但是切换选中项不会随着改变,form提交时也无法正确获取选中项的值(永远是那个初始值)。
select元素也试了下,也是有类似的问题。
大概率是由于我不熟悉layui导致的(没道理一个框架对于这种最基本的东西都这么难用),请问一下对于这种情况应该怎么正确处理?
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="radio" name="status" value="1" title="正常" />
<input type="radio" name="status" value="2" title="禁用" />
<input type="radio" name="status" value="3" title="连接异常" />
</div>
</div>
由于没有找到统一的方案,只能针对这个情况手动处理一下
// 前面是ajax获取数据,下面代码是在ajax的success中的处理
// 给表单初始化数据
layui.each(res.data[0], function (key, value) {
let obj = $('*[name="'+key+'"]');
if (key === "password") {
obj.attr("placeholder", "不更新密码请留空");
return;
}
if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
if (obj[0].nodeName.toLowerCase() === "textarea") {
obj.val(value);
}
// 针对radio特殊处理
else if ($(obj[0]).is(':radio')) {
$('input[type="radio"][name="' + key + '"][value="' + value + '"]').attr('checked', true);
}
else {
obj.attr("value", value);
obj[0].value = value;
}
});
form.render();
其实就是针对radio做个特殊处理,然后要注意的就是一定不要忘了 form.render()
,不写这个是无法正确渲染出radio的选中项的。
然后试了一下select下拉框,只要加上了 form.render()
,无需特殊处理就能正常使用。
layui赋值后要调用 form.render(); 执行渲染才能生效