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 相关文章推荐
基于JQuery制作的产品广告效果
Dec 08 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
Vue生命周期示例详解
Apr 12 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
回顾Javascript React基础
Jun 15 Javascript
Javascript call及apply应用场景及实例
Aug 26 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
php发送http请求的常用方法分析
2016/11/08 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
javascript forEach通用循环遍历方法
2010/10/11 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
python 字符串格式化的示例
2020/09/21 Python
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
国际商务专业学生个人的自我评价
2013/09/28 职场文书
怎么样写好简历中的自我评价
2013/10/25 职场文书
党员年终个人总结
2015/02/14 职场文书
怎样写观后感
2015/06/19 职场文书
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL