layui表单元素radio,checked,select不显示渲染

爱被打了一巴掌 2023-10-09 20:32 24阅读 0赞

1.问题描述  
使用layui框架的时候，不知道怎么回事单选框，复选框不显示。  
![在这里插入图片描述][fe4f133918bb42c0a1d36bf1aae9208e.png]  
2.为什么表单不显示？

当你使用表单时，layui 会对 select、checkbox、radio 等原始元素隐藏，从而进行美化修饰处理。但如果您的表单元素是动态添加的，那么在组件初始加载的时候是无法读取到的。

3.解决方法

只需执行一个视图渲染的实例即可（在scprit标签中写）

layui.use('form', function(){
        
                        let form = layui.form;
                        form.render();   //更新所有form表单
                        // form.render('select','aihao');
                        //form.render('组件名','lay-filter名')
                    });

同理的还有 element 模块

4.具体操作（可以更新整个表单，也可以更新单个组件）

*  我是更新整个form表单

4.1在**select,radio,checkbox**等组件上记得要加上 **lay-filter=" "**，用于在js中做渲染  
![在这里插入图片描述][a6b2e4612a484a0d911a21202e68b473.png]  
4.2.对form表单的组件进行渲染

这段代码加在 **动态加入的代码后面**，如下所示

$("#person_info").click(function (){
        
        // 清空内容
        $(".layui-card-body").empty();
    
        // 发送ajax请求 展示个人信息
        $.ajax({
        
            url:"/users/detail",
            type:"GET",
            // data:"username="+username+"&password="+password,
            // data:{"username": username, "password": password}, 不需要发送请求
            dataType:"JSON",
            success:function (json){
        
                if (json.state == 200){
        
                    let html = ' \n' +
                        '                    <form class="layui-form layui-form-pane" action="">\n' +
                        '\n' +
                        '                        <div class="layui-form-item">\n' +
                        '                            <label class="layui-form-label">用户名</label>\n' +
                        '                            <div class="layui-input-inline">\n' +
                        '                                <input value="#{username}" type="text" name="username" placeholder="" lay-verify="required" autocomplete="off" class="layui-input">\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                        <div class="layui-form-item">\n' +
                        '                             <label class="layui-form-label">密码</label>\n' +
                        '                            <div class="layui-input-inline">\n' +
                        '                                <input value="#{password}" type="password" name="password" placeholder="" lay-verify="required" autocomplete="off" class="layui-input">\n' +
                        '                            </div>\n' +
                        '\n' +
                        '                        </div>\n' +
                        '\n' +
                        '                        <div class="layui-form-item">\n' +
                        '                            <div class="layui-inline">\n' +
                        '                                <label class="layui-form-label">邮箱</label>\n' +
                        '                                <div class="layui-input-inline">\n' +
                        '                                    <input value="#{email}" type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">\n' +
                        '                                </div>\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '\n' +
                        '                        <div class="layui-form-item">\n' +
                        '                            <div class="layui-inline">\n' +
                        '                                <label class="layui-form-label">电话号码</label>\n' +
                        '                                <div class="layui-input-inline layui-input-wrap">\n' +
                        '                                    <input value="#{telephone}" type="tel" name="telephone" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">\n' +
                        '                                </div>\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '\n' +
                        '                        <div class="layui-form-item">\n' +
                        '                            <label class="layui-form-label">爱好</label>\n' +
                        '                            <div class="layui-input-inline">\n' +
                        '                                <select name="interest" lay-filter="aihao">\n' +
                        '                                    <option value=""></option>\n' +
                        '                                    <option value="0">写作</option>\n' +
                        '                                    <option value="1" selected>阅读</option>\n' +
                        '                                    <option value="2">游戏</option>\n' +
                        '                                    <option value="3">音乐</option>\n' +
                        '                                    <option value="4">旅行</option>\n' +
                        '                                </select>\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                        <div class="layui-form-item" pane>\n' +
                        '                            <label class="layui-form-label">性别</label>\n' +
                        '                            <div class="layui-input-block">\n' +
                        '                                <input  type="radio" name="sex" value="男" title="男" checked>\n' +
                        '                                <input  type="radio" name="sex" value="女" title="女">\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                        <div class="layui-form-item" pane>\n' +
                        '                            <label class="layui-form-label">超级管理员</label>\n' +
                        '                            <div class="layui-input-block">\n' +
                        '                                <input type="radio" name="admin" value="男" title="是" checked>\n' +
                        '                                <input type="radio" name="admin" value="女" title="否">\n' +
                        '                                <input type="radio" name="admin" value="禁" title="禁用" disabled>\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                        <div class="layui-form-item">\n' +
                        '                            <div class="layui-inline">\n' +
                        '                                <label class="layui-form-label">创建时间</label>\n' +
                        '                                <div class="layui-input-block">\n' +
                        '                                    <input value="#{createdTime}" type="text" name="createdtime" id="date1" autocomplete="off" class="layui-input">\n' +
                        '                                </div>\n' +
                        '                            </div>\n' +
                        '                            <div class="layui-inline">\n' +
                        '                                <label class="layui-form-label">修改时间</label>\n' +
                        '                                <div class="layui-input-inline">\n' +
                        '                                    <input value="#{modifiedTime}" type="text" name="modifiedtime" autocomplete="off" class="layui-input">\n' +
                        '                                </div>\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '\n' +
                        '\n' +
                        '                        <div class="layui-form-item layui-form-text">\n' +
                        '                            <label class="layui-form-label">个性签名</label>\n' +
                        '                            <div class="layui-input-block">\n' +
                        '                                <textarea placeholder="请输入内容" class="layui-textarea">#{
        signature}</textarea>\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                        <div class="layui-form-item">\n' +
                        '                            <button class="layui-btn" lay-submit lay-filter="demo2">确认</button>\n' +
                        '                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
                        '                        </div>\n' +
                        '                    </form>'
                    // 拿到上面追加html的内容
    
                    html = html.replace(/#{
        username}/g,json.data.username)
                    html = html.replace(/#{
        password}/g,json.data.password)
                    html = html.replace(/#{
        email}/g,json.data.email)
                    html = html.replace(/#{
        telephone}/g,json.data.telephone)
                    html = html.replace(/#{
        createdTime}/g,json.data.createdTime)
                    html = html.replace(/#{
        modifiedTime}/g,json.data.modifiedTime)
                    html = html.replace(/#{
        signature}/g,json.data.signature)
                    // html = html.replace("#{email}",json.data.email==null ? "" : json.data.email)
                    // html = html.replace("#{telephone}",json.data.telephone==null ? "" :json.data.telephone)
    
    
                    $(".layui-card-body").append(html)
    
                    // 选择器
                    // if (json.data.gender != null){
        
                    //     let radio = json.data.gender ==0 ? $("#gender-female") : $("#gender-male")
                    //     radio.prop("checked","checked")
                    // } else {
        
                    //     // 性别选项默认不选
                    //     $("input[name='inlineRadioOptions']").attr('checked',false);
                    // }
                    layui.use('form', function(){
        
                        let form = layui.form;
                        form.render();   //更新所有form表单
                        // form.render('select','aihao');
                        //form.render('组件名','lay-filter名')
                    });
    
    
                }else {
        
                    alert("" + json.message)
                }
            },
            error:function (xhr){
        
                alert("点击用户信息时产生未知的异常"+xhr.status)
            }
        });
    })

![在这里插入图片描述][57fdabb6e4b14e70b13c9b951523e6b0.png]

[fe4f133918bb42c0a1d36bf1aae9208e.png]: https://img-blog.csdnimg.cn/fe4f133918bb42c0a1d36bf1aae9208e.png
[a6b2e4612a484a0d911a21202e68b473.png]: https://img-blog.csdnimg.cn/a6b2e4612a484a0d911a21202e68b473.png
[57fdabb6e4b14e70b13c9b951523e6b0.png]: https://img-blog.csdnimg.cn/57fdabb6e4b14e70b13c9b951523e6b0.png