js开关按钮ajax,在Layui中实现开关按钮的效果实例

本文介绍了如何在Layui中通过JavaScript和CSS实现表格中的开关按钮效果。通过formatter函数根据row.isValid值动态渲染按钮状态,并在用户切换开关时调用changState函数处理状态修改。同时,文章提供了onLoadSuccess回调中加载表单并监听switch事件的示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先引入js,css

然后我有一个list表格 其中有个字段叫 是否有效

{title: "是否有效", field: "isValid",align:"center",formatter:function(value,row,index){

if(row.isValid == 1){

return "

}else {

return "

}

}},

执行这一步才能渲染出效果

onLoadSuccess: function (data) {

layui.use('form', function(){

var form = layui.form;

form.render('checkbox');

form.on('switch(isValid)', function(data){

changState(data.value,data.elem.checked);

});

form.on('switch(isTraining)', function(data){

changState1(data.value,data.elem.checked);

});

form.on('switch(isTraining)', function(data){

changState1(data.value,data.elem.checked);

});

});

}

9df717808d191cac64afe00821ae358e.png

接着要判断状态是否修改成功

88c333ac47e63b6d2d9c528edbb6e200.png

以上这篇在Layui中实现开关按钮的效果实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2019-09-27

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值