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 相关文章推荐
可实现多表单提交的javascript函数
Aug 01 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
JavaScript中的this基本问题实例小结
Mar 09 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
用PHP和ACCESS写聊天室(五)
2006/10/09 PHP
PHP队列用法实例
2014/11/05 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python计算圆周率pi的方法
2015/07/11 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
竞聘演讲稿
2014/04/24 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
教师节横幅标语
2014/10/08 职场文书
基层党建工作简报
2015/07/21 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
详解 TypeScript 枚举类型
2021/11/02 Javascript
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python