LayUI switch 开关监听 获取属性值、更改状态的方法
网络编程 2021-07-04 15:01www.168986.cn编程入门
今天长沙网络推广就为大家分享一篇LayUI switch 开关监听 获取属性值、更改状态的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
背景
今天在设计页面时,想使用一下 LayUI 的 switch 控件,在需要更改状态的时候进行 ajax请求传输
需要获取其中的自定义属性值,根据服务器返回数据进行状态的更改
通过参考文档及网友的经验,在此整理一番
使用方法
场景 后台商品列表页,进行上下架状态的修改
①. html 代码参考
着重注意 我设置的两个属性值 lay-filter,switch_goods_id
<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回调数据,判断是否执行 “确定” 按钮后的状态改变即可
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 switch 开关监听 获取属性值、更改状态的方法就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程