将后台传来的数据回显到Layui开关中

傷城~ 2023-03-01 12:28 7阅读 0赞

### 文章目录 ###

*  一. 问题背景
 *  二. 解决方案

# 一. 问题背景 #

后台：SpringBoot  
前端：Layui

**情况**：前端有一个数据表格，表格中的isManager列是一个开关。后台返回一个isManager数据，值为1或0，根据这个值是0还是1回显到layui的开关中的on或者off

参考自：[layui admin table表格中根据后台数据动态渲染switch开关][layui admin table_switch]

# 二. 解决方案 #

首先给表格的isManager列绑定一个自定义模板，用来显示开关，如下：

table.render({ 
        	   ...
        	    ,cols: [[ //表头
        	      ...
        	      ,{ field: 'isManager', title: '是否为管理员', align: 'center',
        	                templet: '#switchOnOff'}//根据id选择器绑定自定义模板
        	      ...
        	    ]]
        	  });
        	}

自定义模板，**最最最关键的是在开关中使用行内语法`{ {d.isManager=="1"?"checked":""}}`回显后台传来的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 admin table_switch]

**总结：** layui开关的回显功能，首先在表格内引用模板，然后定义模板，在模板内容引入开关。**最最关键是如果想要使开关开就得使开关有checked属性**

[layui admin table_switch]: https://blog.csdn.net/weixin_43233914/article/details/85289106?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param