templet渲染layui表格数据的三种方式

layui前端框架是我一直在使用，也很好用。

今天记录一下，templet渲染layui表格数据的三种方式。

第一种：直接渲染（对于表格数据样式要求不高）

直接在动态表格字段声明，添加templet属性，在其后面加上简单html代码。（{{d.name}}这个是layui内置的模板输出）

{ field: 'name',width: 180,align:"center",title: '用户名',
templet:"<div style='color:red;'>{{d.name}}</div>"}},

第二种：先处理数据再显示（适用于数据进一步优化）

在script声明函数，例如下面：将时间戳数据（10位数）改为时间格式

function formatDate(timestamp) {
	var now = new Date(timestamp*1000);
	var year=now.getFullYear(); 
	var month=now.getMonth()+1; 
	var date=now.getDate(); 
	var hour=now.getHours(); 
	var minute=now.getMinutes(); 
	var second=now.getSeconds(); 
	return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
}

在添加上面执行代码，如下：

{ field: 'time',width: 180,align:"center",title: '访问时间',
templet: function (d){
	return formatDate(d.time);
}},

最终显示：2019-8-5 18:3:3

第三种：使用layui内置数据模板（适合精美的样式）

直接在动态表格字段声明，添加templet属性，并设置值为要访问script标签的ID

{ field: 'status',  title: '是否开启',templet: '#statusFun' },

上面那个'#statusFun'，链接的是下面代码：

<script type="text/html" id="statusFun">
	{{#  if(d.status == 1){ }}
		<div style="color:blue;">开启</div>
	{{#  } else { }}
		<div style="color:red;">开启</div>
	{{#  } }}
</script>