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吗?
Feb 24 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
python实现的重启关机程序实例
2014/08/21 Python
python中map、any、all函数用法分析
2015/04/21 Python
详解用python实现简单的遗传算法
2018/01/02 Python
理论讲解python多进程并发编程
2018/02/09 Python
python-str,list,set间的转换实例
2018/06/27 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Python如何在DataFrame增加数值
2020/02/14 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
高中的职业生涯规划书
2013/12/28 职场文书
企业务虚会发言材料
2014/10/20 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers