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 pagination插件实现无刷新分页代码
Oct 13 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
jQuery技巧总结
2011/01/01 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
Python 基础教程之闭包的使用方法
2017/09/29 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
高级Java程序员面试要点
2013/08/02 面试题
机械专业应届生求职信
2013/09/21 职场文书
会计职业生涯规划范文
2014/01/04 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
学校远程教育工作总结
2015/08/11 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
小学运动会入场口号
2015/12/24 职场文书
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers