欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

X-admin2.2中switch开关的监听,以及属性值获取和更改状态等操作

程序员文章站 2022-07-14 08:18:32
...

X-admin2.2中switch开关的监听,以及属性值获取和更改状态等操作
            
    
    博客分类: LayUi LayUi 

背景

最近在整合一个项目的后台管理系统中的权限部分功能时,用户有个启用和禁用的切换,先前是使用的按钮作为一个操作进行。

但是比较麻烦,最后决定使用layui的switch切换。通过参考文档及网友的经验,在此备记录,以备不时之需。

HTML代码部分:

<input type="checkbox" checked="" id="${row.id}" name="switch" 	lay-skin="switch" lay-filter="switchTest" lay-text="正常|禁用">

JavaScript代码部分:

	layui.use([ 'laydate', 'form' ], function() {
        var form = layui.form;
        //监听指定开关
        form.on('switch(switchTest)', function(data) {
            var status = 0;//0:正常;1:禁用;
            console.log(data);
            //开关是否开启,true或者false
            var checked = data.elem.checked;
            //获取所需属性值
            var id = data.elem.attributes['id'].nodeValue;
            alert(id);
            if (this.checked) {
                /*layer.msg('开关checked:' + (this.checked ? 'true' : 'false'), {
                    offset : '6px'
                });
                layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅 仅是ON|OFF', data.othis)*/
            } else {
                status = 1;
                /*layer.msg('开关: 关掉了', {
                    offset : '6px'
                });*/
            }
            alert(status);
            data = {};
            data["status"] = status
            result = Ajaxget.excute("/layui/user/addEdit", false, data, true)//发同步请求,把数据提交给后台;
        });
        //执行一个laydate实例
        laydate.render({
            elem : '#start' //指定元素
        });
        //执行一个laydate实例
        laydate.render({
            elem : '#end' //指定元素
        });
    });

相关阅读:

Spring Boot整合Java web项目

Spring Boot 踩坑系列之Error resolving template

Spring Boot集成X-admin2.2时,使用layui的字体图标时无法正常显示或乱码的解决办法

Maven项目中引入net.sf.json.JSONObject依赖jar包

X-admin2.2表单提交方式及注意事项

X-admin2.2中switch开关的监听,以及属性值获取和更改状态等操作

相关标签: LayUi