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 相关文章推荐
JS实现标签页效果(配合css)
Apr 03 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
es6 symbol的实现方法示例
Apr 02 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
webpack proxy 使用(代理的使用)
Jan 10 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
4.与数据库的连接
2006/10/09 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
详解Python的Django框架中的templates设置
2015/05/11 Python
python实现汉诺塔方法汇总
2016/07/25 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
办公室主任先进事迹
2014/01/18 职场文书
销售主管竞聘书
2014/03/31 职场文书
继承权公证书
2014/04/09 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
python tqdm用法及实例详解
2021/06/16 Python