一生猿，一世猿。
—— 猿医生·yys
目录
一、前言
“甭管好不好用，先好看再说”，产品经理一句话，阐述了我两年的心声 （再现任公司已两年，依然是升职加薪无望的
攻城狮，哈哈 ~），相信有很多猿友跟我一样，看着自己写的优秀代码，不论是注释布局，效率逻辑都是那么的完美，可
偏偏，前台的UI 页面，如此之不忍直视 ~
经过多轮角逐，最后采用 Layui框架 来进行 xuewei 调整，不管如何，“好看 ”了..就是最大的进步...
正如标题所言，小主在实际运用中，对于 table数据表格中 templet自定义列模板的几种用法，总结了几点小心得。
注意：重点是第 4点，是我自己研究发现的，官方文档可没有哦 ~ 记得重点看下
在此，记录一下，分享给大家。
二、正文
步入正题，前台采用 Layui - table 展示数据表格，案例如下：
table.render(layui.$.extend({
elem: '#yysTable' // 指定 table容器的选择器
, url: '/yys/listData'
, cols: [[ // 表头
{field: 'id', width: 100, title: '序号' }
, {field: 'name', width: 100, title: '单位名称' }
, {field: 'contact', width: 100, title: '联系人' }
, {field: 'telephone', width: 100, title: '联系电话' }
, {field: 'introduce', width: 500, title: '公司简介' }
, {field: 'type', width: 100, title: '单位类型' }
, {field: 'status', width: 100, title: '状态'}
]]
}));此案例就是一个简单的数据表格的数据渲染。
结合案例来看，如 序号、单位名称、联系人、联系电话，我们可直接与传递的数据进行绑定，无需特殊处理。
但如 公司简介(字符串包含html代码)、单位类型(数值/枚举，需展示对应的字符串).. 来说，就需进行特殊处理 。
这时就需要使用到 templet属性，接下来，通过上述字段，来演示 templet的不同用法及场景选择：
1、绑定模板选择器
如 “公司简介”字段来说，我们通过富文本编辑器存储到数据库，字符串可能会内嵌 html标签以及代码，这时需展示的内
容不在单一(展示时就需特殊处理)，就类似情况我们可以创建其对应的模板，存储在页面任意位置，代码如下：
table.render(layui.$.extend({
elem: '#yysTable' // 指定 table容器的选择器
, url: '/yys/listData'
, cols: [[ // 表头
{field: 'id', width: 100, title: '序号' }
, {field: 'introduce', width: 500, title: '公司简介', templet: '#introduceHtml' } // templet <绑定模板选择器>
]]
}));
<script type="text/html" id="introduceHtml">
<td title="{{d.introduce}}" class="layui-table-link">{{d.name}}</td>
</script>
// 官方定义：如果自定义模版的字符量太大，推荐采用此种方式
2、函数转义 < layui 2.2.5 开始支持 >
如 “状态”字段来说，无非就是<1.正常 / 2.禁用> 如性别一样，已经百分百确定的枚举，前台展示效果为数值对应的字符串描述，就类似情况我们可以通过函数转义固定语法进行处理，代码如下：
table.render(layui.$.extend({
elem: '#yysTable' // 指定 table容器的选择器
, url: '/yys/listData'
, cols: [[ // 表头
{field: 'id', width: 100, title: '序号' }
, {field: 'status', width: 100, title: '状态', templet: function (provider) {
return provider.status == 1 ? '正常' : '禁用';
} // templet <函数转义>
]]
}));
3、直接赋值模板字符
如 “单位名称”字段 点击需跳转详情页面，需通过<a>标签简单处理下，就类似情况可以通过直接赋值模板字符固定语法进行处理，代码如下：
table.render(layui.$.extend({
elem: '#yysTable' // 指定 table容器的选择器
, url: '/yys/listData'
, cols: [[ // 表头
{field: 'id', width: 100, title: '序号' }
, {field: 'name', width: 100, title: '单位名称', templet: '<div><a href='/yys/detail/{{d.id}}' target='_blank' class='layui-table-link'>{{d.name}}</a></div>'} // templet <直接赋值模版字符>
]]
}));
// 此处应注意：<官方定义>使用此种方式，所写代码需用一层<div></div>进行包裹，否则无法读取到模板4、直接赋值模板字符 + js代码 --- （推荐）
重点来了，在项目中，小主研究了一种超级实用的方式，一句话，“只要能嵌套js代码，没有什么是问题 ”。
如 “单位类型”字段，同样是枚举类得值，唯一不同的是，此处枚举是可变的，说不定，哪天就会新增或减少一种类型。
所以，这里我们不能在页面中将值写死，我们需要将后台传递的枚举值进行逻辑判断，展示对应的字符串描述。
代码如下：
table.render(layui.$.extend({
elem: '#yysTable' // 指定 table容器的选择器
, url: '/yys/listData'
, cols: [[ // 表头
{field: 'id', width: 100, title: '序号' }
, {field: 'type', width: 100, title: '单位类型', templet: '<div>{{getProviderType(d.type)}}</div>' }
]]
}));
<script>
// getProviderType()方法中的逻辑不重要(这里只是我的个人记录)，重要的是思想
// 通过<直接赋值模板字符 + js代码>来进行复杂的逻辑判断，实现更多的功能
// 这里我只举我实际开发中用的一个案例，其实还有很多
// eg：发送ajax请求、校验... 更多适用场景还需各位猿友挖掘。。。
// 返回卖家类型
function getProviderType(type) {
var providerTyvid= "";
jQuery.each(JSON.parse('$!{providerType}'.replace(/"{/g, "{").replace(/}"/g, "}")), function (i, data) {
if(data.value == type) {
providerType = data.description;
return false;
}
})
return providerType;
}
</script>
Now ~ ~ ~写到这里，就写完了，如果有幸帮助到你，请记得关注我，共同一起见证我们的成长。