十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍LayUI中switch开关监听如何获取属性值、更改状态,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联建站是一家专业提供东洲企业网站建设,专注与网站建设、成都做网站、H5响应式网站、小程序制作等业务。10年已为东洲众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
使用方法
场景: 后台商品列表页,进行上下架状态的修改
①. html 代码参考
着重注意 我设置的两个属性值 lay-filter,switch_goods_id
②. 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是一款采用自身模块规范编写的前端UI框架,它遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,适合新手,并且它还提供了丰富的内置模块,他们皆可通过模块化的方式按需加载,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发,能够作为PC网页端后台系统与前台界面的速成开发方案。
以上是“LayUI中switch开关监听如何获取属性值、更改状态”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!