在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折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
javascript面向对象之二 命名空间
2011/02/08 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
python计算N天之后日期的方法
2015/03/31 Python
python3爬取各类天气信息
2018/02/24 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
python实现LRU热点缓存及原理
2019/10/29 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
2014年国庆节广播稿
2014/09/19 职场文书
教师节寄语2015
2015/03/23 职场文书
孟佩杰观后感
2015/06/17 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
2019 入党申请书范文
2019/07/10 职场文书
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技