LayUI switch 开关监听 获取属性值、更改状态的方法

背景

今天在设计页面时,想使用一下 LayUI 的 switch 控件,在需要更改状态的时候进行 ajax请求传输

需要获取其中的自定义属性值,同时根据服务器返回数据进行状态的更改

通过参考文档及网友的经验,在此整理一番

使用方法

场景: 后台商品列表页,进行上下架状态的修改

①. 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 开关监听 获取属性值、更改状态的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • layui中的switch开关实现方法

    效果如下图: 显然这个插件是一个checkbox,只是在layui中封装了.所以layui的js和css是必不可少的. Html代码: <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">开关</label> <div class=

  • layui switch 开关监听 弹出确定状态转换的例子

    不废话,直接上图: 原始状态: 点击确定: 点击取消或者X 代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="static/layui/css/layui.css"

  • LayUi使用switch开关,动态的去控制它是否被启用的方法

    layui中的switch开关,能够去显示当前的状态,是否是启用还是禁用.当时如果当前记录的某个值没有进行填写,这行记录就不能被启用.并且页面上也要让他不能进行操作. 直接上代码: // 页面状态栏事件监听 form.on('switch', function (data) { var swithcData = data; var id = data.value;// 获取要修改的ID var state = this.checked ? '0' : '2';// 当前状态值 $.ajax({

  • LayUI switch 开关监听 获取属性值、更改状态的方法

    背景 今天在设计页面时,想使用一下 LayUI 的 switch 控件,在需要更改状态的时候进行 ajax请求传输 需要获取其中的自定义属性值,同时根据服务器返回数据进行状态的更改 通过参考文档及网友的经验,在此整理一番 使用方法 场景: 后台商品列表页,进行上下架状态的修改 ①. html 代码参考 着重注意 我设置的两个属性值 lay-filter,switch_goods_id <input type="checkbox" class="switch_checke

  • Angular中使用$watch监听object属性值的变化(详解)

    Angular中的$watch可以监听属性值的变化,然后并做出相应处理. 常见用法: $scope.$watch("person", function(n, o){ //todo something... }) 但是对于一个对象中的某个属性值变化时,$watch似乎不管用了. 示例代码: <body> <div ng-controller="mainCtrl"> <input id="myText" type=&qu

  • Vuejs监听vuex中值的变化的方法示例

    比如说,例如,你有一篮子水果,每次你从篮子里添加或拿走水果 ,你想显示有关水果数量的信息,但是你也想当篮子中数量变化的时候收到通知. fruit-count-component.vue <template> <p>Fruits: {{ count }}</p> </template> <script> import basket from '../resources/fruit-basket' export default () { comput

  • 解决layui下拉框监听问题(监听不到值的变化)

    关于layui监听下拉框值得变化,大家都知道官方文档给我们提供了一个方法 form.on('select(demo)',function(data){ console.log(data.value)//打印当前select选中的值 }) 按照我之前的理解,监听下拉框值得变化,就是只有下拉框的值发生了改变,才会触发这个事件,否则就不触发.但是这个方法是,只要你鼠标点击了下拉选项里面的值,不论这个值跟之前的值是否相等,都会触发这个事件. 下面说一下我的解决办法 1.首先,我写了一个input框,用来

  • vue组件props属性监听不到值变化问题

    目录 props属性监听不到值变化问题 props监听变化的几种方式 应用场景 1.computed 计算属性 2.methods 方法 3.watch 侦听器 props属性监听不到值变化问题 在写项目时遇到一个问题,父组件传到子组件的prop,在子组件监听不到变化, 遂查看vue文档,得知watch有一种深度监听的方法. 阅读vue文档如下代码.=> var vm = new Vue({   data: {     a: 1,     b: 2,     c: 3,     d: 4,  

  • js监听input输入框值的实时变化实例

    1.在元素上同时绑定 oninput 和onporpertychanger事件 例: <script type="text/JavaScript"> function aa(e){alert("inputting!!");} </script> <input type="text" id="a" oninput="aa(event)" onporpertychange=&quo

  • AngularJS实现一次监听多个值发生的变化

    一.$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name} . listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参

  • java正则表达式获取指定HTML标签的指定属性值且替换的方法

    实例如下: public static String repDomain(String source, String domain, String element, String attr) { String img = ""; Pattern p_image; Matcher m_image; String regEx_img = "<" + element + "[^<>]*?\\s" + attr + "=['\

  • jquery attr()设置和获取属性值实例教程

    语法: 1.attr("属性名"): //获取属性的值(取得第一个匹配元素的属性.通过这个方法可以方便的从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回undefined) 2.attr("属性名","属性值"); //设置属性的值(为所有匹配的元素设置一个属性值) 3.attr("属性名","函数值"); //设置属性的函数值(为所有匹配的元素设置一个计算的属性值.不提供值,而是提供一个函

随机推荐