背景
最近在整合一个项目的后台管理系统中的权限部分功能时,用户有个启用和禁用的切换,先前是使用的按钮作为一个操作进行。
但是比较麻烦,最后决定使用layui的switch切换。通过参考文档及网友的经验,在此备记录,以备不时之需。
HTML代码部分:
<input type="checkbox" checked="" id="${row.id}" name="switch" lay-skin="switch" lay-filter="switchTest" lay-text="正常|禁用">
JavaScript代码部分:
layui.use([ 'laydate', 'form' ], function() {
var form = layui.form;
//监听指定开关
form.on('switch(switchTest)', function(data) {
var status = 0;//0:正常;1:禁用;
console.log(data);
//开关是否开启,true或者false
var checked = data.elem.checked;
//获取所需属性值
var id = data.elem.attributes['id'].nodeValue;
alert(id);
if (this.checked) {
/*layer.msg('开关checked:' + (this.checked ? 'true' : 'false'), {
offset : '6px'
});
layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅 仅是ON|OFF', data.othis)*/
} else {
status = 1;
/*layer.msg('开关: 关掉了', {
offset : '6px'
});*/
}
alert(status);
data = {};
data["status"] = status
result = Ajaxget.excute("/layui/user/addEdit", false, data, true)//发同步请求,把数据提交给后台;
});
//执行一个laydate实例
laydate.render({
elem : '#start' //指定元素
});
//执行一个laydate实例
laydate.render({
elem : '#end' //指定元素
});
});
相关阅读:
Spring Boot 踩坑系列之Error resolving template
Spring Boot集成X-admin2.2时,使用layui的字体图标时无法正常显示或乱码的解决办法