在Layui中实现开关按钮的效果实例


Posted in Javascript onSeptember 29, 2019

首先引入js,css

<script src="/common/plugins/layui-v2.2.5/layui.js" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="/common/plugins/layui-v2.2.5/css/layui.css" rel="external nofollow" />

然后我有一个list表格 其中有个字段叫 是否有效

{title: "是否有效", field: "isValid",align:"center",formatter:function(value,row,index){
    if(row.isValid == 1){
            return "<div class=\"layui-form\"> <input type=\"checkbox\" value=\""+row.id+"\" name=\"isValid\" lay-filter=\"isValid\" checked lay-skin=\"switch\" lay-text=\"是|否\"></div>";
             }else {
               return "<div class=\"layui-form\"> <input type=\"checkbox\" value=\""+row.id+"\" name=\"isValid\" lay-filter=\"isValid\" lay-skin=\"switch\" lay-text=\"是|否\"></div>";
             }

          }},

执行这一步才能渲染出效果

onLoadSuccess: function (data) {
     layui.use('form', function(){
         var form = layui.form; 
         form.render('checkbox');
         form.on('switch(isValid)', function(data){
           changState(data.value,data.elem.checked);
         });
         form.on('switch(isTraining)', function(data){
           changState1(data.value,data.elem.checked);
         });
   form.on('switch(isTraining)', function(data){
   changState1(data.value,data.elem.checked);
   });
       });

       }

在Layui中实现开关按钮的效果实例

接着要判断状态是否修改成功

在Layui中实现开关按钮的效果实例

以上这篇在Layui中实现开关按钮的效果实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
Vue实现一个无限加载列表功能
Nov 13 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 #Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 #Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 #Javascript
react用Redux中央仓库实现一个todolist
Sep 29 #Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 #Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 #Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 #Javascript
You might like
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
js实现内置计时器
2019/12/16 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
python赋值操作方法分享
2013/03/23 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
P/Invoke是什么
2015/07/31 面试题
网游商务专员求职信
2013/10/15 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
学习交流会主持词
2014/04/01 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
学习退步检讨书
2014/09/28 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
雷锋的故事观后感
2015/06/10 职场文书
Python测试框架pytest高阶用法全面详解
2022/06/01 Python