LayUI switch开关监听事件操作
文章描述：
layui是一款很好用的前端组件，那么switch开关怎么获取事件、获取属性值和更改状态呢？
需求场景
在数据列表和编辑内容区域需要加一个状态的开关按钮，想使用一下 LayUI 的 switch 控件，在需要更改状态的时候进行 ajax请求传输
html
设置的两个属性值 lay-filter,switch_data_id，switch_data_id里面存的值是数据的id，设置switch一个默认开启状态
<div class="layui-form">
<input type="checkbox" class="switch_checked" lay-filter="switchDataID" switch_data_id="1" lay-skin="switch" checked lay-text="开启|关闭">
<input type="checkbox" class="switch_checked" lay-filter="switchDataID" switch_data_id="2" lay-skin="switch" lay-text="开启|关闭">
</div>注意：在switch使用的外面一定要有一个class为layui-form的标签
js
当点击switch开关后需要获取当前需要更改状态的数据ID,然后通过ajax回调数据
layui.use(['form'], function () {
var form = layui.form;
form.on('switch(switchDataID)',function (data) {
//开关是否开启，true或者false
var checked = data.elem.checked;
layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
offset: '6px'
});
layer.tips('温馨提示：click', data.othis)
//获取所需属性值
var switch_data_id = data.elem.attributes['switch_data_id'].nodeValue;
console.log(checked);
console.log(switch_data_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选择框渲染ajax
使用ajax把数据ID传递到指定页面进行操作
$.ajax({
type:'post',
url:"",
data:{id:id},
dataType:"json",
async: false,
success:function(data){
},error:function(e){
console.log(e.responseText);
}
});
发布时间：2021/08/12
发表评论