layui admin table表格中根据后台数据动态渲染switch开关

前言

本篇文章基于layui-admin官方后台模板

使用templet(模板)，将开关放入table表格里面

如下图的，templet: statusTpl

<script>
  layui.config({
    base: '../../layuiadmin/'
  }).extend({
    index: 'lib/index'
  }).use(['index', 'table'], function() {
	var table = layui.table;
	
	table.init('terminal', {
		// ...此处省略
		,cols: [[
 			{ field: 'state', title: '状态', align: 'center', templet: statusTpl } 
 		]]	
	})
  });
</script>

模板有两种方式定义，根据自己喜好选择其中一种：

不管是第一种还是第二种，statusTpl 命名都需要保持一致
需要注意的是：这里的 d.state 是我这边后台数据，d.state == 1表示启用，else就是禁用，需要改成你自己的判断

第一种

// 参数d是当前行数据
var statusTpl = function(d) {
	// if else判断
   if (d.state == 1) {
	 return '<input type="checkbox" lay-skin="switch" lay-text="启用|禁用" checked> ';
   } else {
	 return '<input type="checkbox" lay-skin="switch" lay-text="启用|禁用"> ';
   }
};

// 参数d是当前行数据
var statusTpl = function(d) {
   // 三元运算符
   var isCkecked = d.state == "1" ? "checked" : "";
   return '<input type="checkbox" lay-skin="switch" lay-text="启用|禁用" '+ isCkecked +'> ';
};

第二种

 <script type="text/html" id="statusTpl">
  	// 三元运算符,如果想使用 if else 下面注释的写法即可
  	// 这里的 d 和上面的是一样的，表示当前行数据
    <input type="checkbox" lay-skin="switch" lay-text="启用|禁用" {{ d.state == "1" ? "checked" : "" }}>
 </script>

 <script type="text/html" id="statusTpl">
  	// 可以使用 d 表示当前行数据
    //if else 判断在模板里有点区别
    //js语法在模板中使用 以{{#开头  js语句 if(){   }}结束
    {{# if(){ }}
    {{# }else{ }}
    {{# } }} 
 </script>

两个模板放置的位置

第一种

<script>
  layui.config({
    base: '../../layuiadmin/'
  }).extend({
    index: 'lib/index'
  }).use(['index', 'table'], function () {
	var table = layui.table;
	
	// 参数d是当前行数据
	var statusTpl = function(d) {
	   if (d.state == 1) {
		 return '<input type="checkbox" lay-skin="switch" lay-text="启用|禁用" checked> ';
	   } else {
		 return '<input type="checkbox" lay-skin="switch" lay-text="启用|禁用"> ';
	   }
	};
	
	table.init('terminal', {
		// ...此处省略业务代码
		,cols: [[
 			{ field:'state', title: '状态', align:'center', templet: statusTpl } 
 		]]	
	})
  });
</script>

第二种

<script type="text/html" id="statusTpl">
  	// 这里的 d 和上面的是一样的，表示当前行数据
    <input type="checkbox" lay-skin="switch" lay-text="启用|禁用" {{ d.state == "1" ? "checked" : "" }}>
</script>

<script>
  layui.config({
    base: '../../layuiadmin/'
  }).extend({
    index: 'lib/index'
  }).use(['index', 'table'], function() {
	var table = layui.table;

	table.init('terminal', {
		// ...此处省略业务代码
		,cols: [[
 			{ field: 'state', title: '状态', align: 'center', templet: statusTpl } 
 		]]	
	})
  });
</script>

效果图

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。