前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >LayUI switch 开关监听 获取属性值、更改状态

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

作者头像
泥豆芽儿 MT
发布2019-03-20 14:52:49
19.2K0
发布2019-03-20 14:52:49
举报

背景

  • 今天在设计页面时,想使用一下 LayUIswitch 控件,在需要更改状态的时候进行 ajax请求传输
  • 需要获取其中的自定义属性值,同时根据服务器返回数据进行状态的更改
  • 通过参考文档及网友的经验,在此整理一番

使用方法

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

①. html 代码参考

  • 着重注意 我设置的两个属性值 lay-filter,switch_goods_id
代码语言:javascript
复制
<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回调数据,判断是否执行 “确定” 按钮后的状态改变即可
代码语言:javascript
复制
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; //开启该代码可禁止点击该按钮关闭
                }
            });
        });
    });
  • 简化后的代码如下(不需要弹出选择界面):
代码语言:javascript
复制
    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();
        });
    });

附录:

  • 注意: 当进行表格数据分页显示等需求时,注意完成代码替换后,进行再次渲染:
代码语言:javascript
复制
form.render(); //更新全部 也可以使用:layui.form.render()
form.render('select'); //刷新select选择框渲染
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年03月19日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景
  • 使用方法
    • ①. html 代码参考
      • ②. js 核心代码参考
        • 附录:
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档