`

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

阅读更多

sw调度itch.png

背景

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

但是比较麻烦,最后决定使用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开关的监听,以及属性值获取和更改状态等操作

分享到:
评论

相关推荐

    X-admin-v2.2前端框架

    X-admin基于layui的轻量级前端后台管理框架,简单免费,兼容性好,面向所有层次的前后端程序。创立于2017年初,为了敏捷WEB应用开发和简化企业应用开发而诞生的

    X-admin-v2.2.rar

    并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发前端后台框架,众多的典型案例确保可以稳定用于商业以及门户级...

    x-admin 2.2 最新版本下载

    前端 x-admin,前端框架,x-admin 2.2,x-admin

    X-admin V2.2

    X-admin从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长...

    X-admin-v2.2.zip.lnk

    X-admin-v2.2.zip.lnk

    X-admin-2.2.zip

    基于LayUI的后台开发框架X-admin-2.2.zip,官方下载需要微信注册登录,这里直接提供最新版本下载

    x-admin v2.2模版 html5模版 网页模版

    x-admin v2.2模版 html5模版 网页模版

    zblog2.2企业模板jiuyi通用模板免费下载

    绿色大气zblog2.2企业模板jiuyi(升级版)提供给大家。增加了主题设置功能,可以直接在后台方便修改页面信息。 增加了seo配置模块,便捷的设置网站标题,摘要和关键词,有利于搜索排名。 主题代码简洁 DIV+CSS编码而成...

    X-admin-v1.0.rar

    并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发前端后台框架,众多的典型案例确保可以稳定用于商业以及门户级...

    X-admin 2.0前端后台框架HTML模板

    并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发前端后台框架,众多的典型案例确保可以稳定用于商业以及门户级...

    成绩管理系统源码,前端采用X-adminV2.2,后端采用ThinkPHP V6.0.7框架开发

    在线录入和修改成绩、表格录入成绩、扫码枪录入成绩 查看成绩列表、成绩图表 查看成绩统计结果(表格、柱形图、折线图、雷达图、箱体图、仪表图、成绩报告) 查看学生历次成绩(表格+拆线图) 教师和学生不同身份的登录 ...

    x-admin2.0 一个免费易用的前端后台模板

    并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发前端后台框架,众多的典型案例确保可以稳定用于商业以及门户级...

    IDEA环境下的搭建的SSM框架+X-admin-v2.1的后台界面+示例

    IDEA环境下的搭建的SSM框架+X-admin-v2.1的后台界面+示例 没事儿的时候自己搭建的一套开发框架,基本上满足后台系统开发的需求了。 与数据库的交互示例,前台和后台的交互示例都写上了。 直接在上边写功能模块就是...

    基于X-admin后台源码&数据库.rar

    基于开源模板X-admin后台管理 封装后台模板源码&数据库 X-admin网站 http://x.xuebingsi.com/

    django-docs-2.2-zh-hans.zip

    入门教程: 第1节: 请求和响应 | 第2节: 模型和 admin 站点 | 第3节: 视图和模板 | 第4节: 表单和通用视图 | 第5节: 测试 | 第6节: 静态文件 | 第7节: 自定义 admin 站点 进阶教程 : 如何编写可复用的应用 | 提交你的...

    X-admin经典前端后台管理模板 v2.2.zip

    X-admin经典前端后台管理模板 v2.2.zip

    daniuit-X-admin-master

    分享一款轻量级的后台管理html模板。基于X-admin通用后台管理html模板.

    inspinia_admin-v2.2

    最新最全的版本,少一个文件你K死我。10分绝对超值

    EL-ADMIN是一个非常火的java框架 , EL-ADMIN Flutter,EL-ADMIN APP 源码

    EL-ADMIN这个框架在java非常火,后端和前端的技术非常先进,发现缺少一个原生APP,经过一段时间的研究,使用Flutter把EL-ADMIN原生的APP做出来 1)这是自己开发的源码 2)提供几个获取列表、明细的例子,其它完全...

Global site tag (gtag.js) - Google Analytics