文章目录
一. 问题背景
二. 解决方案

一. 问题背景
后台：SpringBoot

前端：Layui
情况：前端有一个数据表格，表格中的isManager列是一个开关。后台返回一个isManager数据，值为1或0，根据这个值是0还是1回显到layui的开关中的on或者off
参考自：layui admin table表格中根据后台数据动态渲染switch开关
二. 解决方案
首先给表格的isManager列绑定一个自定义模板，用来显示开关，如下：
table.render({
    	   ...
    	    ,cols: [[ //表头
    	      ...
    	      ,{field: 'isManager', title: '是否为管理员', align: 'center',
    	                templet: '#switchOnOff'}//根据id选择器绑定自定义模板
    	      ...
    	    ]]
    	  });
    	}

自定义模板，最最最关键的是在开关中使用行内语法{{d.isManager=="1"?"checked":""}}回显后台传来的isManager的值，如下：
<!--isManager字段的开关按钮-->
<script type="text/html" id="switchOnOff">
    <input type="checkbox" {{d.isManager=="1"?"checked":""}} name="isManager" lay-skin="switch"
           lay-filter="switchTest"
           lay-text="是|否">
</script>

其他写法可参考：layui admin table表格中根据后台数据动态渲染switch开关
总结： layui开关的回显功能，首先在表格内引用模板，然后定义模板，在模板内容引入开关。最最关键是如果想要使开关开就得使开关有checked属性

动态修改switch开关值


  

  
1.定义一个switch开关，默认为开(checked=”checked”)
  




<div class="layui-form-item">
                <label class="layui-form-label">是否可用</label>
                <div class="layui-input-block">
                    <input type="checkbox" lay-skin="switch" name="useable" id="useable" checked="checked" lay-filter="useable">
                    <span class="help-inline">“是”代表此数据可用，“否”则表示此数据不可用</span>
                </div>
            </div>


  

  
2.动态修改switch开关值
  


将switch开发中checked属性移除，并刷新




$("#sysData").removeAttr('checked');
form.render();  //实现全局刷新,元素更新必须使用,否则没有效果
//form.render(checkbox) // 实现局部刷新，只刷新switch开关


  

  
3.改变switch存值
  


开关，若为开，则默认存值为“on”，若为关，则默认存值为“”。 

 当我们需要不想存为“on”或者“”时，要相应处理进行处理。



//开关
<div class="layui-form-item">
                <label class="layui-form-label">是否系统数据</label>
                <div class="layui-input-block">
                    <input type="checkbox" lay-skin="switch" name="sysData" id="sysData" checked="checked">
                    <span class="help-inline">“是”代表此数据只有超级管理员能进行修改，“否”则表示拥有角色修改人员的权限都能进行修改</span>
                </div>
</div>
//提交按钮
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
layui.use(['form', 'jquery', 'upload'], function() {
$ = layui.$;
var form = layui.form;
//监听提交
form.on('submit(*)', function(data) { 
//submit(*)中的 * 号为事件过滤器的值，是在绑定执行提交的元素时设定的,eg:lay-filter="*"
                    //修改开关的值on或""
                    if(data.field.sysData == "on") {
                        data.field.sysData = "1";
                    } else {
                        data.field.sysData = "0";
                    }
        });
    });


  

  
4.改变开关默认文本on/off
  


lay-text=”文本1|文本2” 

 eg：lay-text=”开启|关闭” 



<div class="layui-form-item">
                <label class="layui-form-label">是否系统数据</label>
                <div class="layui-input-block">
                    <input type="checkbox" lay-skin="switch" name="sysData" id="sysData" checked="checked" lay-text="开启|关闭" >
                    <span class="help-inline">“是”代表此数据只有超级管理员能进行修改，“否”则表示拥有角色修改人员的权限都能进行修改</span>
                </div>
</div>

layui中的switch开关，能够去显示当前的状态，是否是启用还是禁用。当时如果当前记录的某个值没有进行填写，这行记录就不能被启用。并且页面上也要让他不能进行操作。
直接上代码：
// 页面状态栏事件监听
form.on('switch', function (data) {
var swithcData = data;
var id = data.value;// 获取要修改的ID
var state = this.checked ? '0' : '2';// 当前状态值
$.ajax({
url: '/adChannelConfig/editState',
data: {
"id": id,
"state": state
},
error: function (data) {
console.log(data);
layer.msg('数据异常，操作失败！');
},
// 修改失败，请填写对应的参数
success: function (data) {
if (data.data) {
layer.msg('操作成功！');
} else {
layer.msg(data.msg);
var em = $(swithcData.othis[0]);
swithcData.othis[0].classList.remove('layui-form-onswitch');
em.children('em').text('停用');
}
}
});
});
当后台发送添加失败的数据过来的时候，走的下面的else，我们把当前DOM对象用一个变量 swithcData 去接收，这个时候去删除到它的class属性。这个是来控制layui的switch的页面显示。
dom中的0里面，需要点击那个0才能实现，而数字型的属性名不能用“.”来获取，故写成[0]。
以上这篇LayUi使用switch开关,动态的去控制它是否被启用的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

需求如下图所示： 



代码如下： 

<input class="switch" type="checkbox" lay-skin="switch" lay-filter="mode" lay-text="开|关">
<script type="text/javascript">
    layui.use('form', function () {
        var form = layui.form;
        //开关
        form.on('switch(mode)', function (data) {
		 var swithcData = data;
            var status = 0;
            if (!data.elem.checked) {
                status = 1;
            }
            var json = {"id":{$vo.id},"status": status};
            $.post("后端请求地址", json, function (data) {
                    if(data!=null){
                    mui.alert('该支付通道已关闭，暂时无法使用', '提示');
                    //修改switch开关为关闭状态
                    var em = $(swithcData.othis[0]);
                    swithcData.othis[0].classList.remove('layui-form-onswitch');
                    em.children('em').text('关');
                }
            });
        });
    });
</script>