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

首先不管是单选框还是复选框或者是下拉框，都要在你写的标签外面套一层div或者是form标签，如：

<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男">
</div>，class属性是固定写法。

这样写好了以后，你如果是写在静态页面，这样式可以看见效果，如果写在js里，这样写了还有一步得写，那就是

var form = layui.form();
form.render("select"); //更新全部

这样写是外面套的是form标签，如果是div，就写layui.div();即可。

对于下拉框的事件的使用，语法form.on('event(过滤器值)', callback);

也可写成

var form=layui.form();

form.on('select(addywlb)', function(data){}),这里面的选中的值可以直接data.value;关于data里的数据结构，感兴趣可以console.log(data);打印出看看。获取选中的其他的属性值，和普通的用法一样，$("#cxYearBegin option:selected").attr("year");对了，关于select()括号里的值是这样来的 <select name="modules" lay-verify="required" lay-filter="cxYearBegin" lay-search="" id="cxYearBegin" >，根据这个lay-filter属性来获取。

如果是复选框的事件，就可以这样写

form.on('checkbox(filter)', function(data){});

如果是单选按钮是这样写：

form.on('radio(filter)', function(data){});

如果是开关按钮，事件是一样的：

form.on('switch(filter)', function(data){});

其中括号里的值都是通过lay-filter这个属性值来获取。

以上这篇对layui中表单元素的使用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用layui 渲染table数据表格的实例代码

    先上最终效果图: 1,引入layui的css和js文件 <link rel="stylesheet" href="lib/layui/css/layui.css" rel="external nofollow" > <script src="lib/layui/layui.js"></script> 2,在页面放置一个table元素 <table class="layui-h

  • Layui给数据表格动态添加一行并跳转到添加行所在页的方法

    Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现. 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行.上述功能官方并没有给出实现,需要自己手动解决. 解决思路及方案 简单分析:根据需求--动态添加一行,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格的每一行的每一个单元格都有其样式,因此,要想动态添加的一行与Layui数据表格渲染出来的每一行

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

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

  • 浅谈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

  • 对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 lay-verify form表单自定义验证规则详解

    官方文档详见:https://www.layui.com/doc/modules/form.html#verify 虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪. html: <input type="text" lay-verify="digital" placeholder="请输入数字"> <button type="but

  • layui表格设计以及数据初始化详解

    开发工具与关键技术: VisualStudio 2015 mvc 数据表格,在mvc项目中很多地方都会见到,一般做mvc项目我们所写的数据表格都不用自己纯敲的,因为纯敲代码量比较大且麻烦,所以我们都是用插件,以下面的为例,这是我写的layui表格设计以及数据初始化. 我们写数据表格之前,需要引用这个layui的插件,引用完后接下来就是,我们需要一个table来装数据,table里面有一些layui插件定义的元素. 如下图所示: 这个插件我们可以模块化使用,我们只用到table这一块,所以我们先需

  • Asp.Net MVC4通过id更新表单内容的思路详解

    用户需求是:一个表单一旦创建完,其中大部分的字段便不可再编辑.只能编辑其中部分字段. 而不可编辑是通过对input输入框设置disabled属性实现的,那么这时候直接向数据库中submit表单中的内容就会报错,因为有些不能为null的字段由于disabled属性根本无法在前端被获取而后更新至数据库. 有下面两种思路: 1.通过创建隐藏表单,为每一个disabled控件分别创建一个隐藏控件,但是这样的问题是工作量太大(如果表单有一千个属性,你懂的) 2.通过获取该表单在数据库中的id,把该id和可

  • 第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单.下面逐一给大家介绍,有兴趣的朋友一起学习吧. 创建垂直或基本表单: •·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-cont

  • jQuery表单插件ajaxForm实例详解

    前端时间写项目用到了ajaxForm这个插件,可以用它提交表单和上传图片,听起来和正常的form表单提交没什么区别,只不过是ajax提交,无需刷新页面,如此可以增加用户体验度. 引入两个文件,PS:必须 <script type="text/javascript" src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script> <script type="t

  • C++ 单链表的基本操作(详解)

    C++ 单链表的基本操作(详解)

    链表一直是面试的高频题,今天先总结一下单链表的使用,下节再总结双向链表的.本文主要有单链表的创建.插入.删除节点等. 1.概念 单链表是一种链式存取的数据结构,用一组地址任意的存储单元存放线性表中的数据元素. 链表中的数据是以结点来表示的,每个结点的构成:元素 + 指针,元素就是存储数据的存储单元,指针就是连接每个结点的地址数据.如下图: 2.链表的基本操作 SingleList.cpp: #include "stdafx.h" #include "SingleList.h&

  • Vuejs 单文件组件实例详解

    在之前的实例中,我们都是通过 Vue.component 或者 components 属性的方式来定义组件,这种方式在很多中小规模的项目中还好,但在复杂的项目中,下面这些缺点就非常明显了: 字符串模板:缺乏高亮,书写麻烦,特别是 HTML 多行的时候,虽然可以将模板写在 html 文件中,但是侵入性太强,不利于组件解耦分离. 不支持CSS:意味着当 HTML 和 JavaScript 组件化时,CSS明显被遗漏了 没有构建步骤:限制只能使用 HTML 和 ES5 JavaScript,而不能使用

随机推荐