LayUI switch 开关监听 获取属性值、更改状态的方法


Posted in Javascript onSeptember 21, 2019

背景

今天在设计页面时,想使用一下 LayUI 的 switch 控件,在需要更改状态的时候进行 ajax请求传输

需要获取其中的自定义属性值,同时根据服务器返回数据进行状态的更改

通过参考文档及网友的经验,在此整理一番

使用方法

LayUI switch 开关监听 获取属性值、更改状态的方法

场景: 后台商品列表页,进行上下架状态的修改

①. html 代码参考

着重注意 我设置的两个属性值 lay-filter,switch_goods_id

<input type="checkbox" class="switch_checked" lay-filter="switchGoodsID" switch_goods_id="{$vo['goods_id']}" lay-skin="switch" {$vo['status_checked']} lay-text="上架|下架">

②. js 核心代码参考

以我的设计思路,需要获取当前需要更改状态的商品ID,然后通过ajax回调数据,判断是否执行 “确定” 按钮后的状态改变即可

layui.use(['form'], function () {
 var form = layui.form;
 form.on('switch(switchGoodsID)',function (data) {
  //开关是否开启,true或者false
  var checked = data.elem.checked;
  //获取所需属性值
  var switch_goods_id = data.elem.attributes['switch_goods_id'].nodeValue;
  console.log(checked);
  console.log(switch_goods_id);
  layer.msg('合理搭配,展示不一样的风格', {
  time: 5000, //5s后自动关闭
  btn: ['确定', '取消']
  ,yes: function(index){
   //TODO 此时进行ajax的服务器访问,如果返回数据正常,则进行后面代码的调用
   data.elem.checked = checked;
   form.render();
   layer.close(index);
   //按钮【按钮一】的回调
  }
  ,btn2: function(index){
   //按钮【按钮二】的回调
   data.elem.checked=!checked;
   form.render();
   layer.close(index);
   //return false; //开启该代码可禁止点击该按钮关闭
  }
  });
 });
 });

简化后的代码如下(不需要弹出选择界面):

layui.use(['form'], function () {
 var form = layui.form;
 form.on('switch(switchGoodsID)',function (data) {
  //开关是否开启,true或者false
  var checked = data.elem.checked;
  //获取所需属性值
  var switch_goods_id = data.elem.attributes['switch_goods_id'].nodeValue;
  console.log(checked);
  console.log(switch_goods_id);
  //TODO 此时进行ajax的服务器访问,如果返回数据正常,则进行后面代码的调用
  var serverStatus = 1;
  if(serverStatus){
  data.elem.checked = checked;
  }else {
  data.elem.checked = !checked;
  }
  form.render();
 });
 });

附录:

注意:

当进行表格数据分页显示等需求时,注意完成代码替换后,进行再次渲染:

form.render(); //更新全部 也可以使用:layui.form.render()
form.render('select'); //刷新select选择框渲染

LayUI switch 开关监听 获取属性值、更改状态的方法

以上这篇LayUI switch 开关监听 获取属性值、更改状态的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用隐藏的new来创建对象
Mar 29 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
去除html代码里面的script正则方法
May 19 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
Vue登录主页动态背景短视频制作
Sep 21 #Javascript
layui table 获取分页 limit的方法
Sep 20 #Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 #Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 #Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 #Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 #Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 #Javascript
You might like
javascript与CSS复习(二)
2010/06/29 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
使用python实现接口的方法
2017/07/07 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
房屋出售协议书
2014/04/10 职场文书
安全生产目标责任书
2014/04/14 职场文书
经典毕业生求职信
2014/07/12 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
Python基础之pandas数据合并
2021/04/27 Python
Python访问Redis的详细操作
2021/06/26 Python
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB