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

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

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

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

3.解决方法

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

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

同理的还有 element 模块

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

  • 我是更新整个form表单

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

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

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

  1. $("#person_info").click(function (){
  3.     // 清空内容
  4.     $(".layui-card-body").empty();
  6.     // 发送ajax请求 展示个人信息
  7.     $.ajax({
  9.         url:"/users/detail",
  10.         type:"GET",
  11.         // data:"username="+username+"&password="+password,
  12.         // data:{"username": username, "password": password}, 不需要发送请求
  13.         dataType:"JSON",
  14.         success:function (json){
  16.             if (json.state == 200){
  18.                 let html = ' <!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->\n' +
  19.                     '                    <form class="layui-form layui-form-pane" action="">\n' +
  20.                     '\n' +
  21.                     '                        <div class="layui-form-item">\n' +
  22.                     '                            <label class="layui-form-label">用户名</label>\n' +
  23.                     '                            <div class="layui-input-inline">\n' +
  24.                     '                                <input value="#{username}" type="text" name="username" placeholder="" lay-verify="required" autocomplete="off" class="layui-input">\n' +
  25.                     '                            </div>\n' +
  26.                     '                        </div>\n' +
  27.                     '                        <div class="layui-form-item">\n' +
  28.                     '                             <label class="layui-form-label">密码</label>\n' +
  29.                     '                            <div class="layui-input-inline">\n' +
  30.                     '                                <input value="#{password}" type="password" name="password" placeholder="" lay-verify="required" autocomplete="off" class="layui-input">\n' +
  31.                     '                            </div>\n' +
  32.                     '<!--                            <div class="layui-form-mid layui-text-em">请务必填写用户名</div>-->\n' +
  33.                     '                        </div>\n' +
  34.                     '\n' +
  35.                     '                        <div class="layui-form-item">\n' +
  36.                     '                            <div class="layui-inline">\n' +
  37.                     '                                <label class="layui-form-label">邮箱</label>\n' +
  38.                     '                                <div class="layui-input-inline">\n' +
  39.                     '                                    <input value="#{email}" type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">\n' +
  40.                     '                                </div>\n' +
  41.                     '                            </div>\n' +
  42.                     '                        </div>\n' +
  43.                     '\n' +
  44.                     '                        <div class="layui-form-item">\n' +
  45.                     '                            <div class="layui-inline">\n' +
  46.                     '                                <label class="layui-form-label">电话号码</label>\n' +
  47.                     '                                <div class="layui-input-inline layui-input-wrap">\n' +
  48.                     '                                    <input value="#{telephone}" type="tel" name="telephone" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">\n' +
  49.                     '                                </div>\n' +
  50.                     '                            </div>\n' +
  51.                     '                        </div>\n' +
  52.                     '\n' +
  53.                     '                        <div class="layui-form-item">\n' +
  54.                     '                            <label class="layui-form-label">爱好</label>\n' +
  55.                     '                            <div class="layui-input-inline">\n' +
  56.                     '                                <select name="interest" lay-filter="aihao">\n' +
  57.                     '                                    <option value=""></option>\n' +
  58.                     '                                    <option value="0">写作</option>\n' +
  59.                     '                                    <option value="1" selected>阅读</option>\n' +
  60.                     '                                    <option value="2">游戏</option>\n' +
  61.                     '                                    <option value="3">音乐</option>\n' +
  62.                     '                                    <option value="4">旅行</option>\n' +
  63.                     '                                </select>\n' +
  64.                     '                            </div>\n' +
  65.                     '                        </div>\n' +
  66.                     '                        <div class="layui-form-item" pane>\n' +
  67.                     '                            <label class="layui-form-label">性别</label>\n' +
  68.                     '                            <div class="layui-input-block">\n' +
  69.                     '                                <input  type="radio" name="sex" value="男" title="男" checked>\n' +
  70.                     '                                <input  type="radio" name="sex" value="女" title="女">\n' +
  71.                     '                            </div>\n' +
  72.                     '                        </div>\n' +
  73.                     '                        <div class="layui-form-item" pane>\n' +
  74.                     '                            <label class="layui-form-label">超级管理员</label>\n' +
  75.                     '                            <div class="layui-input-block">\n' +
  76.                     '                                <input type="radio" name="admin" value="男" title="是" checked>\n' +
  77.                     '                                <input type="radio" name="admin" value="女" title="否">\n' +
  78.                     '                                <input type="radio" name="admin" value="禁" title="禁用" disabled>\n' +
  79.                     '                            </div>\n' +
  80.                     '                        </div>\n' +
  81.                     '                        <div class="layui-form-item">\n' +
  82.                     '                            <div class="layui-inline">\n' +
  83.                     '                                <label class="layui-form-label">创建时间</label>\n' +
  84.                     '                                <div class="layui-input-block">\n' +
  85.                     '                                    <input value="#{createdTime}" type="text" name="createdtime" id="date1" autocomplete="off" class="layui-input">\n' +
  86.                     '                                </div>\n' +
  87.                     '                            </div>\n' +
  88.                     '                            <div class="layui-inline">\n' +
  89.                     '                                <label class="layui-form-label">修改时间</label>\n' +
  90.                     '                                <div class="layui-input-inline">\n' +
  91.                     '                                    <input value="#{modifiedTime}" type="text" name="modifiedtime" autocomplete="off" class="layui-input">\n' +
  92.                     '                                </div>\n' +
  93.                     '                            </div>\n' +
  94.                     '                        </div>\n' +
  95.                     '\n' +
  96.                     '\n' +
  97.                     '                        <div class="layui-form-item layui-form-text">\n' +
  98.                     '                            <label class="layui-form-label">个性签名</label>\n' +
  99.                     '                            <div class="layui-input-block">\n' +
  100.                     '                                <textarea placeholder="请输入内容" class="layui-textarea">#{
  101.     signature}</textarea>\n' +
  102.                     '                            </div>\n' +
  103.                     '                        </div>\n' +
  104.                     '                        <div class="layui-form-item">\n' +
  105.                     '                            <button class="layui-btn" lay-submit lay-filter="demo2">确认</button>\n' +
  106.                     '                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
  107.                     '                        </div>\n' +
  108.                     '                    </form>'
  109.                 // 拿到上面追加html的内容
  111.                 html = html.replace(/#{
  112.     username}/g,json.data.username)
  113.                 html = html.replace(/#{
  114.     password}/g,json.data.password)
  115.                 html = html.replace(/#{
  116.     email}/g,json.data.email)
  117.                 html = html.replace(/#{
  118.     telephone}/g,json.data.telephone)
  119.                 html = html.replace(/#{
  120.     createdTime}/g,json.data.createdTime)
  121.                 html = html.replace(/#{
  122.     modifiedTime}/g,json.data.modifiedTime)
  123.                 html = html.replace(/#{
  124.     signature}/g,json.data.signature)
  125.                 // html = html.replace("#{email}",json.data.email==null ? "" : json.data.email)
  126.                 // html = html.replace("#{telephone}",json.data.telephone==null ? "" :json.data.telephone)
  129.                 $(".layui-card-body").append(html)
  131.                 // 选择器
  132.                 // if (json.data.gender != null){
  134.                 //     let radio = json.data.gender ==0 ? $("#gender-female") : $("#gender-male")
  135.                 //     radio.prop("checked","checked")
  136.                 // } else {
  138.                 //     // 性别选项默认不选
  139.                 //     $("input[name='inlineRadioOptions']").attr('checked',false);
  140.                 // }
  141.                 layui.use('form', function(){
  143.                     let form = layui.form;
  144.                     form.render();   //更新所有form表单
  145.                     // form.render('select','aihao');
  146.                     //form.render('组件名','lay-filter名')
  147.                 });
  150.             }else {
  152.                 alert("" + json.message)
  153.             }
  154.         },
  155.         error:function (xhr){
  157.             alert("点击用户信息时产生未知的异常"+xhr.status)
  158.         }
  159.     });
  160. })

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Layui关联表单

    开发工具与关键技术：MVC 作者：文泽钦 撰写时间：2019年 6 月 17 日 现在我们做一个layui表单关联，什么叫表单关联呢，比如有两个layui表格，把第一

    Love The Way You LieLove The Way You Lie/ 0 赞/ 460 阅读

    相关 Layui表单验证

    1:引用layui的两个文件： 2：因为是表单验证，所以只有在表单里面才起效果，先来布局：首先，放一个最外层的盒子把所有元素包裹起来，容易布局，引用layui的一个类：‘ay

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 572 阅读