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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
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+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
初步解析Python下的多进程编程
2015/04/28 Python
浅析Python中的多条件排序实现
2016/06/07 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Python中过滤字符串列表的方法
2020/12/22 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
狼和鹿教学反思
2014/02/05 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers