当使用layui框架时，如果表单元素是动态添加的，可能不会显示。原因是layui在初始化时无法识别这些新添加的元素。解决方法是在动态添加内容后，使用layui.form.render()来渲染表单，确保select、checkbox、radio等元素能正确显示。同时，记得为动态生成的组件添加lay-filter属性以便于渲染。
1.问题描述
使用layui框架的时候，不知道怎么回事单选框，复选框不显示。
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中做渲染
4.2.对form表单的组件进行渲染
layui.use('form', function(){
let form = layui.form;
form.render(); //更新所有form表单
// form.render('select','aihao');
//form.render('组件名','lay-filter名')
});
这段代码加在 动态加入的代码后面，如下所示
$("#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 = ' <!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->\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' +
'<!-- <div class="layui-form-mid layui-text-em">请务必填写用户名</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">\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)
}
});
})
扫一扫
1003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
