解决layui 表单元素radio不显示渲染的问题

最近一直在使用layui，一个对程序员相对友好的前端框架，很多效果都进行了初步的封装。

在使用过程中遇到最多的问题就是引用的问题，各种模板无法使用，虽然都一一百度解决。

本次需要解决的问题是 layui-form表单无法渲染效果。

我希望的效果是

但是程序运行效果是

问题分析：

因为这个表单，我是使用laytpl动态插入的，因此表单中radio的效果并没有渲染上，打开调试模式可以看到

正常的radio渲染结果，应该是包括一个i标签和一个span标签

而我们的渲染结果，只有一个input标签

所以导致这个位置没有数据显示。

解决：

由于该框架较新，大部分的内容只能通过官网的论坛获取，所以找了好久，最后在官方文档中看到一句话

有些时候，你的有些表单元素可能是动态插入的。这时Form模块的自动化渲染是会对其失效的。虽然我们没有双向绑定机制（因为我们叫经典模块化框架，咩哈哈哈哈。。。），但没事，你只需要执行 form.render(type); 方法即可。

其中的type即表单的type类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表：

于是我在模板插入代码的最后，加了一句

form.render(); //更新全部

好了，问题解决！！！！！

以上这篇解决layui 表单元素radio不显示渲染的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决layui前端框架 form表单,table表等内置控件不显示的问题

    使用form表单前需要声明, table表格也是类似原理 以上这篇解决layui前端框架 form表单,table表等内置控件不显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 解决Layui 表单提交数据为空的问题

    坑的外观 最近用了一段时间Layui作为项目后台管理模块的前端框架,感觉还是挺好用的. 今天踩了个坑,就是使用layui表单提交时,提交的数据为空. 例如,layer.msg(JSON.stringify(data.field));这句代码执行后,页面显示为空对象. <form class="layui-form" action=""> <div class="layui-form-item"> <label cla

  • Layui之table中的radio在切换分页时无法记住选中状态的解决方法

    情景描述 Layui数据表格中用到了表单元素radio,在当前页面选中radio状态,并同步更新到保存表格中所有的数据的数组中(获取表格中的所有数据并保存到数组中),再点击分页组件中的下一页.上一页.跳转按钮进行切换另外一个页面,然后在切换回之前的页面,会发现在以前页面上radio状态全部恢复默认了,我们当然是希望能保存住前一页radio的选中状态. 我写项目遇到的一个的情况:在第一页选中的radio的状态,点击下一页按钮切换到第二页,然后再点击上一页切换会第一页,第一页中的radio状态就恢复

  • layui radio点击事件实现input显示和隐藏的例子

    如下所示: 前端代码 <link rel="stylesheet" href="/static/index/layui/css/layui.css" rel="external nofollow" > <script type="text/javascript" src="/static/index/layui/layui.js" charset="utf-8">

  • layui radio单选限制下一个radio单选的实例

    本demo的效果是单选框一有a和b两个选项按钮,单选框二有q和w两个选项按钮, 选中a,使得q不可选,w选中:选中b,使得w不可选,q选中 下面是完整的代码,需要引入layui.js,layui.css <!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <title>layui</title>   <meta name="rendere

  • 解决LayUI表单获取不到data的问题

    前几天用LayUI表单进行AJAX提交的时候发现,function(data)里的data始终无法获取表单里填的值,当时我认为是出BUG了就用了$('#updateform').serialize()来获取表单数据 //form表单 更新员工信息 form.on('submit(form_emp2)', function(data){ var temp=$('#updateform').serialize(); // layer.msg(JSON.stringify($('#form1').se

  • 对layui中表单元素的使用详解

    首先不管是单选框还是复选框或者是下拉框,都要在你写的标签外面套一层div或者是form标签,如: <div class="layui-input-block"> <input type="radio" name="sex" value="0" title="男"> </div>,class属性是固定写法. 这样写好了以后,你如果是写在静态页面,这样式可以看见效果,如果写在

  • 解决layui 表单元素radio不显示渲染的问题

    最近一直在使用layui,一个对程序员相对友好的前端框架,很多效果都进行了初步的封装. 在使用过程中遇到最多的问题就是引用的问题,各种模板无法使用,虽然都一一百度解决. 本次需要解决的问题是 layui-form表单无法渲染效果. 我希望的效果是 但是程序运行效果是 问题分析: 因为这个表单,我是使用laytpl动态插入的,因此表单中radio的效果并没有渲染上,打开调试模式可以看到 正常的radio渲染结果,应该是包括一个i标签和一个span标签 而我们的渲染结果,只有一个input标签 所以

  • 浅谈layui 表单元素的选中问题

    layui对表单元素都作了美化,比如下拉列表,单选框,多选框.对表单美化后相应元素的操作,其实是在layui处理过后的div上操作,不能真的反映在原始我们编写的表单的元素上.这也会出现一个问题,如果想用JS对表单做些预处理,怎么做?操作原始的元素并不会展现在layui处理过的表单中的,那我们就对layui处理过的表单动手 这里要提两个我用过的,一个是单选框,一个是下拉列表 * 单选框,layui美化后,对应的type=radio的input项隐藏,在input之后追加了一个div,里面用i标签美

  • layui 表单标签的校验方法

    layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值. required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity(身份证) 自定义值 同时支持多条规则的验证,格式:lay-verify="验证A|验证B" 如:lay-verify="required|phone|number" 另外,除了我们内置的校验规则,你还可以给他设定任意的值,比如lay-ve

  • 解决layui追加或者动态修改的表单元素“没效果”的问题

    layui版本:2.2.6(考虑到一万年以后会有人遇到类似问题 先做个版本记录) 关于该问题的layui官方文档地址:http://www.layui.com/doc/modules/form.html 官方原文: 有些时候,你的有些表单元素可能是动态插入的.这时 Form模块 的自动化渲染是会对其失效的.虽然我们没有双向绑定机制(因为我们叫经典模块化框架,偷笑.gif) 但没有关系,你只需要执行 form.render(type, filter); 方法即可. 代码样例 $.post('htt

  • js表单元素checked、radio被选中的几种方法(详解)

    0.环境 <input type="checkbox"  value="lol"/>lol var lol = document.getElementsByTagName("input")[0]; 1.HTML DOM a.lol.checked = true; 属性的值可以不是lol,只要转为布尔值的时候为true就可以,取值时只有true.false两种 不会增加checked标记 b.lol.click(); 不会增加check

  • jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题

    HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br/><br/><div>搜索</div> 想要实现的结果: 1.input框获取焦点时value为"",失去焦点时value为"默认值":-----这个很好实现: 2.当在input框中输入要搜素的内容后,点击div搜索,要求控

  • 浅谈layui数据表格判断问题(加入表单元素),设置单元格样式

    如下所示: <script type="text/html" id="status"> {{# if(d.status === 1){ }} <span class="layui-badge layui-bg-green">正常</span> {{# } else { }} <span class="layui-badge">禁用</span> {{# } }} &l

  • HTML表单元素覆盖样式元素问题及其补救之道

    HTML表单元素覆盖样式元素问题及其补救之道

    在设计HTML页面的过程中经常会遇到表单元素覆盖样式元素引起的问题,图一就是一个典型的例子.不要小看这个貌似"低级"的问题,即使一些规模较大的网站上类似的问题也绝不鲜见.本文探讨了造成这一问题的根本原因,并提出一种补救办法--之所以说补救办法而不是一劳永逸的解决办法,是因为微软和NetScape这两个巨头也还没有对策. 一.HTML元素的显示优先级 HTML中常用的表单元素包括:文本区域(TEXTAREA),列表框(SELECT),文本输入框(INPUT type=text),密码输入

随机推荐