【已解决】webman-admin一键菜单,自动生成的update.html中元素赋值的问题。

chao

问题描述

其中有一个字段是status,使用radio来做,发现无法赋值(赋值后无法显示当前选中)
查看layui文档、询问chatgpt后:
尝试手动赋值渲染

document.querySelector('input[name="status"][value="' + res.data[0].status + '"]').checked = true;
form.render('radio');

这样是渲染当前项了,但是切换选中项不会随着改变,form提交时也无法正确获取选中项的值(永远是那个初始值)。
select元素也试了下,也是有类似的问题。
大概率是由于我不熟悉layui导致的(没道理一个框架对于这种最基本的东西都这么难用),请问一下对于这种情况应该怎么正确处理?

html代码

<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() ,无需特殊处理就能正常使用。

201 1 0
1个回答

keytehu

layui赋值后要调用 form.render(); 执行渲染才能生效

  • 暂无评论
×
🔝