LayUI
的 switch
控件,在需要更改状态的时候进行 ajax请求传输
场景: 后台商品列表页,进行上下架状态的修改
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="上架|下架">
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选择框渲染
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有