`

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前端框架

    1. **下载与引入**:从官方网站或GitHub仓库获取X-admin v2.2的压缩包,解压后将CSS、JS、图片等资源引入到项目中。 2. **页面结构规划**:根据后台管理的需求,规划页面的基本结构,如头部、侧边栏、主要内容区域等...

    x-admin 2.2 最新版本下载

    【标题】"x-admin 2.2 最新版本下载"所指的是一款名为x-admin的前端框架的最新更新。x-admin是一个广泛应用于后台管理系统的HTML5前端解决方案,它旨在为开发者提供一套完整的、高效的开发模板,帮助他们快速构建出...

    X-admin-v2.2.rar

    《X-admin-v2.2:基于layui的全能后台静态页面框架》 X-admin-v2.2是一款基于layui框架精心打造的后台静态页面模板,它旨在为开发者提供一套完整且易于使用的界面解决方案。layui是一个强大的前端模块化框架,以其...

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

    在实际应用中,x-admin v2.2模版通常作为后台管理系统的起点,开发者可以在此基础上进行定制,添加业务逻辑和功能模块。模版的结构清晰,易于理解和修改,大大降低了开发难度。例如,开发者可以通过修改CSS样式来...

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

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

    X-admin-2.2.zip

    在这款压缩包文件“X-admin-2.2.zip”中,包含了完整的源码和必要的资源文件,让开发者能够快速地搭建起一个功能完善的后台管理系统。 一、LayUI介绍 LayUI是一款轻量级的前端组件库,它以简洁、直观的API和优雅的...

    X-admin V2.2

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

    X-admin-v2.2.zip.lnk

    X-admin-v2.2.zip.lnk

    xadmin后台管理模板框架,类似layuiadmin

    总的来说,X-admin是一个高效且易用的后台管理模板框架,它结合了layui、jQuery和echarts等优秀技术,为开发者提供了丰富的组件和强大的功能,能够帮助快速构建出专业、美观且功能完备的后台管理系统。无论你是初次...

    xadmin2.2.zip

    【xadmin2.2.zip】是一个包含x-admin2.2版本的示例文件包,它主要用于展示和演示这个流行的Python后台管理系统框架的功能和用法。x-admin是一个基于Django框架的二次开发工具,用于快速构建高效、美观的管理界面。在...

    inspinia_admin-v2.2

    "Inspinia_admin-v2.2" 是一个基于Bootstrap框架构建的现代Web应用程序后台管理界面模板。这个模板专为开发人员设计,提供了丰富的UI组件、布局选项和功能,旨在简化和加速后台系统的前端开发工作。它包含了一系列的...

    layer 后端模板X-admin

    Layer是一个轻量级的JavaScript弹层组件,常用于网页中的各种提示、对话框以及丰富的弹出窗口效果,而X-admin则是基于layer的扩展,专注于后台管理界面的设计。 X-admin模板的特点在于其模块化和响应式布局,能够...

    X-admin后台管理框架

    X-admin还集成了诸如jQuery、Charts.js、Highcharts等常用的JavaScript库和插件,用于数据可视化、表单验证、时间日期选择等功能。这些插件的引入,大大增强了后台管理系统的功能性和交互性。 5. **易于定制和扩展...

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

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

    X-admin代码.zip

    在X-admin中,前端代码可能包括这些语言的实现,以及响应式布局、交互设计、动画效果等内容。为了实现高效的后台管理,X-admin可能会使用现代前端框架和库,比如Vue.js、React或Angular,或者像本例中提到的“layui...

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

    2. 功能开发:根据业务需求,编写或修改控制器和模型,实现数据操作逻辑,并在视图层利用X-admin的组件展示数据。 3. 自定义主题:通过修改CSS样式和布局,打造个性化的后台界面。 4. 性能优化:针对具体应用场景,...

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

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

    X-admin所有版本.zip

    同时,每个版本的更新日志也是开发者不容忽视的部分,它们记录了每一次迭代中的修复问题、新增功能和优化改进,可以帮助我们更好地理解和利用X-admin。 总结来说,"X-admin所有版本.zip"这个压缩包如同一部历史书,...

    daniuit-X-admin.zip

    在“daniuit-X-admin”项目中,我们可以看到这些组件的灵活运用,如通过表格组件展示数据,表单组件进行信息录入,按钮组件触发各种操作,以及弹层和提示组件提供交互反馈。 其次,lay-ui注重用户体验,强调响应式...

Global site tag (gtag.js) - Google Analytics