Layui-开关按钮

在平常的表单提交中将数据进行序列化,可以将全部的数据获取到配合一些方法可以快速的提交表单使其变得快捷,但是如果在表单中使用了layui的开关组件的话,会使得其中的按钮的值变得极其不稳定,比如当按钮是打开时获取到的值就是on,如果没有打开开关那么将不会获取到任何值甚至键名也没有,下面将解决这个问题,如下图

最后使用ajax将数据进行上传即可

在页面中如何获取到开关的值并且使用,例如筛选的条件,当按钮打开将进行筛选并刷新数据表格

使用按钮监听即可完成这个功能,方法如下图

  

再说一下表格重载,在一开始的时候加载页面需要将按钮的值一并提交,这样子在重载时就会更改后端的if判断使其变为一个筛选的样子

layui按钮的回填,在回填数据的时候你会发现,明明获取到了数据但是就是回填不了,因为layui的按钮需要使用layui里的表单回填方法才可以将数据回填上,使用方法如下图

一个layui结构的按钮

 

使用layui的表单回填找到按钮所在的容器,将数值回填于按钮

最后说一下layui按钮的属性,有checked(默认开关打开),disabled(按钮禁用),lay-text(自定义开关时两个状态的文本),value(设置自定义值)。下面将演示效果

效果图,页面样子与控制台的输出

 

 

以上就是本次介绍的全部内容,如果需要更详细的信息请到layui官网查阅

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值